Thực tiễn không tốt để thêm thuộc tính vào nút DOM?

Question

JavaScript cho phép bạn thêm các thuộc tính và phương thức tùy ý vào bất kỳ đối tượng nào, bao gồm các nút DOM. Giả sử tài sản cũng được đặt tên không chính xác (giống như _myLib_propertyName) để nó có thể không tạo ra xung đột, có bất kỳ lý do chính đáng nào để không lưu trữ dữ liệu trong các nút DOM không?

Có trường hợp sử dụng tốt nào để làm như vậy không? Tôi tưởng tượng làm điều này thường xuyên có thể đóng góp vào một kiểu mã hay mã hóa khó hiểu hoặc phản trực giác, nhưng có vẻ như cũng có lúc các thuộc tính "tùy chỉnh" vào các nút DOM sẽ hiệu quả và tiện lợi kỹ thuật.

Answer 1

Tôi nghĩ nhiều hơn bất cứ điều gì, lý do tốt nhất để lưu trữ dữ liệu trong DOM là vì DOM có nghĩa là đại diện cho cấu trúc nội dung và kiểu dáng cho trang HTML. Trong khi bạn chắc chắn có thể thêm dữ liệu vào các nút theo cách được đặt tên tốt như để tránh xung đột, bạn đang giới thiệu trạng thái dữ liệu vào biểu diễn trực quan.

Tôi đang cố gắng tìm một ví dụ về hoặc chống lại việc lưu trữ dữ liệu trong DOM và gãi đầu để tìm một trường hợp thuyết phục. Trong quá khứ, tôi đã thấy rằng việc tách trạng thái dữ liệu khỏi trạng thái trực quan đã lưu lại sự đau đầu trong quá trình thiết kế lại các trang web mà tôi đã làm việc.

Answer 2

Nếu bạn xem HTML 5, có thuộc tính dữ liệu cho các trường sẽ cho phép bạn lưu trữ thông tin cho trường.

Answer 3

Đừng ngạc nhiên khi gặp rắc rối với IE 6 & 7. Chúng rất không nhất quán với setAttribute vs được đặt làm thuộc tính.

Và nếu bạn không cẩn thận, bạn có thể đặt tham chiếu vòng tròn và tự rò rỉ bộ nhớ.

http://www.ibm.com/developerworks/web/library/wa-memleak/

tôi luôn đặt thuộc tính nút như một phương sách cuối cùng, và khi tôi làm tôi hết sức cẩn thận với mã của tôi và thử nghiệm nhiều hơn bình thường.

Answer 4

Không, thường là ý tưởng tồi để lưu trữ thuộc tính của riêng bạn trên các nút DOM.

• Nút DOM là đối tượng lưu trữ và đối tượng lưu trữ có thể làm những gì họ thích. Cụ thể, không có yêu cầu trong thông số ECMAScript cho các đối tượng lưu trữ để cho phép loại mở rộng này, do đó các trình duyệt không bắt buộc phải cho phép nó. Cụ thể, các trình duyệt mới có thể chọn không và mã hiện tại dựa vào nó sẽ bị hỏng.
• Không phải tất cả các đối tượng lưu trữ trong trình duyệt hiện tại đều cho phép. Ví dụ, các nút văn bản và tất cả các đối tượng ActiveX (chẳng hạn như các đối tượng XMLHttpRequest và XMLDOM, được sử dụng để phân tích cú pháp XML) trong IE thì không, và hành vi lỗi thay đổi từ việc ném lỗi đến lỗi im lặng.
• Trong IE, khả năng thêm thuộc tính có thể được tắt cho toàn bộ tài liệu, bao gồm tất cả các nút trong tài liệu, với dòng document.expando = false;. Do đó, nếu bất kỳ mã nào trong trang của bạn bao gồm dòng này, tất cả mã dựa vào việc thêm các thuộc tính vào các nút DOM sẽ thất bại.