Is it worth to use JavaScript to store the data element object instead of declaring variables?

Suppose you have a script that does something with the element on the page:

(function() {

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

doSomethingWithEl function(el) {
 // magic
} 

})();


Is it worth it to rewrite the expanding element instead of declaring functions/variables?

(function() {

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

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

})():


So the code looks more beautiful and readable.
July 9th 19 at 13:01
2 answers
July 9th 19 at 13:03
Solution
Not worth it
what happens if you use DOM storage? - Clementine.Beatty85 commented on July 9th 19 at 13:06
: first dom is slow, secondly You can never guarantee that the property You use will never be included in the standard, but it cherevato conflicts - geovanni_Hegmann commented on July 9th 19 at 13:09
and how do You organize the code on the js frontend? here javascript.ru/optimize/antimvc it was proposed to use the DOM as a model. Although this is how You write a bad practice.
How do you think it is better to build an architecture? What do you think about the Module-Facade-Mediator? Or ready-made frameworks you use? - Clementine.Beatty85 commented on July 9th 19 at 13:12
: common.js modules + webpack, modules separated by functionality
if speed is important (and it is important), then work with the dom native (jQuery, angular, react in the furnace), the elements are looked up once at the start, the best way, modifying the dom is reduced to the minimum possible (for example to change css class instead of changing individual properties, insert new elements in a pack) - geovanni_Hegmann commented on July 9th 19 at 13:15
Thank you - Clementine.Beatty85 commented on July 9th 19 at 13:18
July 9th 19 at 13:05
Solution
If the only way :) But this is crazy, but at least you do not touch the instances of classes that you have created. Top hung on prototypes getter's and setters for someData. If you love perversion, then at least so)))

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

MyObject.prototype = {
 constructor: MyObject,
}

MyObject.prototype.doSmth = function (){}


var MyElement = new MyObject ( document.getElementById('id') )
It is not the perversion, which I love, but thank you )) - Clementine.Beatty85 commented on July 9th 19 at 13:08

Find more questions by tags JavaScriptHTML