Hướng dẫn js script not working in html - tập lệnh js không hoạt động trong html

Tại sao JavaScript của tôi không hoạt động trong HTML?

Trên menu Trình duyệt web Nhấp vào "Chỉnh sửa" và chọn "Tùy chọn". Trong cửa sổ "Tùy chọn", chọn tab "Bảo mật". Trong phần Tab "Bảo mật" "Nội dung web" Đánh dấu hộp kiểm "Bật JavaScript". Nhấp vào nút "Tải lại trang hiện tại" của trình duyệt web để làm mới trang.

Làm thế nào để bạn sử dụng JavaScript trong HTML?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ tập lệnh với thuộc tính SRC. Bạn đã sử dụng thuộc tính SRC khi sử dụng hình ảnh. Giá trị cho thuộc tính SRC phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn.

Tại sao tệp JS của tôi không tải?

• Tệp JS không tải trong mã HTML có thể trả lời rất có thể, vấn đề là bạn đang đưa tệp JS của mình vào thẻ đầu hoặc ở đâu đó trên nội dung chính của bạn. ... Bạn sẽ có thể thêm tệp JS vào thẻ tập lệnh. Trang tải trước sau đó JavaScript.
• Chúng ta có thể chạy JS ở định dạng tệp HTML không?

Bạn chạy JavaScript từ bên trong các trang web HTML của bạn. Để gọi mã JavaScript từ bên trong HTML, bạn cần phần tử. Có hai cách để sử dụng tập lệnh, tùy thuộc vào việc bạn có liên kết với tập lệnh bên ngoài hay nhúng tập lệnh ngay trong trang web của bạn.

Bây giờ chúng ta sẽ xem xét các vấn đề JavaScript trình duyệt phổ biến và cách khắc phục chúng. Điều này bao gồm thông tin về việc sử dụng các công cụ trình duyệt trình duyệt để theo dõi và khắc phục sự cố, sử dụng polyfills và thư viện để giải quyết các vấn đề, nhận các tính năng JavaScript hiện đại hoạt động trong các trình duyệt cũ hơn và hơn thế nữa.

Rắc rối với JavaScript

• Trong lịch sử, JavaScript đã bị ảnh hưởng bởi các vấn đề tương thích trình duyệt chéo-trở lại vào những năm 1990, các lựa chọn trình duyệt chính hồi đó (Internet Explorer và Netscape) đã được thực hiện trong các hương vị ngôn ngữ khác nhau (Netscape có JavaScript, IE có JScript và cũng cung cấp VBScript như một Tùy chọn), và trong khi ít nhất JavaScript và JScript tương thích ở một mức độ nào đó (cả hai đều dựa trên đặc điểm kỹ thuật của ECMAscript), mọi thứ thường được thực hiện theo những cách mâu thuẫn, không tương thích, khiến các nhà phát triển gây ra nhiều cơn ác mộng.
• Những vấn đề không tương thích như vậy vẫn tồn tại vào đầu những năm 2000, vì các trình duyệt cũ vẫn đang được sử dụng và vẫn cần hỗ trợ. Đây là một trong những lý do chính khiến các thư viện như jQuery ra đời - để trừu tượng hóa sự khác biệt trong việc triển khai trình duyệt (ví dụ: xem đoạn mã trong cách thực hiện yêu cầu HTTP) vì vậy các nhà phát triển chỉ phải viết một chút mã đơn giản (xem
  5 ). JQuery (hoặc bất kỳ thư viện nào bạn đang sử dụng) sau đó sẽ xử lý sự khác biệt trong nền, vì vậy bạn không cần phải làm thế.
• Sự nhầm lẫn về điều này, về mặt phạm vi mà nó áp dụng, và do đó nếu giá trị của nó là những gì bạn dự định. Bạn có thể đọc "cái này" là gì? để giới thiệu ánh sáng; Bạn cũng nên nghiên cứu các ví dụ như thế này, cho thấy một mô hình điển hình là lưu phạm vi
  6 vào một biến riêng biệt, sau đó sử dụng biến đó trong các hàm lồng nhau để bạn có thể chắc chắn rằng bạn đang áp dụng chức năng cho phạm vi
  6 chính xác.
• Sử dụng không chính xác các chức năng bên trong các vòng lặp lặp với biến toàn cầu (nói chung là "nhận phạm vi sai"). Ví dụ: trong Bad-for-loop.html (xem mã nguồn), chúng tôi lặp qua 10 lần lặp bằng cách sử dụng một biến được xác định với
  8, mỗi lần tạo một đoạn văn và thêm trình xử lý sự kiện onClick vào nó. Khi được nhấp, chúng tôi muốn mỗi người hiển thị một thông báo cảnh báo chứa số của nó (giá trị
  9 tại thời điểm nó được tạo). Thay vào đó, tất cả họ đều báo cáo
  9 là 11 - bởi vì vòng lặp

  document.addEventListener("DOMContentLoaded", function(event) { 
    alert('Hey')
  });
  

  1 thực hiện tất cả các chức năng lặp lại trước khi các chức năng lồng nhau được gọi.

  Lưu ý: Giải pháp dễ nhất là khai báo biến lặp với

  document.addEventListener("DOMContentLoaded", function(event) { 
    alert('Hey')
  });
  

  2 thay vì ________ 28 Giá trị của
  9 được liên kết với hàm sau đó là duy nhất cho mỗi lần lặp. Thật không may, điều này không hoạt động chính xác với IE11, đó là lý do tại sao chúng tôi chưa sử dụng phương pháp này trong "tốt" cho vòng lặp. The easiest solution is to declare the iteration variable with

  document.addEventListener("DOMContentLoaded", function(event) { 
    alert('Hey')
  });
  

  2 instead of
  8—the value of
  9 associated with the function is then unique to each iteration. Unfortunately this does not work correctly with IE11, which is why we haven't used this approach in the "good" for loop.
  Nếu bạn muốn điều này hoạt động chính xác, bạn có thể xác định một hàm để thêm trình xử lý riêng biệt, gọi nó trên mỗi lần lặp và chuyển giá trị hiện tại của

  document.addEventListener("DOMContentLoaded", function(event) { 
    alert('Hey')
  });
  

  5 và
  9 mỗi lần (hoặc một cái gì đó tương tự). Xem tốt-for-loop.html (cũng xem mã nguồn) để biết phiên bản hoạt động.
