5
Tôi có một tiện ích JavaScript (một đoạn mã JS và HTML nhúng) được nhúng trên các trang web khác. Tôi nên làm gì để đảm bảo rằng tên biến của nó không đụng độ với các biến trang lưu trữ?Cách tránh các xung đột tên trong các tiện ích JavaScript
Tôi muốn tiện ích này được "inlined" có nghĩa là trên cùng một trang với trang lưu trữ, không trong iframe, cách tốt nhất để tránh xung đột tên với trang lưu trữ hoặc xung đột với các tiện ích con khác là gì?
Tên cuộc đụng độ có thể xảy ra bằng nhiều cách:
- Javascript tên biến
- Javascript tên hàm
- phần tử DOM định danh tên lớp
- CSS
- có thể nhiều hơn ...
Tôi có thể nghĩ ra một số cách để oid tên cuộc đụng độ, nhưng tôi đã tự hỏi nếu có một thực hành tốt nhất hoặc khuyến nghị chung khác. Vì vậy, đây là số 2c của tôi:
- Chỉ cần sử dụng tên dài và cố gắng độc nhất. Đó là xấu xí và không đầy đủ, nhưng là đơn giản trong khái niệm.
- Sử dụng iframe. Nhưng như đã đề cập, tôi không muốn sử dụng iframe vì nhiều lý do. Tôi muốn các widget để kế thừa các thuộc tính phong cách từ trang (chẳng hạn như phông chữ mặc định và màu nền) và quan trọng nhất, tôi không biết làm thế nào lớn các widget là có được. Nó phụ thuộc vào dữ liệu thời gian thực và có thể có kích thước bất kỳ.
- Sử dụng các chức năng ẩn danh để có phạm vi tốt hơn, ví dụ: (function() {my code here})(). Giải pháp này, trong khi thanh lịch, vẫn không hoạt động cho tôi b/c đầu tiên, nó chỉ giải quyết tên JS bị đụng độ nhưng không phải tên DOM hoặc tên lớp CSS và thứ hai, tôi cũng sử dụng jsonp mà tôi cần cung cấp chức năng gọi lại tên, mà cuối cùng cần phải được trong phạm vi toàn cầu, do đó, nó không thể được lồng trong phạm vi chức năng ẩn danh.
- Tạo cơ chế vùng tên trong JavaScript sẽ cung cấp tính duy nhất của các biến và hàm JS. Một cái gì đó của cửa sổ kiểu ['my_app'] [variable_name] hoặc window ['my_app'] function_name. Đó là một chút xấu xí là tốt, nhưng ít nhất tôi có quyền kiểm soát không gian tên và có thể tạo ra đảm bảo là không gian tên duy nhất.