Sử dụng biến trong id HTML

Chào bạn. Tôi là Avic Ndugu

Tôi đã xuất bản hơn 100 bài đăng trên blog về HTML, CSS, Javascript, React và các chủ đề liên quan khác. Khi tôi không viết, tôi thích đọc sách, đi bộ đường dài và nghe podcast

Bạn có biết rằng các phần tử DOM có ID có thể truy cập được trong JavaScript dưới dạng các biến toàn cục không?

Nếu đây là lần đầu tiên bạn nghe về nó, hãy chuẩn bị tinh thần. Chúng ta có thể thấy nó hoạt động đơn giản bằng cách thêm ID vào một phần tử trong HTML

// Output: "Something else"

Thông thường, chúng tôi sẽ xác định một biến mới bằng cách sử dụng

var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";

var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";

// Output: "Something else"

Nhưng chúng tôi thực sự đã có quyền truy cập vào

var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";

Dự phòng nhúng CodePen

Vì vậy, bất kỳ thuộc tính

// Output: "Something else"

// Output: "Something else"

// Output: "Something else"

Như bạn có thể đoán, truy cập phạm vi toàn cầu với các tham chiếu được đặt tên không phải là ý tưởng hay nhất. Một số người đã gọi đây là “kẻ gây ô nhiễm phạm vi toàn cầu. ” Chúng ta sẽ tìm hiểu lý do tại sao lại như vậy, nhưng trước tiên…

Một số bối cảnh

Cách tiếp cận này được phác thảo trong đặc tả HTML, nơi nó được mô tả là “quyền truy cập được đặt tên trên đối tượng

// Output: "Something else"

Internet Explorer là người đầu tiên triển khai tính năng này. Tất cả các trình duyệt khác cũng đã thêm nó. Gecko là trình duyệt duy nhất vào thời điểm đó không hỗ trợ nó trực tiếp ở chế độ tiêu chuẩn, thay vào đó chọn biến nó thành một tính năng thử nghiệm. Đã có sự do dự khi triển khai nó, nhưng nó đã tiến lên nhờ khả năng tương thích với trình duyệt (Gecko thậm chí đã cố thuyết phục WebKit chuyển nó ra khỏi chế độ tiêu chuẩn) và cuối cùng đã chuyển sang chế độ tiêu chuẩn trong Firefox 14

Một điều có thể không được biết rõ là các trình duyệt phải đưa ra một số biện pháp phòng ngừa — với mức độ thành công khác nhau — để đảm bảo các toàn cầu được tạo không phá vỡ trang web. Một biện pháp như vậy là…

bóng biến

Có lẽ phần thú vị nhất của tính năng này là các tham chiếu phần tử được đặt tên không che khuất các biến toàn cục hiện có. Vì vậy, nếu một phần tử DOM có

// Output: "Something else"

// Output: "Something else"

Và điều ngược lại cũng đúng

// Output: "Something else"

Hành vi này là cần thiết vì nó vô hiệu hóa các ghi đè nguy hiểm chẳng hạn như

// Output: "Something else"

// Output: "Something else"

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

Trước đó, tôi đã nói rằng 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 hay nhất. Có rất nhiều lý do cho điều đó, mà TJ VanToll đã trình bày rất hay 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ố mã thực sự "dễ gãy" (thuật ngữ của thông số kỹ thuật dành cho nó) trong đó sự tách biệt giữa các mối quan tâm giữa HTML và JavaScript có thể là quá nhiều
• Tài liệu tham khảo tình cờ là quá dễ dàng. Một lỗi đánh máy đơn giản rất có thể dẫn đến việc tham chiếu đến một toàn cầu được đặt tên và cho bạn kết quả không mong muốn
• Nó được triển khai khác nhau trong các trình duyệt. Ví dụ: chúng ta sẽ có thể truy cập một mỏ neo bằng một

  
  
  
  // Output: "Something else"

  10 — e. g.

  
  
  
  // Output: "Something else"

  18 — nhưng một số trình duyệt (cụ thể là Safari và Firefox) trả về một

  
  
  
  // Output: "Something else"

  19 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 phiên bản của cùng một phần tử được đặt tên trong DOM - giả sử, hai phiên bản của

  
  
  
  // Output: "Something else"

  70 - trình duyệt sẽ trả về một

  
  
  
  // Output: "Something else"

  71 với một mảng các phiên bản. 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 rằng dù sao thì chúng ta cũng nên sử dụng một phiên bản của

  
  
  
  // Output: "Something else"

  10 trong cây của một phần tử. Nhưng làm như vậy sẽ không ngăn một trang hoạt động hoặc bất cứ thứ gì tương tự
• Có lẽ có một chi phí hiệu suất? . Một số người đã chạy thử nghiệm trong luồng StackOverflow này, trong đó các toàn cầu được đặt tên thực sự hiệu quả hơn trong một thử nghiệm và kém hiệu quả hơn trong một thử nghiệm gần đây hơn

cân nhắc bổ sung

Giả sử chúng ta bỏ qua những lời chỉ trích chống lại việc sử dụng tên toàn cầu 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 xem xét khi bạn làm

polyfill

Nghe có vẻ như edge-case-y, các loại kiểm tra toàn cầu này là yêu cầu thiết lập điển hình đối với polyfill. Hãy xem ví dụ sau, nơi chúng tôi đặt cookie bằng cách sử dụng API

// Output: "Something else"

Content is loading ...

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

Content is loading ...

Safari thiếu hỗ trợ cho API

// Output: "Something else"

// Output: "Something else"

// Output: "Something else"

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ụ

Content is loading ...

Tập lệnh đó lấy một tham chiếu đến phần tử đầu vào và gọi

// Output: "Something else"

Bạn thấy đấy, biến toàn cục mà chúng ta đang sử dụng để tham chiếu 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ợ API

// Output: "Something else"

// Output: "Something else"

// Output: "Something else"

// Output: "Something else"

Phần 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 tự động tạo các tham chiếu toàn cầu cho từng thành phần DOM bằng một thuộc tính

  
  
  
  // Output: "Something else"

  10 (hoặc, trong một số trường hợp, thuộc tính

  
  
  
  // Output: "Something else"

  11)
• 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 gây nguy hiểm. Sử dụng

  
  
  
  // Output: "Something else"

  84 hoặc

  
  
  
  // Output: "Something else"

  85 để thay thế
• Vì các tham chiếu chung được tạo tự động nên 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 thuộc tính

  
  
  
  // Output: "Something else"

  10 trừ khi bạn thực sự cần nó

Vào cuối ngày, có lẽ nên tránh sử dụng tên toàn cầu được đặt 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ã "dễ gãy", nhưng đây là toàn bộ văn bản để đưa điểm chính về nhà

Theo nguyên tắc chung, dựa vào điều này sẽ dẫn đến mã dễ gãy. 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

// Output: "Something else"

87 hoặc

// Output: "Something else"

88

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

Làm cách nào để sử dụng biến làm id trong HTML?

ID có thể là một biến không?

Bạn có thể sử dụng các biến trong HTML không?

Bạn có thể cung cấp ID cho div không?