Я искал прямой ответ для этого (я могу думать о множестве возможностей, но я хотел бы знать истинную причину):
jQuery предоставляет метод .data() для связывания данных с объектами DOM Element. Что делает это необходимым? Есть ли проблема с добавлением свойств (или методов) непосредственно к объектам DOM Element? Что это?
Есть ли проблема с добавлением свойств (или методов) непосредственно к объектам DOM Element Objects?
Потенциально.
Нет веб-стандарта, в котором говорится, что вы можете добавлять произвольные свойства к узлам DOM. Это "объекты-хосты с реалиями, специфичными для браузера", а не "собственные JavaScript-объекты", которые, согласно ECMA-262, могут делать то, что вам нравится. Другие объекты хоста не позволят вам добавлять произвольные свойства.
На самом деле, поскольку самые ранние браузеры позволяли вам это делать, это стандарт де-факто, который вы можете в любом случае... если вы не намеренно скажете IE, чтобы запретить его, установив document.expando= false. Вы, вероятно, не сделали бы этого самостоятельно, но если вы пишете script для развертывания в другом месте, это может вас затронуть.
Существует практическая проблема с произвольными свойствами в том, что вы действительно не знаете, что произвольное имя, которое вы выбрали, не имеет существующего значения в каком-либо браузере, который вы еще не тестировали, или в будущей версии браузер или стандарт, который еще не существует. Добавьте свойство element.sausage= true, и вы не можете быть уверены, что ни один браузер в любом месте в пространстве и времени не будет использовать это в качестве сигнала, чтобы задействовать захватывающий DOM Sausage Make The Browser Crash. Поэтому, если вы добавляете произвольное свойство, удостоверьтесь, что это маловероятное имя, например element._mylibraryname_sausage= true. Это также помогает предотвратить конфликты пространства имен с другими компонентами script, которые могут добавить произвольные свойства.
В IE есть еще одна проблема в том, что добавленные вами свойства неправильно обрабатываются как атрибуты. Если вы сериализуете элемент с помощью innerHTML, вы получите неожиданный атрибут на выходе, например. <p _mylibraryname_sausage="true">. Если вы затем присвоите эту строку HTML другому элементу, вы получите свойство в новом элементе, потенциально запутав ваш script.
(Обратите внимание, что это происходит только для свойств, значения которых являются простыми типами: объекты, массивы и функции не отображаются в сериализованном HTML. Я хочу, чтобы jQuery знал об этом, потому что он работает вокруг него для реализации метода data абсолютно ужасен, приводит к ошибкам и замедляет многие простые операции DOM.)
Я думаю, вы можете добавить все свойства, которые хотите, до тех пор, пока вы должны использовать их самостоятельно, а свойство не является методом или каким-то объектом, содержащим методы. Что не так, так это то, что методы могут создавать утечки памяти в браузерах. Особенно, когда вы используете закрывает в таких методах, браузер не сможет завершить очистку мусора, из-за чего разбросанные пространства памяти остаются занятыми.
Эта ссылка объясняет это красиво.
здесь вы найдете описание нескольких распространенных шаблонов утечки памяти
Это связано с тем, что DOM в IE не управляется JScript, что делает его совершенно другой средой для доступа. Это приводит к утечке памяти http://www.crockford.com/javascript/memory/leak.html. Другая причина заключается в том, что, когда люди используют innerHTML для копирования узлов, все эти добавленные свойства не передаются.