Separation of data and labels in front-end programming

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.