Những lý do điển hình khiến Javascript được phát triển trên Firefox không thành công trên IE là gì? [đóng cửa]

Tôi đã phát triển một số trang nâng cao javascript chạy tốt trên Firefox và Safari gần đây. Tôi đã bỏ lỡ kiểm tra Internet Explorer và bây giờ tôi thấy các trang không hoạt động trên IE 6 và 7 (cho đến nay). Bằng cách nào đó, các tập lệnh không được thực thi, các trang hiển thị như thể không có javascript, mặc dù một số javascript được thực thi. Tôi đang sử dụng các thư viện riêng với thao tác dom, từ YUI 2, tôi sử dụng YUI-Loader và XML-Http-Request, và trên một trang, tôi sử dụng "psupload", phụ thuộc vào JQuery.

Tôi đang cài đặt Microsoft Script Editor từ Office XP và bây giờ sẽ gỡ lỗi. Tôi cũng sẽ viết các bài kiểm tra cụ thể ngay bây giờ.

Những điểm không đạt điển hình của IE là gì? Hướng nào tôi có thể mở mang tầm mắt.

Tôi đã tìm thấy trang này, cho thấy một số điểm khác biệt. truy cập: Quirksmode

Từ kinh nghiệm của bạn, bạn có thể kể tên một số điều tiêu biểu mà tôi nên tìm kiếm đầu tiên không?

Tôi cũng sẽ đặt thêm câu hỏi ở đây cho các tác vụ cụ thể sau, nhưng bây giờ tôi quan tâm đến trải nghiệm của bạn tại sao IE thường không thành công với các tập lệnh chạy tốt trong Firefox

Chỉnh sửa: Cảm ơn bạn vì tất cả những câu trả lời tuyệt vời!

Trong thời gian chờ đợi, tôi đã điều chỉnh toàn bộ mã để nó cũng hoạt động với Internet Explorer. Tôi đã tích hợp jQuery và xây dựng các lớp của riêng mình trên đó ngay bây giờ. Đây là sai lầm cơ bản của tôi, rằng tôi đã không xây dựng tất cả nội dung của mình trên jQuery ngay từ đầu. Bây giờ tôi có.

Ngoài ra JSLint đã giúp tôi rất nhiều.

Và nhiều vấn đề đơn lẻ từ các câu trả lời khác nhau đã giúp ích.

Vui lòng cập nhật danh sách này nếu bạn thấy bất kỳ lỗi / thiếu sót nào, v.v.

Lưu ý: IE9 khắc phục nhiều sự cố sau, vì vậy phần lớn điều này chỉ áp dụng cho IE8 trở xuống và ở một mức độ nhất định IE9 ở chế độ quirks. Ví dụ, IE9 hỗ trợ SVG, <canvas>, <audio>và <video>nguyên bản, tuy nhiên bạn phải kích hoạt chế độ tuân thủ các tiêu chuẩn để họ có sẵn.

Chung:

• Sự cố với tài liệu được tải một phần: Bạn nên thêm JavaScript của mình vào một window.onloadsự kiện hoặc sự kiện tương tự vì IE không hỗ trợ nhiều thao tác trong tài liệu được tải một phần.

• Các thuộc tính khác nhau : Trong CSS, elm.style.styleFloattrong IE so với elm.style.cssFloatFirefox. Trong <label>các thẻ, forthuộc tính được truy cập bằng elm.htmlForIE so với elm.fortrong Firefox. Lưu ý rằng nó forđược dành riêng cho IE, vì vậy elm['for']có lẽ là một ý tưởng tốt hơn để ngăn IE đưa ra một ngoại lệ.

Ngôn ngữ JavaScript cơ bản:

• Truy cập các ký tự trong chuỗi : 'string'[0]không được hỗ trợ trong IE vì nó không có trong các đặc tả JavaScript gốc. Sử dụng 'string'.charAt(0)hoặc 'string'.split('')[0]lưu ý rằng truy cập các mục trong mảng nhanh hơn đáng kể so với việc sử dụng charAtvới chuỗi trong IE (mặc dù có một số chi phí ban đầu khi splitđược gọi lần đầu tiên.)

