问题描述:

I want some return about dom manipulation. I think we can save elements' status in several ways. For exemple, you want to make an element "inserted", what do i have to use? :

  • Add css class as "inserted"
  • Save an attribute with .data("inserted",true)
  • Push my element in a global array containing all "inserted" elements
  • ...

But what is the best way? Maybe the solution is to use all possibilities. I don't know.

That's a general question. I don't have a specific problem, but i am starting developing a huge javascript application and i want to choose my rules :)

网友答案:

Do you want selected elements to look in a specific way?
--> Use the css-class

Do you want to check whether a specific element is selected at a different place in code?
--> Use .data

Do you want to do something to all selected elements?
--> Use an array.

If you plan to do multiple of the things above, you can also combine the approaches.

网友答案:

If you want a visual element to accompany the status, then the CSS class is the obvious way to go.

Data elements are a perfectly valid way of tagging something as well.

If you want to persist state, then saving element status in a JSON structure may be a good option. The JSON data is the "master model" and the elements are rendered based on its model. The JSON data can be passed to the server or to the next page easily.

网友答案:

This is a hard question to answer generally because it really depends on the needs of your application. How many elements do you need to evaluate at any given time? A dozen? A few thousand? What else do you need to do with these elements when you select them? Basic guidelines are:

  1. Don't add a selected class unless you really need to change the style of the element.

  2. If you need to traverse to an element based on whether it has been selected or not, do not use the data() option.

  3. Do not cache the selected elements in memory (variables or localStorage or whatever) if you don't need them to persist for more than one simple call. The overhead of managing your array of selected elements is only worth it if you have a noticeable performance gain or need to persist the data.

So, what do you really need to do with these elements? With more information about your situation, we can make a better recommendation.

网友答案:

For me this depends on what the use of the status will be...

  • If layout changes depending on selected, i use a class
  • JS logic (more than only styling) -> atribute

I hardly use classes to add js logic to elements ... css tends to change more often than the underlying javascript files. In case I use classes in js, I force myself to keep the classnames and selectors in css or just redo all element-selection in both js and css when one needs to change (for instance because of using another library or css templates)

as for your third option, an attribute can give you an array of all selected alemens useing a jquery selector $('*[selected]')

网友答案:

if things get complicated I put enhanced dom elements into "classes"

var InserttMe = function(element){
    this.element = element;
    this.inserted= false;
};
selectMe.prototype = {
    insert: function(){
       this.inserted= true;
       //do whatever you do with your element
    }
}
相关阅读:
Top