• Đảm bảo các hoạt động không đồng bộ đã trở lại trước khi cố gắng sử dụng các giá trị mà họ trả về. Ví dụ, ví dụ AJAX này kiểm tra để đảm bảo yêu cầu đã hoàn tất và phản hồi đã được trả lại trước khi cố gắng sử dụng phản hồi cho bất cứ điều gì. Loại hoạt động này đã được thực hiện dễ dàng hơn để xử lý bằng cách giới thiệu lời hứa với ngôn ngữ JavaScript.

Linters

Như với HTML và CSS, bạn có thể đảm bảo chất lượng tốt hơn, mã JavaScript dễ bị lỗi bằng cách sử dụng Linter, chỉ ra lỗi và cũng có thể gắn cờ các cảnh báo về các thực tiễn xấu, v.v., và được tùy chỉnh để nghiêm khắc hơn hoặc thư giãn hơn trong Báo cáo lỗi/cảnh báo. Linters JavaScript/Ecmascript mà chúng tôi giới thiệu là JSHINT và ESLINT; Chúng có thể được sử dụng theo nhiều cách khác nhau, một số trong đó chúng tôi sẽ chi tiết dưới đây.

Trực tuyến

Trang chủ JSHINT cung cấp một linter trực tuyến, cho phép bạn nhập mã JavaScript của mình ở bên trái và cung cấp đầu ra bên phải, bao gồm các số liệu, cảnh báo và lỗi.

Mã trình chỉnh sửa mã

Không thuận tiện khi phải sao chép và dán mã của bạn lên một trang web để kiểm tra tính hợp lệ của nó nhiều lần. Những gì bạn thực sự muốn là một linter sẽ phù hợp với quy trình làm việc tiêu chuẩn của bạn với tối thiểu rắc rối. Nhiều trình chỉnh sửa mã có các plugin linter, ví dụ như trình chỉnh sửa mã Atom của GitHub có sẵn một plugin JShint.

Để cài đặt nó:

1. Cài đặt Atom (nếu bạn chưa cài đặt phiên bản cập nhật)-tải xuống từ trang ATOM được liên kết ở trên.
2. Truy cập hộp thoại Tùy chọn của Atom (ví dụ: bằng cách chọn Atom> Tùy chọn trên MAC hoặc Tệp> Tùy chọn trên Windows/Linux) và chọn tùy chọn Cài đặt trong menu bên trái.
3. Trong trường Tìm kiếm gói văn bản, nhập "JSLint" và nhấn Enter/Return để tìm kiếm các gói liên quan đến Lining.
4. Bạn sẽ thấy một gói gọi là Lint ở đầu danh sách. Cài đặt này trước (sử dụng nút Cài đặt), vì các lớp lót khác dựa vào nó để hoạt động. Sau đó, cài đặt plugin linter-jshint.lint at the top of the list. Install this first (using the Install button), as other linters rely on it to work. After that, install the linter-jshint plugin.
5. Sau khi các gói đã cài đặt xong, hãy thử tải lên tệp JavaScript: bạn sẽ thấy bất kỳ vấn đề nào được tô sáng màu xanh lá cây (để cảnh báo) và màu đỏ (cho lỗi) , thông báo lỗi và đôi khi các giá trị được đề xuất hoặc các bản sửa lỗi khác.

Sử dụng khác

Có nhiều cách khác để sử dụng các lớp lót như vậy; Bạn có thể đọc về chúng trên các trang cài đặt JSHINT và ESLINT.

Điều đáng đề cập đến việc sử dụng dòng lệnh - bạn có thể cài đặt các công cụ này dưới dạng các tiện ích dòng lệnh (có sẵn thông qua giao diện dòng lệnh CLI) bằng cách sử dụng NPM (Trình quản lý gói nút - bạn sẽ phải cài đặt NodeJS trước). Ví dụ: lệnh sau cài đặt jshint:

Sau đó, bạn có thể trỏ các công cụ này vào các tệp JavaScript bạn muốn Lint, ví dụ:

Bạn cũng có thể sử dụng các công cụ này với công cụ Runner/Build Tasker như Gulp hoặc WebPack để tự động xua tan JavaScript của bạn trong quá trình phát triển. . JSHINT được Grunt hỗ trợ ra khỏi hộp, và cũng có sẵn các tích hợp khác, ví dụ: Trình tải jShint cho webpack.

Lưu ý: Eslint mất nhiều thiết lập và cấu hình hơn jshint, nhưng nó cũng mạnh hơn. ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.

Công cụ phát triển trình duyệt

Các công cụ phát triển trình duyệt có nhiều tính năng hữu ích để giúp gỡ lỗi JavaScript. Để bắt đầu, bảng điều khiển JavaScript sẽ báo cáo lỗi trong mã của bạn.

Tạo một bản sao cục bộ của ví dụ Broken-Ajax.html của chúng tôi (xem mã nguồn cũng vậy).

Nếu bạn nhìn vào bảng điều khiển, bạn sẽ thấy thông báo lỗi "Kiểu chưa được thực hiện: Không thể truy cập thuộc tính" Độ dài ", các anh hùng không xác định" và số dòng được tham chiếu là 49. Nếu chúng ta nhìn vào mã nguồn, Phần mã là đây:

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

Vì vậy, mã rơi vào ngay khi chúng tôi cố gắng truy cập một thuộc tính

document.addEventListener("DOMContentLoaded", function(event) { 
  alert('Hey')
});

document.addEventListener("DOMContentLoaded", function(event) { 
  alert('Hey')
});

let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.send();

let superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);

Nhưng điều này thất bại.

API giao diện điều khiển

Bạn có thể đã biết những gì sai với mã này, nhưng hãy khám phá nó thêm nữa để cho thấy cách bạn có thể điều tra điều này. Để bắt đầu, có một API bảng điều khiển cho phép mã JavaScript tương tác với bảng điều khiển JavaScript của trình duyệt. Nó có một số tính năng có sẵn, nhưng cái chính bạn thường sử dụng là