• Dấu phẩy trước khi kết thúc đối tượng: ví dụ: {'foo': 'bar',}không được phép trong IE.

Các vấn đề về yếu tố cụ thể:

• Lấy documentIFrame :

  • Firefox và IE8 +: IFrame.contentDocument (IE bắt đầu hỗ trợ điều này từ phiên bản 8. )
  • I E: IFrame.contentWindow.document
  • ( IFrame.contentWindowđề cập đến windowtrong cả hai trình duyệt.)

• Canvas: Các phiên bản IE trước IE9 không hỗ trợ <canvas>phần tử này. Tuy nhiên, IE có hỗ trợ VML , đây là một công nghệ tương tự và explorercanvas có thể cung cấp một trình bao bọc tại chỗ cho <canvas>các phần tử cho nhiều hoạt động. Cần biết rằng IE8 ở chế độ tuân thủ tiêu chuẩn chậm hơn nhiều lần và có nhiều trục trặc hơn so với ở chế độ kỳ quặc khi sử dụng VML.

• SVG: IE9 hỗ trợ SVG nguyên bản. IE6-8 có thể hỗ trợ SVG, nhưng chỉ với các plugin bên ngoài chỉ với một số plugin hỗ trợ thao tác JavaScript.

• <audio>và <video>: chỉ được hỗ trợ trong IE9.

• Tự động tạo các nút radio: IE <8 có một lỗi khiến các nút radio được tạo không thể chọn được document.createElement. Xem thêm Làm cách nào để bạn tạo động một nút radio trong Javascript hoạt động trên tất cả các trình duyệt? để tìm cách giải quyết vấn đề này.

• JavaScript được nhúng trong <a href>thẻ và onbeforeunloadxung đột trong IE: Nếu có JavaScript được nhúng trong hrefmột phần của athẻ (ví dụ: <a href="javascript: doStuff()">IE sẽ luôn hiển thị thông báo được trả về từ đó onbeforeunloadtrừ khi onbeforeunloadtrình xử lý bị xóa trước. Xem thêm Yêu cầu xác nhận khi đóng tab .

• <script>sự khác biệt về sự kiện thẻ: onsuccess và onerrorkhông được hỗ trợ trong IE và được thay thế bằng một chương trình dành riêng cho IE onreadystatechangeđược kích hoạt bất kể tải xuống thành công hay không thành công. Xem thêm JavaScript Madness để biết thêm thông tin.

Kích thước phần tử / vị trí / cuộn và vị trí chuột:

• Lấy kích thước / vị trí phần tử : chiều rộng / chiều cao của phần tử đôi khi elm.style.pixelHeight/Widthở IE hơn là elm.offsetHeight/Width, nhưng không đáng tin cậy trong IE, đặc biệt là ở chế độ quirks và đôi khi cái này cho kết quả tốt hơn cái kia.

  elm.offsetTopvà elm.offsetLeftthường được báo cáo không chính xác, dẫn đến việc tìm kiếm vị trí của các phần tử không chính xác, đó là lý do tại sao các phần tử bật lên, v.v. bị tắt một vài pixel trong nhiều trường hợp.

  Cũng lưu ý rằng nếu một phần tử (hoặc phần tử cha của phần tử) có giá displaytrị noneđó thì IE sẽ đưa ra một ngoại lệ khi truy cập các thuộc tính size / position thay vì trả về 0như Firefox.

• Lấy kích thước màn hình (Lấy vùng có thể xem được của màn hình):

  • Firefox: window.innerWidth/innerHeight
  • Chế độ tiêu chuẩn IE: document.documentElement.clientWidth/clientHeight
  • Chế độ quirks IE: document.body.clientWidth/clientHeight

• Vị trí cuộn tài liệu / vị trí chuột : Vị trí này thực sự không được w3c xác định, vì vậy nó không phải là tiêu chuẩn ngay cả trong Firefox. Để tìm scrollLeft/ scrollToptrong số document:

  • Firefox và IE ở chế độ quirks: document.body.scrollLeft/scrollTop
  • IE ở chế độ tiêu chuẩn: document.documentElement.scrollLeft/scrollTop

  • LƯU Ý: Một số trình duyệt khác cũng sử dụng pageXOffset/ pageYOffset.

    function getDocScrollPos() {
     var x = document.body.scrollLeft ||
             document.documentElement.scrollLeft ||
             window.pageXOffset || 0,
         y = document.body.scrollTop ||
             document.documentElement.scrollTop ||
             window.pageYOffset || 0;
     return [x, y];
    };

  Để có được vị trí của con trỏ chuột evt.clientXvà evt.clientYtrong mousemovecác sự kiện sẽ cung cấp vị trí liên quan đến tài liệu mà không thêm vị trí cuộn, vì vậy chức năng trước đó sẽ cần được kết hợp:

  var mousepos = [0, 0];
  document.onmousemove = function(evt) {
   evt = evt || window.event;
   if (typeof evt.pageX != 'undefined') {
    // Firefox support
    mousepos = [evt.pageX, evt.pageY];
   } else {
    // IE support
    var scrollpos = getDocScrollPos();
    mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]];
   };
  };

