Được coi là thực hành xấu để chạy JavaScript khác nhau cho IE

Có được coi là thực hành xấu (và xấu đến mức nào) khi chạy JavaScript khác nhau cho IE không? Hiện tại tôi đang viết một số JavaScript và cách đơn giản để làm việc với các quirks IE có vẻ là để kiểm tra phiên bản trình duyệt và chạy các mã khác nhau

var browserName = navigator.appName;

if (browserName == "Microsoft Internet Explorer") {
  //Do some stuff
}
else
{
//Do other stuff
}

Nó nhanh chóng và hoạt động tốt nhưng dẫn đến sao chép mã và cảm thấy "hacky".

Đúng

Suy ra chức năng từ một chuỗi tác nhân người dùng là một thử nghiệm yếu và dễ bị lỗi. Mặc dù tương đối phổ biến, trong thời đại ngày nay tôi sẽ nói rằng nó chắc chắn được coi là một thực hành xấu.

Ví dụ : jquery có chức năng phát hiện trình duyệt nào người dùng đang sử dụng và nó không được dùng nữa kể từ phiên bản 1.3

Do đó: Đừng đánh hơi UserAgent để quyết định trình duyệt là gì hoặc khả năng của nó là gì.

Thực hành tốt nhất

Cách thực hành tốt nhất được chấp nhận để xử lý sự khác biệt giữa các khả năng của trình duyệt là sử dụng tính năng phát hiện .

Có một vài thư viện xung quanh cho điều này, nổi tiếng nhất có lẽ là: Modernizr . Modernizr giúp bạn dễ dàng điều chỉnh javascript theo khả năng của trình duyệt. Nó hoạt động bằng cách phát hiện những gì có sẵn; không đoán dựa trên chuỗi UserAgent (ngoại trừ dự phòng cuối cùng) và chỉ cần thêm các lớp vào thẻ html. Điều này làm cho nó không chỉ có thể dễ dàng xử lý các trường hợp khác nhau trong js của bạn - mà còn có thể giải quyết các thiếu sót nhất định chỉ với css. ví dụ (hoàn toàn chỉ để minh họa):

ul.menu {
    display:none;
}
ul.menu:hover {
    display:block;
}

# A touch device can have no hover - so show it always
html.notouch ul.menu {
    display: block;
}

Không sao khi nó hợp lệ và không có sự trừu tượng

Đó thực sự không phải là thực tiễn tồi, mặc dù nó đã tốt hơn, các trình duyệt không nhận dạng 100%.

Nhưng, trước khi bắt đầu các trường hợp đặc biệt, hãy xem xét cẩn thận, nếu chúng thực sự là những trường hợp đặc biệt và không chỉ là sự bình dị của một trình duyệt khác. Trong trường hợp này, bạn nên tìm kiếm một giải pháp bằng cách sử dụng các tiêu chuẩn mà tất cả các trình duyệt chia sẻ ( caniuse.com giúp ích rất nhiều cho việc đó).

Khi bạn chắc chắn rằng nó thực sự là trình duyệt, imho bạn nên xem nếu bạn có thể sử dụng một thư viện ẩn chi tiết này từ bạn. Tương thích trình duyệt chéo là một điều khó khăn để có được quyền, vì vậy nếu ai đó đã làm điều đó cho bạn, chỉ cần lợi nhuận.

Như một phương sách cuối cùng, làm những gì bạn phải làm;)

Nếu bằng cách "làm một số thứ", bạn có nghĩa là "sử dụng cơ sở cụ thể của IE x" và bằng cách "làm một số công cụ khác", bạn có nghĩa là "sử dụng cơ sở y phổ biến hơn", thì tốt hơn là chỉ kiểm tra sự hiện diện của x hoặc y.

Tôi đoán rằng bạn hiện không sử dụng bất kỳ thư viện Javascript bên ngoài nào. Trong trường hợp đó, tôi sẽ kiểm tra xem jQuery có hỗ trợ nhiệm vụ mà bạn đang cố gắng thực hiện hay không. Nếu có, tôi sẽ sử dụng nó.

Sử dụng các ý kiến ​​cụ thể IE <!--[if IE &gt; 6]>...hoặc một cái gì đó như thế. Hoạt động trên tất cả các trình duyệt siêu crappy IE? -> IE8, nhưng không phải trên IE9 +, được coi là loại ok như một trình duyệt.

Điểm mấu chốt, một khi bạn đối phó với trình duyệt siêu nhảm nhí cần giải pháp, bạn có thể làm bất cứ điều gì cần thiết, nhưng tránh biến mã cơ sở được viết tốt thành hackatron.

Hy vọng, IE sẽ biến mất vào một ngày nào đó và bạn sẽ có thể xóa mã hackatron và chỉ để lại đường cơ sở được viết tốt.

Tôi nghĩ rằng tốt hơn là trì hoãn kiểu ra quyết định này cho người thiết kế khung và sử dụng một khung JavaScript đóng gói loại phức tạp này. Ngày nay chúng ta có AngularJS, JQuery, ReactJS, v.v., làm những việc không có khung sẽ khiến bạn gặp khó khăn như vậy.

Chà, giả sử bạn thực sự quan tâm đến việc học JavaScript, cách tốt nhất là: Thích thử nghiệm bằng cách vắng mặt / tồn tại các phương thức và viết các hàm chuẩn hóa. Vì vậy, một ví dụ hoàn toàn khập khiễng nhưng nó đánh vào ba nguyên tắc:

if(!document.getElementsByClassName){
    document.getByClass = function(){ //look at all elements, check for class etc...
}
else { document.getByClass = document.getElementsByClassName }

1. Đừng đánh hơi trình duyệt.
2. Bạn cũng có thể loại bỏ một chút hành trình DOM khi bạn đi. Mục đích của API DOM là rõ ràng, không dễ dàng trong đường hầm ống cổ tay của bạn nếu bạn không nhận thấy mức độ linh hoạt kỳ lạ của JS. Hầu như không loại trừ - bất kỳ yếu tố nào là điều làm cho ví dụ trở nên khập khiễng.
3. Cache cho một chức năng mới. Đừng làm bài kiểm tra phương pháp mỗi lần nó được gọi.

Ưu điểm là bạn không bao giờ có thể tin tưởng 100% trình duyệt đánh hơi và bạn không bao giờ biết khi nào một thư viện khác được liên kết đến không thực sự thêm một phương thức tương đương trở lại cho bạn.

Cho dù bạn chỉ đang cố gắng hoàn thành công việc hay muốn tìm hiểu thêm, tôi khuyên bạn nên dùng JQuery. Nó thực hiện công việc đột phá trong việc loại bỏ hành trình API API và duy trì mức độ bình thường hóa đa nền tảng cao nhưng đó cũng là điều bạn có thể học được một chút công bằng từ việc nghiên cứu dưới mui xe. Quan trọng hơn, nếu bạn tiếp tục thực sự học JS cốt lõi, nó sẽ không trở nên vô dụng như nhiều thư viện và khung công tác JS khác và bạn sẽ tiếp tục được hưởng lợi từ việc có thể khử rác JQuery của bạn với OOP-ish điên rồ của bạn kỹ năng.

Ngoài ra, hãy kiểm tra quirksmode.org để hiểu lý do tại sao Microsoft nên thực sự bị coi thường đối với tất cả các IE trước 9 trên mặt trận JS và rất nhiều chi tiết khó hiểu về chính xác bao nhiêu lỗi với API DOM độc quyền của họ và các đề xuất để làm việc xung quanh nó.