document.addEventListener("DOMContentLoaded", function(event) { 
  alert('Hey')
});

Thử chèn dòng sau ngay dưới dòng 31 (in đậm ở trên):

Làm mới trang trong trình duyệt và bạn sẽ nhận được đầu ra trong bảng điều khiển của "giá trị phản hồi:", cộng với cùng một thông báo lỗi mà chúng tôi đã thấy trước đó

Đầu ra

document.addEventListener("DOMContentLoaded", function(event) { 
  alert('Hey')
});

document.addEventListener("DOMContentLoaded", function(event) { 
  alert('Hey')
});

theo sau:

Tóm lại, bất cứ lúc nào một cái gì đó không hoạt động và một giá trị dường như không phải là ý nghĩa của nó tại một thời điểm nào đó trong mã của bạn, bạn có thể sử dụng

document.addEventListener("DOMContentLoaded", function(event) { 
  alert('Hey')
});

Sử dụng trình gỡ lỗi JavaScript

Thật không may, chúng tôi vẫn có cùng một lỗi - vấn đề đã không biến mất. Hãy điều tra điều này ngay bây giờ, sử dụng một tính năng tinh vi hơn của các công cụ phát triển trình duyệt: Trình gỡ lỗi JavaScript vì nó được gọi trong Firefox.

Trong Firefox, tab trình gỡ lỗi trông như sau:

• Ở bên trái, bạn có thể chọn tập lệnh bạn muốn gỡ lỗi (trong trường hợp này chúng tôi chỉ có một).
• Bảng điều khiển trung tâm hiển thị mã trong tập lệnh đã chọn.
• Bảng điều khiển bên phải hiển thị các chi tiết hữu ích liên quan đến môi trường hiện tại-điểm dừng, callstack và phạm vi hiện đang hoạt động.

Tính năng chính của các công cụ như vậy là khả năng thêm các điểm dừng vào mã - đây là những điểm thực hiện mã dừng và tại thời điểm đó, bạn có thể kiểm tra môi trường ở trạng thái hiện tại và xem những gì đang diễn ra.

Cùng bắt tay vào làm. Lỗi hiện đang được ném ở dòng 51. Nhấp vào dòng số 51 trong bảng điều khiển trung tâm để thêm điểm dừng vào nó (bạn sẽ thấy một mũi tên màu xanh xuất hiện trên đỉnh của nó). Bây giờ hãy làm mới trang (CMD/CTRL + R)-Trình duyệt sẽ tạm dừng việc thực thi mã tại dòng 51. Tại thời điểm này, phía bên phải sẽ cập nhật để hiển thị một số thông tin rất hữu ích.

• Trong các điểm dừng, bạn sẽ thấy các chi tiết của điểm dừng bạn đã đặt.
• Trong Call Stack, bạn sẽ thấy một vài mục - về cơ bản đây là danh sách các loạt các chức năng được gọi để khiến chức năng hiện tại được gọi. Ở trên cùng, chúng tôi có
  6 Hàm chúng tôi hiện đang ở và thứ hai chúng tôi có
  7, lưu trữ chức năng xử lý sự kiện có chứa cuộc gọi đến
  6.
• Theo phạm vi, bạn sẽ thấy phạm vi hiện đang hoạt động cho chức năng mà chúng ta đang xem xét. Chúng tôi chỉ có ba -
  9,

  alert('hey');
  

  0 và

  alert('hey');
  

  1 (phạm vi toàn cầu). Mỗi phạm vi có thể được mở rộng để hiển thị các giá trị của các biến bên trong phạm vi khi việc thực thi mã bị dừng.

Chúng tôi có thể tìm hiểu một số thông tin rất hữu ích ở đây.

1. Mở rộng phạm vi
   9 - Bạn có thể thấy từ đó biến anh hùng là

   alert('hey');
   

   3, cho thấy việc truy cập thuộc tính

   alert('hey');
   

   4 của

   document.addEventListener("DOMContentLoaded", function(event) { 
     alert('Hey')
   });
   

   7 (dòng đầu tiên của hàm) không hoạt động.
2. Bạn cũng có thể thấy rằng biến

   document.addEventListener("DOMContentLoaded", function(event) { 
     alert('Hey')
   });
   

   7 đang lưu trữ chuỗi văn bản, không phải là đối tượng JSON.
3. Khám phá thêm xuống ngăn xếp cuộc gọi, nhấp vào
   7 trong phần Call Stack. Chế độ xem sẽ cập nhật để hiển thị chức năng

   alert('hey');
   

   8 trong bảng điều khiển trung tâm và phạm vi của nó trong phần phạm vi.
4. Nếu bạn mở rộng phạm vi
   7, bạn sẽ thấy rằng biến
   1 cũng là một chuỗi văn bản, không phải là một đối tượng. Điều này giải quyết nó - cuộc gọi

   
   
   
   
   
   
   
   
       
   Blablabla
       
   
   
   

   1 của chúng tôi đang trả lại JSON dưới dạng văn bản, không phải JSON.

Chúng tôi muốn bạn tự mình khắc phục vấn đề này. Để cung cấp cho bạn một manh mối, bạn có thể nói rõ ràng đối tượng XMLHTTPrequest để trả về định dạng JSON hoặc chuyển đổi văn bản được trả về thành JSON sau khi phản hồi đến. Nếu bạn bị mắc kẹt, hãy tham khảo ví dụ Ajax.html cố định của chúng tôi.

Lưu ý: Tab trình gỡ lỗi có nhiều tính năng hữu ích khác mà chúng tôi chưa thảo luận ở đây, ví dụ như các điểm dừng có điều kiện và biểu thức xem. Để biết thêm thông tin, hãy xem trang trình gỡ lỗi. The debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. For a lot more information, see the Debugger page.

Vấn đề hiệu năng