Các lựa chọn / phạm vi:

• <textarea>và các <input>lựa chọn : selectionStartvà selectionEndkhông được triển khai trong IE và có một hệ thống "phạm vi" độc quyền ở vị trí của nó, hãy xem thêm Vị trí con nháy trong vùng văn bản, bằng các ký tự ngay từ đầu .

• Lấy văn bản hiện được chọn trong tài liệu:

  • Firefox: window.getSelection().toString()
  • I E: document.selection.createRange().text

Nhận các phần tử theo ID:

• document.getElementByIdcũng có thể tham chiếu đến namethuộc tính trong các biểu mẫu (tùy thuộc vào thuộc tính được xác định trước trong tài liệu), vì vậy tốt nhất là không nên có các phần tử khác nhau có cùng namevà id. Điều này có từ những ngày mà idkhông phải là tiêu chuẩn w3c. document.all(thuộc tính độc quyền dành riêng cho IE ) nhanh hơn đáng kể document.getElementById, nhưng nó có các vấn đề khác vì nó luôn ưu tiên nametrước id. Cá nhân tôi sử dụng mã này, kiểm tra lại với các kiểm tra bổ sung chỉ để chắc chắn:

  function getById(id) {
   var e;
   if (document.all) {
    e = document.all[id];
    if (e && e.tagName && e.id === id) {
     return e;
    };
   };
   e = document.getElementById(id);
   if (e && e.id === id) {
    return e;
   } else if (!e) {
    return null;
   } else {
    throw 'Element found by "name" instead of "id": ' + id;
   };
  };

Sự cố với nộiHTML chỉ đọc:

• IE sẽ không hỗ trợ thiết lập các innerHTML của col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, vàtr các yếu tố. Đây là một hàm hoạt động xung quanh điều đó cho các phần tử liên quan đến bảng:

  function setHTML(elm, html) {
   // Try innerHTML first
   try {
    elm.innerHTML = html;
   } catch (exc) {
    function getElm(html) {
     // Create a new element and return the first child
     var e = document.createElement('div');
     e.innerHTML = html;
     return e.firstChild;
    };
    function replace(elms) {
     // Remove the old elements from 'elm'
     while (elm.children.length) {
      elm.removeChild(elm.firstChild);
     }
     // Add the new elements from 'elms' to 'elm'
     for (var x=0; x<elms.children.length; x++) {
      elm.appendChild(elms.children[x]);
     };
    };
    // IE 6-8 don't support setting innerHTML for
    // TABLE, TBODY, TFOOT, THEAD, and TR directly
    var tn = elm.tagName.toLowerCase();
    if (tn === 'table') {
     replace(getElm('<table>' + html + '</table>'));
    } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) {
     replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild);
    } else if (tn === 'tr') {
     replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild);
    } else {
     throw exc;
    };
   };
  };

  Cũng lưu ý rằng IE yêu cầu thêm a <tbody>vào a <table>trước khi thêm <tr>s vào <tbody>phần tử đó khi tạo bằng cách sử dụng document.createElement, ví dụ:

  var table = document.createElement('table');
  var tbody = document.createElement('tbody');
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  table.appendChild(tbody);
  tbody.appendChild(tr);
  tr.appendChild(td);
  // and so on

