Store info i element, a good practice? [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

Say i have a list of movies where i with Javascript and Jquery can change the movies' title, rating and cost through html controls. The original values for these variables will be given when the page is loaded. As of now, I load the data into elements like this:

    <div class="movie0" data-rating="320" data-name="Movie-Name No. 1" data-cost="26>
            <img src="movie1.png"/>
    </div>
    <div class="movie1" data-rating="110" data-name="Movie-Name No. 2" data-cost="18">
            <img src="movie2.png"/>
    </div>
    <div class="movie2" data-rating="315" data-name="Movie-Name No. 3" data-cost="25">
            <img src="movie3.png"/>
    </div>

The html controls change the data using the JQuery's .data() function.

Now to the question. Would it be better to load the information into a JSON object and then use the ID (or a data attribute) to relate to an index in the JSON object. Instead of the Html controls changing the elements, they would change the index in the JSON object corresponding to the element. What is better? Would the right method differ if I only had the rating variable to care about?

EDIT: I am asking this question because I have read and heard that storing and changing information in the DOM is inefficient.

Answer 1

There is no "right" answer here.

The advantages of using meta data on the HTML objects are:

1. The data can be maintained by a non-developer by simply modifying the attributes on the HTML.
2. Items can be added, removed or edited by a non-developer just by changing the HTML.
3. An individual movie item is self describing all in one place. You don't have to double maintain both HTML and corresponding code.

The advantages to using a pre-built javascript object are:

1. Potentially Faster performance (though it is unclear if the performance difference here would be noticable).
2. Modifying data from javascript code might be simpler in a javascript object.

I don't know what exactly you've heard about "storing and changing information in the DOM is inefficient". It really depends entirely upon what you're doing and what type of data you're changing and how much the performance matters in any way. It is absolutely slow to modify the DOM in such a way that causes a relayout and repaint. But, reading a piece of meta data off an HTML object in the DOM does not cause a relayout or repaint.

If you had a tight loop that was extremely performance sensitive, then you should probably use data in javascript objects, not attributes on DOM objects. But, the performance of reading a DOM attribute is usually not a noticeable issue so issues like readability and maintainability are often more important and would drive the decision.

---

P.S. You aren't using the term JSON appropriately. What I think you're asking about is a "Javascript object" or "Javascript literal" which is how you statically declare javascript variables in your javascript code. JSON is a text format for specifying or interchanging javascript data in pure string format. JSON must be parsed to turn it into actual javascript variables.