ID phần tử được đặt tên có thể được tham chiếu như JavaScript Globals

var el = querySelector("#cool");

  
    window.foo = "bar";
  


  
I won't override window.foo
  
    console.log(window.foo); // Prints "bar"
  

I will be overridden :(

  window.foo = "bar";
  console.log(window.foo); // Prints "bar"

, nếu không sẽ tạo ra xung đột bằng cách làm mất hiệu lực của alert API. Kỹ thuật bảo vệ này rất có thể là lý do tại sao bạn - nếu bạn giống tôi - lần đầu tiên học về điều này.

Trường hợp chống lại các quả cầu được đặt tên

Trước đó, tôi đã nói rằng việc sử dụng các phần tử được đặt tên chung làm tham chiếu có thể không phải là ý tưởng tuyệt vời nhất. Có rất nhiều lý do cho điều đó, TJ VanToll đã trình bày một cách tuyệt vời trên blog của anh ấy và tôi sẽ tóm tắt ở đây:

• Nếu DOM thay đổi, thì tham chiếu cũng vậy. Điều đó làm cho một số thực sự "giòn" (thuật ngữ của thông số kỹ thuật đối với nó) mã trong đó mối quan tâm tách biệt giữa HTML và JavaScript có thể là quá nhiều.
• Tham chiếu tình cờ là quá dễ dàng. Một lỗi đánh máy đơn giản rất có thể kết thúc tham chiếu đến một toàn cầu được đặt tên và mang lại cho bạn kết quả bất ngờ.
• Nó được triển khai khác nhau trong các trình duyệt. Ví dụ: chúng ta có thể truy cập vào một mỏ neo với id - ví dụ - nhưng một số trình duyệt (cụ thể là Safari và Firefox) trả về ReferenceError trong bảng điều khiển.
• Nó có thể không trả lại những gì bạn nghĩ. Theo thông số kỹ thuật, khi có nhiều trường hợp của cùng một phần tử được đặt tên trong DOM - giả sử, hai trường hợp của

  - trình duyệt sẽ trả về một HTMLCollection với một mảng các trường hợp. Tuy nhiên, Firefox chỉ trả về phiên bản đầu tiên. Sau đó một lần nữa, thông số kỹ thuật nói chúng ta nên sử dụng một trường hợp của một id trong cây của một phần tử nào đó. Nhưng làm như vậy sẽ không ngăn một trang hoạt động hoặc bất cứ điều gì tương tự.

• Có thể có một chi phí hiệu suất? Ý tôi là, trình duyệt phải tạo danh sách các tham chiếu đó và duy trì nó. Một vài người đã chạy thử nghiệm trong chuỗi StackOverflow này, nơi các quả cầu được đặt tên thực sự là hiệu quả hơn trong một bài kiểm tra và kém hiệu quả hơn trong một thử nghiệm gần đây hơn.

Xem xét bổ sung

Giả sử chúng tôi loại bỏ những lời chỉ trích chống lại việc sử dụng các hình cầu được đặt tên và vẫn sử dụng chúng. Tất cả đều tốt. Nhưng có một số điều bạn có thể muốn cân nhắc khi làm.

polyfill

Nghe có vẻ như là edge-case-y, các loại kiểm tra toàn cục này là một yêu cầu thiết lập điển hình cho polyfills. Kiểm tra ví dụ sau, nơi chúng tôi đặt cookie bằng cách sử dụng CookieStore API, polyfilling nó trên các trình duyệt chưa hỗ trợ nó:

  
  
    // Polyfill the CookieStore API if not yet implemented.
    // https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
    if (!window.cookieStore) {
      window.cookieStore = myCookieStorePolyfill;
    }
    cookieStore.set("foo", "bar");
  

Mã này hoạt động hoàn toàn tốt trong Chrome, nhưng gây ra lỗi sau trong Safari:

TypeError: cookieStore.set is not a function

Safari thiếu hỗ trợ cho CookieStore API kể từ khi viết bài này. Do đó, polyfill không được áp dụng vì img ID phần tử tạo ra một biến toàn cục xung đột với cookieStore toàn cầu

Cập nhật API JavaScript

Chúng tôi có thể lật ngược tình huống và tìm ra một vấn đề khác trong đó các bản cập nhật cho công cụ JavaScript của trình duyệt có thể phá vỡ các tham chiếu chung của phần tử được đặt tên.

Ví dụ:

  
  
    window.BarcodeDetector.focus();
  

Tập lệnh đó lấy một tham chiếu đến phần tử đầu vào và gọi focus() trên đó. Nó hoạt động chính xác. Tuy nhiên, chúng tôi không biết làm thế nào Dài nó sẽ tiếp tục hoạt động.

Bạn thấy đấy, biến toàn cục mà chúng tôi đang sử dụng để tham chiếu đến phần tử đầu vào sẽ ngừng hoạt động ngay khi các trình duyệt bắt đầu hỗ trợ BarcodeDetector API. Tại thời điểm đó, window.BarcodeDetector toàn cầu sẽ không còn là tham chiếu đến phần tử đầu vào và .focus() sẽ ném một “window.BarcodeDetector.focus không phải là một chức năng ”lỗi.

Phần thưởng: Không phải tất cả các phần tử được đặt tên đều tạo ra các tham chiếu toàn cầu

Bạn muốn nghe điều gì đó vui nhộn? Để tăng thêm sự xúc phạm cho thương tích, các phần tử được đặt tên chỉ có thể truy cập được dưới dạng biến toàn cục nếu tên không chứa gì ngoài chữ cái. Trình duyệt sẽ không tạo tham chiếu toàn cục cho một phần tử có ID chứa các ký tự và số đặc biệt, như hello-world và item1.

Kết luận

Hãy tóm tắt cách chúng tôi đến đây:

• Tất cả các trình duyệt chính đều tự động tạo các tham chiếu chung đến từng phần tử DOM với id (hoặc, trong một số trường hợp, name thuộc tính).
• Việc truy cập các phần tử này thông qua các tham chiếu toàn cầu của chúng là không đáng tin cậy và có khả năng nguy hiểm. Sử dụng querySelector or getElementById thay thế.
• Vì các tham chiếu chung được tạo tự động, chúng có thể có một số tác dụng phụ đối với mã của bạn. Đó là lý do chính đáng để tránh sử dụng id thuộc tính trừ khi bạn thực sự cần nó.

Vào cuối ngày, có lẽ bạn nên tránh sử dụng các hình cầu có tên trong JavaScript. Tôi đã trích dẫn thông số kỹ thuật trước đó về cách nó dẫn đến mã "giòn", nhưng đây là toàn bộ văn bản để hướng điểm về nhà:

Theo nguyên tắc chung, dựa vào điều này sẽ dẫn đến mã giòn. Những ID nào kết thúc ánh xạ tới API này có thể thay đổi theo thời gian, chẳng hạn như các tính năng mới được thêm vào nền tảng web. Thay vì điều này, hãy sử dụng document.getElementById() or document.querySelector().

Tôi nghĩ rằng bản thân thông số kỹ thuật HTML khuyến nghị tránh xa tính năng này đã tự nói lên điều đó.