Sự khác biệt của sự kiện:

• Lấy eventbiến: Các sự kiện DOM không được chuyển tới các hàm trong IE và có thể truy cập được dưới dạng window.event. Một cách phổ biến để nhận sự kiện là sử dụng ví dụ:
  elm.onmouseover = function(evt) {evt = evt||window.event}
  mặc định thành window.eventnếu evtlà không xác định.

• Sự khác biệt chính về mã sự kiện : Các mã sự kiện chính rất khác nhau, mặc dù nếu bạn nhìn vào Quirksmode hoặc JavaScript Madness , nó hầu như không dành riêng cho IE, Safari và Opera lại khác.

• Chuột khác biệt sự kiện: các buttonthuộc tính trong IE là một chút-cờ cho phép nhiều nút chuột cùng một lúc:

  • Còn lại: 1 (var isLeft = evt.button & 1 )
  • Đúng: 2 (var isRight = evt.button & 2 )

  • Trung tâm: 4 (var isCenter = evt.button & 4 )

    Mô hình W3C (được hỗ trợ bởi Firefox) kém linh hoạt hơn so với mô hình IE, chỉ cho phép một nút duy nhất cùng lúc với trái dưới 0, bên phải 2và ở giữa 1. Lưu ý rằng, như Peter-Paul Koch đã đề cập , điều này rất phản trực giác, 0thường có nghĩa là 'không có nút'.

    offsetXvà offsetYcó vấn đề và có lẽ tốt nhất nên tránh chúng trong IE. Một cách đáng tin cậy hơn để lấy offsetXvà offsetYtrong IE sẽ là lấy vị trí của phần tử được định vị tương đối và trừ đi clientXvà clientY.

    Cũng lưu ý rằng trong IE để có được một cú nhấp đúp trong một clicksự kiện, bạn cần phải đăng ký cả một sự kiện clickvà dblclickmột hàm. Firefox bắn clickcũng như dblclickkhi đôi click, vì vậy phát hiện IE-cụ thể là cần thiết để có hành vi tương tự.

• Sự khác biệt trong trường hợp xử lý mô hình: Cả hai mô hình IE độc quyền và việc xử lý hỗ trợ mô hình Firefox của các sự kiện từ lên phía dưới, ví dụ như nếu có những sự kiện trong cả hai yếu tố của <div><span></span></div>sự kiện sau đó sẽ kích hoạt trong span sau đó cácdiv chứ không phải là thứ tự mà họ đang ràng buộc nếu một ví dụ truyền thống elm.onclick = function(evt) {}được sử dụng.

  Các sự kiện "Capture" thường chỉ được hỗ trợ trong Firefox, v.v., sẽ kích hoạt divcác spansự kiện sau đó theo thứ tự từ trên xuống. IE có elm.setCapture()và elm.releaseCapture()để chuyển hướng các sự kiện chuột từ tài liệu đến phần tử ( elmtrong trường hợp này) trước khi xử lý các sự kiện khác, nhưng chúng có một số hiệu suất và các vấn đề khác nên có lẽ nên tránh.

  • Firefox:

    Đính kèm : elm.addEventListener(type, listener, useCapture [true/false])
    Tháo : elm.removeEventListener(type, listener, useCapture)
    ( typeví dụ: 'mouseover'không có on)

  • IE: Chỉ có thể thêm một sự kiện duy nhất của một kiểu đã cho trên một phần tử trong IE - một ngoại lệ được đưa ra nếu nhiều sự kiện cùng kiểu được thêm vào. Cũng lưu ý rằng tham chiếu thisđến windowchứ không phải là phần tử ràng buộc trong các hàm sự kiện (vì vậy ít hữu ích hơn):

    Đính kèm : elm.attachEvent(sEvent, fpNotify)
    Tách : elm.detachEvent(sEvent, fpNotify)
    ( sEventví dụ 'onmouseover':)