Khi các ứng dụng của bạn trở nên phức tạp hơn và bạn bắt đầu sử dụng nhiều JavaScript hơn, bạn có thể bắt đầu gặp vấn đề về hiệu suất, đặc biệt là khi xem ứng dụng trên các thiết bị chậm hơn. Hiệu suất là một chủ đề lớn và chúng tôi không có thời gian để trang trải chi tiết ở đây. Một số mẹo nhanh như sau:

• Để tránh tải nhiều JavaScript hơn bạn cần, hãy gói các tập lệnh của bạn vào một tệp duy nhất bằng cách sử dụng một giải pháp như Browserify. Nói chung, việc giảm số lượng yêu cầu HTTP là rất tốt cho hiệu suất.
• Làm cho các tệp của bạn thậm chí còn nhỏ hơn bằng cách thu nhỏ chúng trước khi bạn tải chúng lên máy chủ sản xuất của bạn. Việc thu nhỏ các squash tất cả các mã với nhau trên một dòng đơn lớn, làm cho nó chiếm kích thước tệp ít hơn nhiều. Nó là xấu xí, nhưng bạn không cần phải đọc nó khi nó kết thúc! Điều này được thực hiện tốt nhất bằng cách sử dụng một công cụ thu nhỏ như UGLIFY (cũng có phiên bản trực tuyến - xem jscompress.com)
• Khi sử dụng API, hãy đảm bảo bạn tắt các tính năng API khi chúng không được sử dụng; Một số cuộc gọi API có thể thực sự tốn kém về sức mạnh xử lý. Ví dụ: khi hiển thị luồng video, hãy chắc chắn rằng nó đã tắt khi bạn không thể nhìn thấy nó. Khi theo dõi vị trí của thiết bị bằng cách sử dụng các cuộc gọi định vị địa lý lặp đi lặp lại, hãy đảm bảo bạn tắt nó khi người dùng ngừng sử dụng.
• Hoạt hình có thể thực sự tốn kém cho hiệu suất. Rất nhiều thư viện JavaScript cung cấp các khả năng hoạt hình được lập trình bởi JavaScript, nhưng hiệu quả hơn nhiều khi thực hiện các hoạt hình thông qua các tính năng trình duyệt gốc như hoạt hình CSS (hoặc API hoạt hình web non trẻ) so với JavaScript. Đọc hoạt hình của Brian Birtles như bạn không quan tâm đến Element. Một số lý thuyết thực sự hữu ích về lý do tại sao hoạt hình đắt tiền, các mẹo về cách cải thiện hiệu suất hoạt hình và thông tin trên API hoạt hình web.

Các vấn đề JavaScript trình duyệt chéo

Trong phần này, chúng tôi sẽ xem xét một số vấn đề JavaScript trình duyệt phổ biến hơn. Chúng tôi sẽ chia điều này thành:

• Sử dụng các tính năng JavaScript hiện đại
• Sử dụng các tính năng API web hiện đại
• Sử dụng mã đánh hơi trình duyệt xấu
• Vấn đề hiệu suất

Sử dụng các tính năng JavaScript/API hiện đại

Trong bài viết trước, chúng tôi đã mô tả một số cách mà các lỗi HTML và CSS và các tính năng không được công nhận có thể được xử lý do bản chất của các ngôn ngữ. Tuy nhiên, JavaScript không được phép như HTML và CSS - nếu động cơ JavaScript gặp lỗi hoặc cú pháp không được công nhận, thường xuyên hơn là không bị lỗi.

Có một số tính năng ngôn ngữ JavaScript hiện đại được xác định trong các phiên bản gần đây của thông số kỹ thuật sẽ không hoạt động trong các trình duyệt cũ hơn. Một số trong số này là đường cú pháp (về cơ bản là một cách dễ dàng hơn, đẹp hơn để viết những gì bạn đã có thể làm bằng cách sử dụng các tính năng hiện có) và một số cung cấp các khả năng mới thú vị.

Ví dụ:

• Lời hứa là một tính năng mới tuyệt vời để thực hiện các hoạt động không đồng bộ và đảm bảo các hoạt động đó đã hoàn thành trước khi mã dựa vào kết quả của chúng được sử dụng cho một thứ khác. Ví dụ, API tìm nạp (tương đương hiện đại với XMLHTTPREQUEST) sử dụng lời hứa để tìm nạp tài nguyên trên mạng và đảm bảo rằng phản hồi đã được trả về trước khi chúng được sử dụng (ví dụ: hiển thị hình ảnh bên trong phần tử

  
  
  
  
  
  
  
  
      
  Blablabla
      
  
  
  

  2). Chúng không được hỗ trợ trong IE nhưng được hỗ trợ trên tất cả các trình duyệt hiện đại.
• Các hàm mũi tên cung cấp một cú pháp ngắn hơn, thuận tiện hơn để viết các chức năng ẩn danh. Để biết ví dụ nhanh, hãy xem Arrow-Function.html (xem mã nguồn). Các hàm mũi tên được hỗ trợ trên tất cả các trình duyệt hiện đại, ngoại trừ IE.
• Tuyên bố chế độ nghiêm ngặt ở đầu mã JavaScript của bạn khiến nó được phân tích cú pháp với một bộ quy tắc chặt chẽ hơn, có nghĩa là nhiều cảnh báo và lỗi sẽ được đưa ra, và một số điều sẽ không được phép có thể chấp nhận được. Nó được cho là một ý tưởng tốt để sử dụng chế độ nghiêm ngặt, vì nó tạo ra mã tốt hơn, hiệu quả hơn, tuy nhiên nó có hỗ trợ hạn chế/chắp vá trên các trình duyệt (xem chế độ nghiêm ngặt trong trình duyệt).
• Các mảng được đánh máy cho phép mã JavaScript truy cập và thao tác dữ liệu nhị phân thô, điều này là cần thiết vì API trình duyệt ví dụ bắt đầu thao tác các luồng dữ liệu video và âm thanh thô. Chúng có sẵn trong IE10 trở lên, và tất cả các trình duyệt hiện đại.

Ngoài ra còn có nhiều API mới xuất hiện trong các trình duyệt gần đây, ví dụ như không hoạt động trong các trình duyệt cũ hơn:

