Стоит ли в JavaScript использовать для хранения данных объект элемента вместо объявления переменных?

Question

[Тарас Сереванн]

Допустим, есть такой скрипт, который что-то делает с элементом на странице:

(function() {

var el = document.geElementById('id');
var elSomedata = '13px';

function doSomethingWithEl(el) {
    // magic
} 

})();

Стоит ли его переписать расширяя элемент вместо объявления функций/переменных?

(function() {

var el = document.getElementById('id');
el.someData = '13px';

el.doSomething = function() {
    // magic
}

})():

Так код выглядит более красиво и читаемо.

Answer 1

[Дмитрий Беляев]

Не стоит

Comments

[k-2]

а что произойдет, если использовать DOM для хранения данных?

[Дмитрий Беляев]

k-2: во-первых dom медленный, во-вторых Вы никогда не сможете гарантировать, что свойство, которое Вы используете никогда не войдет в стандарт, а это черевато конфликтами

[k-2]

Дмитрий Беляев а как Вы организуете код на js frontend? вот javascript.ru/optimize/antimvc предлагалось использовать DOM в качестве модели. Хотя это как Вы пишите плохая практика.
Как по Вашему лучше строить архитектуру? Что думаете о Модуль-Фасад-Медиатор? Или готовыми фреймворками пользуетесь?

[Дмитрий Беляев]

k-2: common.js модули + webpack, модули разделены по функциональности
если важна скорость (а она важна), то работа с dom нативная (jQuery, angular, react в топку), элементы ищутся один раз при старте, оптимальным способом, изменение dom сведены к минимуму по возможности (например смена css классов вместо изменения отдельных свойств, вставка новых элементов пачкой)

[k-2]

Дмитрий Беляев Спасибо

Answer 2

[DenJel]

Если только так :) Но это бред, но так вы хотя бы не трогаете экземпляры классов, которые не вы создали. Сверху навешиваете на прототипы getter'ы и setter'ы на someData. Если уж вы любите извращения, то хотя бы так)))

function MyObject ( el ) {
    this.el = el;
    this.someData = false;
}

MyObject.prototype = {
     constructor: MyObject
}

MyObject.prototype.doSmth = function (){}


var MyElement = new MyObject ( document.getElementById('id') )

Comments

[Тарас Сереванн]

Это не те извращения, которые я люблю, но спасибо ))