• Sự khác biệt thuộc tính sự kiện:

  • Ngừng xử lý các sự kiện bởi bất kỳ chức năng lắng nghe nào khác :

    Firefox: evt.stopPropagation()
    IE: evt.cancelBubble = true

  • Ví dụ: ngăn các sự kiện chính chèn ký tự hoặc ngăn hộp kiểm được chọn:

    Firefox: evt.preventDefault()
    IE: evt.returnValue = false
    Lưu ý: Chỉ cần trả lại falsetrong keydown, keypress, mousedown, mouseup, clickvà resetcũng sẽ ngăn chặn mặc định.

  • Nhận phần tử đã kích hoạt sự kiện:

    Firefox: evt.target
    IE: evt.srcElement

  • Lấy phần tử mà con trỏ chuột di chuyển khỏi: evt.fromElement trong IE là evt.targettrong Firefox nếu trong một onmouseoutsự kiện, nếu khôngevt.relatedTarget

  • Lấy phần tử mà con trỏ chuột di chuyển đến: evt.toElement trong IE là evt.relatedTargettrong Firefox nếu trong một onmouseoutsự kiện, nếu khôngevt.target

  • Lưu ý: evt.currentTarget (phần tử mà sự kiện bị ràng buộc) không có phần tử tương đương trong IE.

Cũng kiểm tra các dấu phẩy chẳng hạn như những dấu phẩy này hoặc tương tự nếu có trong mã của bạn

var o={
'name1':'value1',
'name2':'value2',
} 

dấu phẩy cuối cùng (sau giá trị2) sẽ được Firefox chấp nhận, nhưng không phải IE

Nếu bạn sử dụng jQuery hoặc YUI khi bài đăng của bạn được gắn thẻ, bạn nên có sự khác biệt tối thiểu giữa các trình duyệt ... đó là những gì các khuôn khổ dành cho bạn, để giải quyết những khác biệt giữa các trình duyệt này cho bạn.

Ví dụ: hãy xem trang duyệt DOM quirksmode , theo đó IE không hỗ trợ hầu hết mọi thứ ... trong khi đúng, các khung làm việc, ví dụ như IE không hỗ trợ elem.childElementCount, nhưng trong jQuery:$(elem).children().size() hoạt động để lấy giá trị này, trong mọi trình duyệt. Bạn sẽ tìm thấy thứ gì đó trong thư viện để xử lý 99% các trường hợp không được hỗ trợ trên các trình duyệt, ít nhất là với script ... với CSS, bạn có thể phải chuyển sang plugin cho thư viện, một ví dụ phổ biến về điều này là để có được các góc tròn làm việc trong IE ... vì nó không hỗ trợ CSS cho việc đó.

Tuy nhiên, nếu bạn bắt đầu làm mọi thứ trực tiếp, chẳng hạn như document.XXX(thing), thì bạn không ở trong thư viện, bạn đang làm javascript trực tiếp (tất cả đều là javascript, nhưng bạn hiểu được vấn đề :) và điều này có thể gây ra sự cố hoặc không, tùy thuộc vào cách nhóm IE đã say sưa khi thực hiện chức năng cụ thể đó.

Với IE, bạn có nhiều khả năng thất bại trong việc tạo kiểu đúng hơn là các vấn đề javascript thô, hình ảnh động bị tắt một vài pixel và đại loại là nhiều thứ, tất nhiên là nhiều hơn thế trong IE6.