• API lập chỉ mục, API lưu trữ web và các loại khác để lưu trữ dữ liệu trang web ở phía máy khách.
• API công nhân web để chạy JavaScript trong một luồng riêng biệt, giúp cải thiện hiệu suất.
• API WebGL cho đồ họa 3D thực.
• API âm thanh web cho thao tác âm thanh nâng cao.
• API WEBRTC cho kết nối nhiều người, kết nối video/âm thanh theo thời gian thực (ví dụ: hội nghị truyền hình).
• API WebVR cho Kỹ thuật Trải nghiệm thực tế ảo trong trình duyệt (ví dụ: kiểm soát chế độ xem 3D với đầu vào dữ liệu từ phần cứng VR)

Có một vài chiến lược để xử lý sự không tương thích giữa các trình duyệt liên quan đến hỗ trợ tính năng; Hãy khám phá những cái phổ biến nhất.

Lưu ý: Những chiến lược này không tồn tại trong các silo riêng biệt - tất nhiên bạn có thể kết hợp chúng khi cần thiết. Ví dụ: bạn có thể sử dụng phát hiện tính năng để xác định xem một tính năng có được hỗ trợ hay không; Nếu không, sau đó bạn có thể chạy mã để tải polyfill hoặc thư viện để xử lý việc thiếu hỗ trợ. These strategies do not exist in separate silos — you can, of course combine them as needed. For example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support.

Phát hiện tính năng

Ý tưởng đằng sau phát hiện tính năng là bạn có thể chạy thử nghiệm để xác định xem tính năng JavaScript có được hỗ trợ trong trình duyệt hiện tại hay không, sau đó chạy mã có điều kiện để cung cấp trải nghiệm chấp nhận được cả trong các trình duyệt và không hỗ trợ tính năng. Ví dụ nhanh, API định vị địa lý (hiển thị dữ liệu vị trí có sẵn cho thiết bị mà trình duyệt web đang chạy) có một điểm nhập chính để sử dụng - một thuộc tính

    
Blablabla
    

