Что плохого в добавлении свойств к объектам DOM Element?

Question

Я искал прямой ответ на этот вопрос (я могу придумать множество вариантов, но мне хотелось бы узнать истинную причину):

jQuery предоставляет метод .data () для связи данных с объектами DOM Element. Что делает это необходимым? Существует ли проблема с добавлением свойств (или методов) непосредственно в объектные элементы DOM? Что это?

Answer 1

Есть ли проблема с добавлением свойств (или методов) непосредственно к объектам DOM Element?

Потенциально.

Нет веб-стандарта, который говорит, что вы можете добавлять произвольные свойства к узлам DOM. Они являются «хост-объектами» с реализациями, специфичными для браузера, а не «нативными объектами JavaScript», которые в соответствии с ECMA-262 позволяют делать то, что вам нравится. Другие объекты хоста не позволят вам добавлять произвольные свойства.

На самом деле, так как самые ранние браузеры позволяли вам это делать, это стандарт де-факто , который вы можете в любом случае ... если вы сознательно не скажете IE запретить его, установив document.expando= false. Вероятно, вы бы сами этого не делали, но если вы пишете сценарий для развертывания в другом месте, это может вас заинтересовать.

Практическая проблема с произвольными свойствами заключается в том, что вы не действительно знаете, что выбранное вами имя не имеет существующего значения в некоторых браузерах, которые вы еще не тестировали, или в будущей версии браузера или стандарта, который еще не существует. Добавьте свойство element.sausage= true, и вы не можете быть уверены, что ни один браузер нигде в пространстве и времени не будет использовать его в качестве сигнала для включения захватывающей функции DOM Sausage Make The Browser Crash. Поэтому, если вы добавляете произвольное свойство, убедитесь, что вы присвоили ему маловероятное имя, например element._mylibraryname_sausage= true. Это также помогает предотвратить конфликты пространства имен с другими компонентами сценария, которые могут добавлять произвольные свойства.

В IE есть еще одна проблема, заключающаяся в том, что добавленные вами свойства неправильно рассматриваются как атрибуты. Если вы сериализуете элемент с innerHTML, вы получите неожиданный атрибут в выводе, например. <p _mylibraryname_sausage="true">. Если вы затем назначите эту строку HTML другому элементу, вы получите свойство в новом элементе, что может привести к путанице в вашем скрипте.

(Обратите внимание, что это происходит только для свойств, значения которых являются простыми типами; объекты, массивы и функции не отображаются в сериализованном HTML. Я хотел бы, чтобы jQuery знал об этом, потому что это обходится для реализации метода data абсолютно ужасно, приводит к ошибкам и замедляет многие простые операции DOM.)

Answer 2

Я думаю, что вы можете добавить все свойства, которые вам нужны, при условии, что вы должны использовать их только сами, а свойство не является методом или каким-либо объектом, содержащим методы. Что не так с этим является то, что методы могут создавать утечки памяти в браузерах. Особенно, когда вы используете замыкания в таких методах, браузер может быть не в состоянии завершить очистку мусора, в результате чего отдельные области памяти остаются занятыми.

Эта ссылка хорошо объясняет это.

здесь вы найдете описание нескольких распространенных шаблонов утечки памяти

Answer 3

Это связано с тем, что DOM в IE не управляется JScript, что делает его совершенно другой средой для доступа. Это приводит к утечкам памяти http://www.crockford.com/javascript/memory/leak.html. Другая причина заключается в том, что когда люди используют innerHTML для копирования узлов, все эти добавленные свойства не передаются.