Separation of data and labels in front-end programming

A long time ago with the great God Kobe discussed this topic, the great God means to bind the data into the tag, get the data from the tag's attributes worth to the data. Re-update attributes when updating data.

But I used an object data={} to save the data, just save the ID on the label, get the data to find it, and update it in addition to updating the view. Although it looks like you're writing a little bit more code,

But the coupling is greatly reduced, the modularity is more readable, especially when we change the structure of the DOM, the benefits of low coupling are immediately reflected, for example, we use UL and Li to achieve a set of data display,

But the customer suddenly said, "small stone ah, you change to such as the bar, as a CSS brain remnant, I was speechless." After I have slowly written a CSS, I'll just have to regenerate the ID of the element tag.

The data crud is still the same as the original logic. Also attach a bit of code to get the data

    Array.prototype.select = function (key, value) {for        (var i = 0; i < this.length; i++) {            if (this[i][key] = = VA Lue) {                return this[i];    }}} Array.prototype.getindex=function (Key,value) {for        (var i = 0; i < this.length; i++) {            if (this[i][key] = = Valu e) {                return i;}}    }

These two methods can basically overwrite the crud operation with the original method of the array.

Separation of data and labels in front-end programming