Bạn cũng có thể viết một thử nghiệm như vậy cho một tính năng CSS, ví dụ bằng cách kiểm tra sự tồn tại của phần tử.style.property (ví dụ:

    
Blablabla
    

Như một điểm cuối cùng, đừng nhầm lẫn phát hiện tính năng với trình duyệt đánh hơi (phát hiện trình duyệt cụ thể nào đang truy cập trang web) - đây là một thực tiễn khủng khiếp cần được khuyến khích bằng mọi giá. Xem bằng cách sử dụng mã đánh hơi trình duyệt xấu, sau này, để biết thêm chi tiết.browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See Using bad browser sniffing code, later on, for more details.

Lưu ý: Một số tính năng được biết là không thể phát hiện được - xem Danh sách không phát hiện của Modernizr. Some features are known to be undetectable — see Modernizr's list of Undetectables.

Lưu ý: Phát hiện tính năng sẽ được đề cập chi tiết hơn rất nhiều trong bài viết dành riêng của mình, sau này trong mô -đun. Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.

Thư viện

Các thư viện JavaScript về cơ bản là các đơn vị mã của bên thứ ba mà bạn có thể đính kèm vào trang của mình, cung cấp cho bạn nhiều chức năng làm sẵn có thể được sử dụng ngay lập tức, giúp bạn tiết kiệm rất nhiều thời gian trong quá trình. Rất nhiều thư viện JavaScript có thể ra đời vì nhà phát triển của họ đã viết một bộ các chức năng tiện ích chung để tiết kiệm thời gian cho họ khi viết các dự án trong tương lai và quyết định giải phóng chúng vào tự nhiên vì những người khác cũng có thể thấy chúng hữu ích.

Các thư viện JavaScript có xu hướng có một vài giống chính (một số thư viện sẽ phục vụ nhiều hơn một trong những mục đích này):

• Thư viện tiện ích: Cung cấp một loạt các chức năng để làm cho các nhiệm vụ trần tục dễ dàng và ít nhàm chán hơn để quản lý. Ví dụ, JQuery cung cấp các bộ chọn và thư viện thao tác DOM đầy đủ tính năng của riêng mình, để cho phép lựa chọn loại CSS-Selector của các phần tử trong JavaScript và Dom Building dễ dàng hơn. Bây giờ chúng ta không quá quan trọng, chúng ta có các tính năng hiện đại như ________ 65/________ 66/________ 67 Phương pháp có sẵn trên các trình duyệt, nhưng nó vẫn có thể hữu ích khi các trình duyệt cũ cần hỗ trợ.
• Thư viện tiện lợi: Làm cho những điều khó khăn hơn để làm hơn. Ví dụ, API WebGL thực sự phức tạp và thách thức khi bạn viết trực tiếp, vì vậy thư viện ba.js (và các loại khác) được xây dựng trên đầu WebGL và cung cấp API dễ dàng hơn nhiều để tạo các đối tượng 3D, ánh sáng, kết cấu phổ biến .
• Thư viện hiệu ứng: Các thư viện này được thiết kế để cho phép bạn dễ dàng thêm các hiệu ứng đặc biệt vào trang web của mình. Điều này hữu ích hơn khi "DHTML" là một từ thông dụng phổ biến và việc thực hiện một hiệu ứng liên quan đến rất nhiều JavaScript phức tạp, nhưng ngày nay các trình duyệt có rất nhiều tính năng CSS và API tích hợp để thực hiện các hiệu ứng dễ dàng hơn.
• Thư viện UI: Cung cấp các phương thức để triển khai các tính năng UI phức tạp, nếu không thì thách thức để thực hiện và có được trình duyệt chéo làm việc, ví dụ như Foundation, Bootstrap và Vật liệu-UI (sau này là một bộ thành phần để sử dụng với khung React). Chúng có xu hướng được sử dụng làm cơ sở của toàn bộ bố cục trang web; Thường rất khó để bỏ chúng chỉ trong một tính năng UI.
• Thư viện chuẩn hóa: Cung cấp cho bạn một cú pháp đơn giản cho phép bạn dễ dàng hoàn thành một nhiệm vụ mà không phải lo lắng về sự khác biệt của trình duyệt chéo. Thư viện sẽ thao tác với các API thích hợp trong nền để chức năng sẽ hoạt động bất cứ điều gì trình duyệt (theo lý thuyết). Ví dụ: LocalForage là thư viện lưu trữ dữ liệu phía máy khách, cung cấp một cú pháp đơn giản để lưu trữ và truy xuất dữ liệu. Trong nền, nó sử dụng API tốt nhất mà trình duyệt có sẵn để lưu trữ dữ liệu, cho dù đó là lập chỉ mục, lưu trữ web hoặc thậm chí SQL web (hiện không được dùng nữa, nhưng vẫn được hỗ trợ trong các trình duyệt dựa trên crom trong bối cảnh an toàn). Ví dụ khác, jQuery

Khi chọn thư viện để sử dụng, hãy đảm bảo rằng nó hoạt động trên tập hợp các trình duyệt bạn muốn hỗ trợ và kiểm tra triển khai của bạn một cách kỹ lưỡng. Cũng đảm bảo rằng thư viện là phổ biến và được hỗ trợ tốt, và không có khả năng trở nên lỗi thời vào tuần tới. Nói chuyện với các nhà phát triển khác để tìm hiểu những gì họ đề xuất, xem bao nhiêu hoạt động và bao nhiêu người đóng góp mà thư viện có trên GitHub (hoặc bất cứ nơi nào khác được lưu trữ), v.v.

Sử dụng thư viện ở cấp độ cơ bản có xu hướng bao gồm tải xuống các tệp của thư viện (JavaScript, có thể một số CSS hoặc các phụ thuộc khác cũng) và gắn chúng vào trang của bạn (ví dụ: thông qua phần tử

    
Blablabla
    

Lưu ý: Bạn cũng sẽ bắt gặp các khung JavaScript trong các chuyến đi của bạn trên web, như Ember và Angular. Trong khi các thư viện thường có thể sử dụng để giải quyết các vấn đề riêng lẻ và rơi vào các trang web hiện có, các khung có xu hướng nhiều hơn dọc theo các giải pháp hoàn chỉnh để phát triển các ứng dụng web phức tạp. You will also come across JavaScript frameworks in your travels around the Web, like Ember and Angular. Whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.

Polyfills

Polyfills cũng bao gồm các tệp JavaScript của bên thứ 3 mà bạn có thể ghé vào dự án của mình, nhưng chúng khác với các thư viện - trong khi các thư viện có xu hướng tăng cường chức năng hiện có và làm cho mọi thứ dễ dàng hơn, Polyfills cung cấp chức năng không tồn tại. Polyfills sử dụng JavaScript hoặc các công nghệ khác hoàn toàn để xây dựng hỗ trợ cho một tính năng mà trình duyệt không hỗ trợ bản thân. Ví dụ: bạn có thể sử dụng polyfill như ES6-Promise để thực hiện lời hứa hoạt động trong các trình duyệt nơi chúng không được hỗ trợ tự nhiên.

Danh sách của Modernizr về trình duyệt chéo HTML5 Polyfills là một nơi hữu ích để tìm polyfills cho các mục đích khác nhau. Một lần nữa, bạn nên nghiên cứu chúng trước khi sử dụng chúng - hãy chắc chắn rằng chúng hoạt động và được duy trì.

Hãy làm việc thông qua một bài tập - trong ví dụ này, chúng tôi sẽ sử dụng một polyfill tìm nạp để cung cấp hỗ trợ cho API tìm nạp trong các trình duyệt cũ hơn; Tuy nhiên, chúng tôi cũng cần sử dụng polyfill es6-promise, vì việc tìm nạp sử dụng nhiều lời hứa và các trình duyệt không hỗ trợ họ vẫn sẽ gặp rắc rối.

1. Để bắt đầu, hãy tạo một bản sao địa phương của ví dụ Fetch-Polyfill.html của chúng tôi và hình ảnh đẹp của chúng tôi về một số bông hoa trong một thư mục mới. Chúng tôi sẽ viết mã để lấy hình ảnh hoa và hiển thị nó trong trang.
2. Tiếp theo, lưu một bản sao của polyfill tìm nạp trong cùng thư mục với HTML.
3. Áp dụng các tập lệnh polyfill vào trang bằng mã sau - đặt chúng trên phần tử

   
   
   
   
   
   
   
   
       
   Blablabla
       
   
   
   

   8 hiện có để chúng có sẵn trên trang khi chúng tôi bắt đầu sử dụng Fetch (chúng tôi cũng đang tải Polyfill hứa hẹn từ CDN, như IE11 không Hỗ trợ hứa hẹn, mà tìm nạp yêu cầu):
   4

4. Bên trong

   
   
   
   
   
   
   
   
       
   Blablabla
       
   
   
   

   8 gốc, thêm mã sau:

5. 5

6. Nếu bạn tải nó trong một trình duyệt không hỗ trợ tìm nạp, bạn vẫn nên thấy hình ảnh hoa xuất hiện - mát mẻ!

Lưu ý: Một lần nữa, có nhiều cách khác nhau để sử dụng các polyfills khác nhau mà bạn sẽ gặp - tham khảo ý kiến ​​từng tài liệu cá nhân của từng Polyfill. Again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual documentation.

Một điều bạn có thể nghĩ là "Tại sao chúng ta nên luôn tải mã polyfill, ngay cả khi chúng ta không cần nó?" Đây là một điểm tốt-khi các trang web của bạn trở nên phức tạp hơn và bạn bắt đầu sử dụng nhiều thư viện, polyfills, v.v., bạn có thể bắt đầu tải thêm nhiều mã, có thể bắt đầu ảnh hưởng đến hiệu suất, đặc biệt là trên các thiết bị kém mạnh mẽ. Nó có ý nghĩa chỉ để tải các tập tin khi cần thiết.

Làm điều này đòi hỏi một số thiết lập bổ sung trong JavaScript của bạn. Bạn cần một số loại kiểm tra phát hiện tính năng để phát hiện xem trình duyệt có hỗ trợ tính năng mà chúng tôi đang cố gắng sử dụng không:

Vì vậy, trước tiên, chúng tôi chạy một điều kiện kiểm tra xem hàm

alert('Hey');

alert('Hey');

alert('Hey');

Ở đây chúng tôi đang kiểm tra xem hàm

alert('Hey');

alert('Hey');

alert('Hey');

alert('Hey');

alert('Hey');

Hàm này tạo ra một phần tử

    
Blablabla
    

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

alert('Hey');

Lưu ý rằng polyfills.js về cơ bản là hai polyfills chúng ta đang sử dụng được đặt cùng nhau vào một tệp. Chúng tôi đã thực hiện điều này theo cách thủ công, nhưng có những giải pháp thông minh hơn sẽ tự động tạo các gói cho bạn - xem Browserify (xem Bắt đầu với trình duyệt cho một hướng dẫn cơ bản). Đó là một ý tưởng tốt để gói các tệp JS thành một tệp như thế này - giảm số lượng yêu cầu HTTP bạn cần để cải thiện hiệu suất của trang web của bạn.

Bạn có thể thấy mã này trong hành động trong Fetch-polyfill chỉ có khi cần thiết.html (xem mã nguồn). Chúng tôi muốn làm rõ rằng chúng tôi không thể lấy tín dụng cho mã này - ban đầu nó được viết bởi Philip Walton. Kiểm tra bài viết của anh ấy chỉ tải polyfills khi cần thiết cho mã gốc, cộng với rất nhiều lời giải thích hữu ích xung quanh chủ đề rộng hơn).

Lưu ý: Có một số tùy chọn của bên thứ 3 để xem xét, ví dụ Polyfill.io-Đây là thư viện meta-polyfill sẽ xem xét các khả năng của từng trình duyệt và áp dụng polyfills khi cần thiết, tùy thuộc vào tính năng API và JS mà bạn đang sử dụng trong mã của mình . There are some 3rd party options to consider, for example Polyfill.io — this is a meta-polyfill library that will look at each browser's capabilities and apply polyfills as needed, depending on what APIs and JS features you are using in your code.

JavaScript transpiling

Một tùy chọn khác đang trở nên phổ biến cho những người muốn sử dụng các tính năng JavaScript hiện đại hiện đang chuyển đổi mã sử dụng các tính năng ECMAScript 6/ECMAScript 2015 thành phiên bản sẽ hoạt động trong các trình duyệt cũ.

Lưu ý: Điều này được gọi là "Transpiling" - bạn không biên dịch mã ở cấp độ thấp hơn để được chạy trên máy tính (như bạn sẽ nói với mã C); Thay vào đó, bạn đang thay đổi nó thành một cú pháp tồn tại ở mức độ trừu tượng tương tự để nó có thể được sử dụng theo cùng một cách, nhưng trong các trường hợp hơi khác nhau (trong trường hợp này, biến một hương vị của JavaScript thành một hương vị khác). This is called "transpiling" — you are not compiling code into a lower level to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).