getElementbyID cũng sẽ khớp với thuộc tính name trong IE, chứ không phải các trình duyệt khác và IE sẽ chọn bất kỳ cái nào tìm thấy trước.

thí dụ:

<script>
 var foo = document.getElementById('bar');
</script>

....
<input name="bar" type="text" />  //IE will get this element
<span id="bar"> Hello, World! </span>  //FF,Safari,Chrome will get this element

Có rất nhiều thứ, nhưng một cái bẫy mà tôi từng mắc phải là nhiều trình duyệt chấp nhận JSON mà không có tên được trích dẫn, trong khi ie6 và ie7 thì không.

{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!

Chỉnh sửa : Để làm rõ, đây chỉ là một vấn đề khi JSON thực sự được yêu cầu, trái ngược với một đối tượng theo nghĩa đen. JSON là một tập hợp con của cú pháp theo nghĩa đen của đối tượng và có nghĩa là một định dạng trao đổi dữ liệu (như XML), đó là lý do tại sao nó được thiết kế để kén chọn hơn.

Hỗ trợ JavaScript khác nhau

IE không hỗ trợ (hầu hết) các phần mở rộng được thêm vào JavaScript kể từ ngày 1.5.

Mới trong 1.6

• Phương pháp mảng - indexOf(), lastIndexOf(), every(), filter(), forEach(), map(),some()
• for each ... in - lặp giá trị thay vì tên thuộc tính.

Mới trong 1.7

• Chuyển nhượng cơ cấu - [a,b] = [1,2]
• Trình tạo lặp và Trình tạo
• let và yeild

Mới trong 1.8

• Phương thức mảng - reduce(),reduceRight()
• Các phím tắt để xác định các chức năng.

Một số điều này yêu cầu bạn chỉ định số phiên bản JavaScript để chạy (sẽ bị hỏng trong IE), nhưng một số thứ như [1,2,3].indexOf(2)có vẻ không phải là vấn đề lớn cho đến khi bạn cố gắng chạy nó trong IE

Sự khác biệt chính giữa JavaScript trong IE và JavaScript trong các trình duyệt hiện đại (ví dụ: Firefox) có thể là do cùng những lý do đằng sau sự khác biệt trong trình duyệt chéo CSS / (X) HTML. Ngày trước không có tiêu chuẩn thực tế; IE / Netscape / Opera đã gây ra một cuộc chiến tranh sân cỏ, thực hiện hầu hết các thông số kỹ thuật, nhưng cũng bỏ qua một số thông số kỹ thuật cũng như tạo ra các thông số kỹ thuật độc quyền để giành lợi thế hơn nhau. Tôi có thể tiếp tục, nhưng hãy bỏ qua trước khi phát hành IE8: JavaScript bị tránh / bị khinh miệt trong nhiều năm, và với sự nổi lên của FF và sự khinh thường của webcomm, IE đã chọn tập trung chủ yếu vào việc cải tiến CSS của họ từ IE6 trở đi. Và về cơ bản đã để lại hỗ trợ DOM. Hỗ trợ DOM của IE8 cũng có thể là của IE6, được tung ra vào năm 2001 .... vì vậy hỗ trợ DOM của IE chậm hơn các trình duyệt hiện đại gần một thập kỷ. Nếu bạn đang gặp phải sự khác biệt về JavaScript cụ thể đối với một công cụ bố cục, tốt nhất bạn nên tấn công nó giống như cách chúng tôi đã xử lý các vấn đề CSS; Nhắm mục tiêu trình duyệt đó. KHÔNG SỬ DỤNG TRÌNH DUYỆT SNIFFING, hãy sử dụng tính năng phát hiện để phát hiện trình duyệt của bạn / mức độ hỗ trợ DOM của nó.

JScript không phải là triển khai ECMAScript của riêng IE; JScript là câu trả lời của IE cho JavaScript của Netscape, cả hai đều ra đời trước ECMAScript.

Đối với các thuộc tính type trên phần tử script, type = "text / javascript" là tiêu chuẩn mặc định (ít nhất là trong HTML5), vì vậy bạn không bao giờ cần thuộc tính type trừ khi tập lệnh của bạn không phải là JavaScript.

Vì IE không hỗ trợ innerHTML ... thì innerHTML được phát minh bởi IE và cho đến ngày nay vẫn KHÔNG phải là một tiêu chuẩn DOM. Các trình duyệt khác đã áp dụng nó vì nó hữu ích, đó là lý do tại sao bạn có thể sử dụng nó trên nhiều trình duyệt. Đối với các bảng thay đổi động, MSDN cho biết "do cấu trúc cụ thể được yêu cầu bởi các bảng, các thuộc tính innerText và innerHTML của bảng và các đối tượng tr là chỉ đọc." Tôi không biết ban đầu điều đó đúng bao nhiêu phần trăm, nhưng rõ ràng là các trình duyệt hiện đại đã tìm ra điều đó trong khi giải quyết sự phức tạp của bố cục bảng.

Tôi thực sự khuyên bạn nên đọc PPK trên JavaScript Jeremy Keith's DOM Scripting JavaScript của Douglas Crockford : The Good Parts và JavaScript Khởi đầu của Christian Hellman với DOM Scripting và Ajax để nắm rõ hơn về JavaScript.

Liên quan đến Khung / Thư viện, nếu bạn chưa nắm rõ về JavaScript, bạn nên tránh chúng. Cách đây 2 năm, tôi đã rơi vào bẫy của jQuery, và trong khi tôi có thể tạo ra những kỳ tích tuyệt vời, tôi chưa bao giờ học được một điều chết tiệt nào về việc viết mã JavaScript đúng cách. Tóm lại, jQuery là một Bộ công cụ DOM tuyệt vời, nhưng việc tôi không học được các cách đóng thích hợp, kế thừa nguyên mẫu, v.v., không chỉ giúp cải thiện kiến ​​thức cá nhân của tôi mà công việc của tôi bắt đầu nhận về hiệu suất rất lớn vì tôi không có manh mối nào về việc tôi đang làm.

JavaScript là ngôn ngữ của trình duyệt; nếu bạn là kỹ sư phía máy khách / phía trước, điều quan trọng nhất là bạn phải ra lệnh cho JavaScript. Node.js đang mang lại độ nghiêng hoàn toàn cho JavaScript, tôi thấy những bước tiến lớn được thực hiện hàng ngày trong quá trình phát triển của nó; JavaScript phía máy chủ sẽ là một tiêu chuẩn trong tương lai rất gần. Tôi đề cập đến vấn đề này để nhấn mạnh thêm rằng JavaScript hiện tại và sẽ quan trọng như thế nào.

JavaScript sẽ tạo ra nhiều làn sóng hơn Rails.

Chúc bạn viết kịch bản vui vẻ!

Một số đối tượng gốc ở chế độ chỉ đọc mà không thực sự có vẻ như vậy (bạn có thể ghi vào chúng nhưng nó không có tác dụng). Ví dụ: một javascript nâng cao phổ biến dựa trên việc mở rộng Elementđối tượng bằng cách ghi đè các phương thức hệ thống, chẳng hạn như thay đổi Element.prototype.appendChild () để làm nhiều việc hơn là thêm một nút con - giả sử, khởi tạo nó bằng dữ liệu của cha mẹ. Điều này sẽ không thành công trên IE6 - phương thức gốc sẽ được gọi trên các đối tượng mới thay vì phương thức mới.

Một số trình duyệt (bây giờ tôi không nhớ là trình duyệt nào) coi các dòng mới giữa các thẻ HTML là các nút văn bản, trong khi những trình duyệt khác thì không. Vì vậy, childNodes (n), nextSibling (), firstChild () và những thứ tương tự sẽ hoạt động rất khác nhau.

Dấu phẩy theo sau trong mảng và ký tự đối tượng từng là một vấn đề, chưa được kiểm tra gần đây (nghĩa là IE8):

var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };

