interface and data separation how do?

Source: Internet
Author: User

1, the interface and data separation, must be reflected in the code, interface code to interface code, data code to data code, the two must be separate.

2, when the interface requirements change, only need to rewrite the interface code, and the rewritten code does not affect the data access code.

Only by doing the two is the interface and data separation. Leaves-chai students Let me on the code, while not very busy today, wrote down the following code:

    DOCTYPE html> <html lang= "en" > <head> <meta charset= "Utf-8"/> <title></title>  <script src= "Http://" ></script> <script> $ (function ()
                {var Countries = function () {} Countries.prototype = {_items: [],
                       _getdata:function (Success) {var items = [{id:0, Name: ' China '},
                    {id:1, Name: ' Japan '}, {id:2, Name: ' United States '}];
                    $.extend (this._items, items);
                Success (items); },//events on_selected: $. Callbacks (), on_inserted: $.
                    Callbacks (),//methods select:function () {var self = this;
                     This._getdata (function (items) { ({sender:self, items:items
                    }, Insert:function (item) {var self = this;
                    This._items.push (item);
       ({sender:self, item:item}); }
            The following is the interface code, when to adjust the interface, change here on the line ~ ~ ~ ~ var countries = new countries (); Countries.on_selected.add (function (args) {$ (args.items). each (function () {$ (' #count
                Ries '). Append ($ (' <option> '). attr (' value ', Text (;
            }); Countries.on_inserted.add (function (args) {$ (' #countries '). Append ($ (' <option selected= ' selected ' > ') . attr (' value ', TeXT (;
            var id = 10;
            $ (' #btnAdd '). Click (function () {Countries.insert ({id: ++id, Name: $ (' #countryName '). Val ()});
        }); </script> </head> <body> <select id= "Countries" ></select> <div> <in Put id= "CountryName"/><button id= "Btnadd" > Add </button> </div> </body> </html>

The code can be run directly by copy, and the interface is shown below:

The above code, really do the interface and data separation:

1, in the data access code, there is no one line involving the UI, if there is a row, even if the line involved, can not be regarded as the interface and data separation. (Simply put, data access code, not dependent on the UI)

2, when the interface requirements change, as long as the interface to modify the code on it.

3, the data access code will change? In general, this is rarely changed (compared to the interface). If this changes, you need to modify the data access code, the changes do not affect the interface code.

About the code, I do not explain, I believe that a little basic students can read

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.