Vì vậy, ví dụ, chúng tôi đã nói về các hàm mũi tên (xem mũi tên-function.html Live và xem mã nguồn) trước đó trong bài viết, chỉ hoạt động trong các trình duyệt mới nhất:

Chúng tôi có thể chuyển đổi điều này sang một chức năng ẩn danh lỗi thời truyền thống, vì vậy nó sẽ hoạt động trong các trình duyệt cũ hơn:

Công cụ được đề xuất cho JavaScript Transpiling hiện là Babel. Điều này cung cấp khả năng chuyển đổi cho các tính năng ngôn ngữ phù hợp để chuyển đổi. Đối với các tính năng không thể dễ dàng chuyển thành một tương đương cũ hơn, Babel cũng cung cấp polyfills để cung cấp hỗ trợ.

Cách dễ nhất để cho Babel thử là sử dụng phiên bản trực tuyến, cho phép bạn nhập mã nguồn của mình ở bên trái và xuất ra phiên bản truyền bên phải.

Lưu ý: Có nhiều cách để sử dụng Babel (người chạy nhiệm vụ, công cụ tự động hóa, v.v.), như bạn sẽ thấy trên trang thiết lập. There are many ways to use Babel (task runners, automation tools, etc.), as you'll see on the setup page.

Sử dụng mã đánh hơi trình duyệt xấu

Tất cả các trình duyệt đều có chuỗi tác nhân người dùng, xác định trình duyệt là gì (phiên bản, tên, hệ điều hành, v.v.) trong những ngày xấu khi mọi người sử dụng NetScape hoặc Internet Explorer, các nhà phát triển đã sử dụng để sử dụng cái gọi là mã đánh hơi trình duyệt Để phát hiện trình duyệt nào người dùng đang sử dụng và cung cấp cho họ mã phù hợp để hoạt động trên trình duyệt đó.user-agent string, which identifies what the browser is (version, name, OS, etc.) In the bad only days when pretty much everyone used Netscape or Internet Explorer, developers used to use so-called browser sniffing code to detect which browser the user was using, and give them appropriate code to work on that browser.

Mã được sử dụng để trông giống như thế này (mặc dù đây là một ví dụ đơn giản hóa):

Ý tưởng này khá tốt - phát hiện trình duyệt nào đang xem trang web và chạy mã khi thích hợp để đảm bảo trình duyệt sẽ có thể sử dụng trang web của bạn OK.

Lưu ý: Hãy thử mở bảng điều khiển JavaScript của bạn ngay bây giờ và chạy

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

Tuy nhiên, khi thời gian trôi qua, các nhà phát triển bắt đầu thấy những vấn đề lớn với phương pháp này. Để bắt đầu, mã dễ bị lỗi. Điều gì sẽ xảy ra nếu bạn biết một tính năng không hoạt động trong Say, Firefox 10 trở xuống, và thực hiện mã để phát hiện điều này, và sau đó Firefox 11 ra mắt - điều này đã hỗ trợ tính năng đó? Firefox 11 có thể sẽ không được hỗ trợ vì nó không phải là Firefox 10. Bạn phải thay đổi tất cả các mã đánh hơi thường xuyên.