Điều này sẽ gây ra một số mã bổ sung khi tạo cấu trúc phía máy chủ.

Tôi vừa tìm thấy một thẻ sáng nay, một đồng nghiệp đã đặt thẻ tập lệnh là: <script type="application/javascript">bởi vì tính năng tự động hoàn thành lý tưởng của anh ấy có thẻ đó trước "text / javascript"

Nhưng hóa ra IE chỉ bỏ qua toàn bộ tập lệnh nếu bạn sử dụng "ứng dụng / javascript", bạn cần sử dụng "văn bản / javascript"

Tôi đã tìm thấy một câu hỏi kỳ quặc chỉ vào ngày hôm trước với Internet Explorer. Tôi đang sử dụng YUI và thay thế nội dung của phần nội dung bảng () bằng cách đặt innerHTML

Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');

Điều này sẽ hoạt động trên tất cả các trình duyệt NGOẠI TRỪ IE. Cuối cùng tôi đã phát hiện ra rằng bạn không thể thay thế InternalHTML của bảng trong IE. Tôi phải tạo một nút bằng YUI và sau đó nối thêm nút đó.

var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);

Đó là một điều thú vị để tìm ra!

Dấu phẩy thừa và dấu phẩy thiếu từng là vấn đề thường gặp trên IE trong khi nó hoạt động trơn tru trên FF.

IE rất nghiêm ngặt về việc thiếu ";" thường là vậy.

Vì những gì nó đáng giá, tôi chỉ gặp phải vấn đề khó chịu này trong <IE9

nói rằng bạn có một số html như thế này:

<table><tr><td>some content...</td></tr></table>

và vì một số lý do (tôi có một lý do tốt), bạn cần truy xuất tất cả HTML trong bảng trước khi TR đóng cuối cùng, bạn có thể thử một cái gì đó như sau:

var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));

<IE9 sẽ không trả về gì (-1) ở đây vì biến tableHtml chứa tất cả các thẻ html viết hoa và lastIndexOf phân biệt chữ hoa chữ thường. Để giải quyết vấn đề này, tôi phải đưa vào toLowerCase () trước lastIndexOf.

IE không phải là một trình duyệt hiện đại và chỉ tuân theo ECMAScript một cách lỏng lẻo.

Bạn đã đề cập đến jQuery mà tôi ít quen thuộc hơn nhưng để tham khảo chung, và cụ thể là với Prototype, một điều cần chú ý là các từ / tên phương thức dành riêng trong IE. Tôi biết điều thường khiến tôi gặp phải là những thứ như:

someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );

(Phần tử mới (tagName, propertyHash) là cách các phần tử mới được tạo trong Protitype). Trong IE, for:phải có 'for':, bởi vì forlà một từ dành riêng. Điều này hoàn toàn hợp lý - nhưng FireFox sẽ chấp nhận điều này.

Một vi dụ khac:

someElement.wrap('div').addClassName('someClass')

( wrapphương thức trong Prototype bao bọc một phần tử này trong một phần tử khác) - Trong IE, trên textareas, wraplà một thuộc tính và Element.wrap()phải được sử dụng thay vì phiên bản được phương pháp hóa

Đây là hai ví dụ mà tôi nghĩ đến từ kinh nghiệm của mình. Chúng dựa trên nguyên mẫu nhưng vấn đề cốt lõi không phải là: Hãy để ý bất kỳ phương thức / nhãn / mã nhận dạng nào mà IE coi là các từ dành riêng nhưng FireFox hoặc Safari sẽ chấp nhận.

Thực tế là IE không hỗ trợ JavaScript ... Nó hỗ trợ việc triển khai ECMAScript: JScript ... của riêng anh ấy ... một thứ khác ...

Việc sử dụng console.log()để xuất lỗi ra bảng điều khiển lỗi Firefox sẽ khiến các tập lệnh của bạn bị lỗi trong IE. Bạn phải nhớ lấy chúng ra khi bạn kiểm tra trong IE.