Nhiều nhà phát triển đã triển khai mã đánh hơi trình duyệt xấu và không duy trì nó và các trình duyệt bắt đầu bị khóa khi sử dụng các trang web có chứa các tính năng mà họ đã thực hiện. Điều này trở nên phổ biến đến mức các trình duyệt bắt đầu nói dối về trình duyệt họ đã ở trong chuỗi tác nhân người dùng của họ (hoặc tuyên bố tất cả chúng đều là trình duyệt), để khắc phục mã. Trình duyệt cũng triển khai các cơ sở để cho phép người dùng thay đổi chuỗi tác nhân người dùng mà trình duyệt đã báo cáo khi được truy vấn với JavaScript. Tất cả điều này làm cho trình duyệt đánh hơi thậm chí còn dễ bị lỗi hơn, và cuối cùng là vô nghĩa.

Bài học cần học ở đây là - không bao giờ sử dụng trình duyệt đánh hơi. Trường hợp sử dụng thực sự duy nhất cho mã đánh hơi trình duyệt trong thời hiện đại là nếu bạn đang thực hiện sửa lỗi cho một lỗi trong phiên bản rất cụ thể của một trình duyệt cụ thể. Nhưng ngay cả sau đó, hầu hết các lỗi được cố định khá nhanh trong các chu kỳ phát hành nhanh của nhà cung cấp trình duyệt. Nó sẽ không xuất hiện rất thường xuyên. Phát hiện tính năng hầu như luôn luôn là một lựa chọn tốt hơn - nếu bạn phát hiện xem liệu tính năng có được hỗ trợ hay không, bạn sẽ không cần thay đổi mã của mình khi các phiên bản trình duyệt mới xuất hiện và các thử nghiệm đáng tin cậy hơn nhiều.

Nếu bạn bắt gặp trình duyệt đánh hơi khi tham gia một dự án hiện có, hãy xem liệu nó có thể được thay thế bằng một cái gì đó hợp lý hơn hay không. Trình duyệt đánh hơi gây ra tất cả các loại lỗi thú vị, như Bug & NBSP; 1308462.

Xử lý tiền tố JavaScript

Trong bài viết trước, chúng tôi đã bao gồm khá nhiều cuộc thảo luận về việc xử lý các tiền tố CSS. Chà, việc triển khai JavaScript mới đôi khi cũng sử dụng tiền tố, mặc dù JavaScript sử dụng trường hợp lạc đà thay vì gạch nối như CSS. Ví dụ: nếu tiền tố đang được sử dụng trên đối tượng API JSHINT mới có tên là

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

• Mozilla sẽ sử dụng

  function showHeroes(jsonObj) {
    let heroes = jsonObj['members'];
  
    for (const hero of heroes) {
      // …
     }
  
     // …
   }
  

  5
• Chrome/Opera/Safari sẽ sử dụng

  function showHeroes(jsonObj) {
    let heroes = jsonObj['members'];
  
    for (const hero of heroes) {
      // …
     }
  
     // …
   }
  

  6
• Microsoft sẽ sử dụng

  function showHeroes(jsonObj) {
    let heroes = jsonObj['members'];
  
    for (const hero of heroes) {
      // …
     }
  
     // …
   }
  

  7

Dưới đây là một ví dụ, được lấy từ bản demo bạo lực của chúng tôi (xem mã nguồn), sử dụng kết hợp API Canvas và API âm thanh web để tạo công cụ vẽ thú vị (và ồn ào):

Trong trường hợp của API âm thanh web, các điểm nhập chính là sử dụng API được hỗ trợ trong Chrome/Opera thông qua các phiên bản tiền tố

function showHeroes(jsonObj) {
  let heroes = jsonObj['members'];

  for (const hero of heroes) {
    // …
   }

   // …
 }

Sau đó, chúng tôi sử dụng đối tượng đó để thao tác API, chứ không phải là bản gốc. Trong trường hợp này, chúng tôi đang tạo một trình xây dựng audiocontext đã sửa đổi, sau đó tạo một thể hiện bối cảnh âm thanh mới để sử dụng cho mã hóa âm thanh web của chúng tôi.

Mẫu này có thể được áp dụng cho bất kỳ tính năng JavaScript có tiền tố nào. Thư viện JavaScript/Polyfills cũng sử dụng loại mã này, để trừu tượng trình duyệt khác biệt với nhà phát triển càng nhiều càng tốt.

Một lần nữa, các tính năng có tiền tố không bao giờ được sử dụng trong các trang web sản xuất - chúng có thể thay đổi hoặc loại bỏ mà không cần cảnh báo và gây ra các vấn đề về trình duyệt chéo. Nếu bạn khăng khăng sử dụng các tính năng có tiền tố, hãy đảm bảo bạn sử dụng đúng. Bạn có thể tìm kiếm những gì các trình duyệt yêu cầu tiền tố cho các tính năng JavaScript/API khác nhau trên các trang tham chiếu MDN và các trang web như Caniuse.com. Nếu bạn không chắc chắn, bạn cũng có thể tìm hiểu bằng cách thực hiện một số thử nghiệm trực tiếp trong các trình duyệt.

Ví dụ: hãy thử đi vào bảng điều khiển nhà phát triển của trình duyệt của bạn và bắt đầu gõ

Nếu tính năng này được hỗ trợ trong trình duyệt của bạn, nó sẽ tự động hoàn thành.

Tìm kiếm sự giúp đỡ

Có nhiều vấn đề khác mà bạn sẽ gặp phải với JavaScript; Điều quan trọng nhất cần biết thực sự là làm thế nào để tìm câu trả lời trực tuyến. Tham khảo phần trợ giúp tìm kiếm bài viết của HTML và CSS để được tư vấn tốt nhất.

Bản tóm tắt

Vì vậy, đó là JavaScript. Đơn giản hả? Có thể không đơn giản như vậy, nhưng bài viết này ít nhất nên cho bạn một khởi đầu và một số ý tưởng về cách giải quyết các vấn đề liên quan đến JavaScript mà bạn sẽ gặp.

• Trước
• Tổng quan: Kiểm tra trình duyệt chéo
• Tiếp theo

Trong mô -đun này