网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 界面与数据分离怎么做
内容
    1、界面与数据的分离，必须体现在代码上，界面的代码归界面的代码，数据的代码归数据的代码，两者必须泾渭分明。
    2、当界面需求发生改变，只需要改写界面的代码，并且所改写的代码不能影响到数据访问的代码。
    只有做到这两者才算界面与数据分离。叶小钗同学让我上代码，趁今天还不是很忙，写下了下面的代码：
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src=">
    <script>
    $(function () {
    var Countries = function () { }
    Countries.prototype = {
    _items: [],
    _getData: function (success) {
    var items = [
    { id: 0, name: '中国' },
    { id: 1, name: '日本' },
    { id: 2, name: '美国' }
    ];
    $.extend(this._items, items);
    success(items);
    },
    //Events
    on_selected: $.Callbacks(),
    on_inserted: $.Callbacks(),
    //Methods
    select: function () {
    var self = this;
    this._getData(function (items) {
    self.on_selected.fire({
    sender: self,
    items: items
    });
    });
    },
    insert: function (item) {
    var self = this;
    this._items.push(item);
    self.on_inserted.fire({ sender: self, item: item });
    }
    }
    //=======================================================================
    // 以下为界面代码，当要调整界面，改这里就行啦~~~
    var countries = new Countries();
    countries.on_selected.add(function (args) {
    $(args.items).each(function () {
    $('#countries').append($('<option>').attr('value', this.id).text(this.name));
    });
    });
    countries.on_inserted.add(function (args) {
    $('#countries').append($('<option selected="selected">').attr('value', args.item.id).text(args.item.name));
    });
    var id = 10;
    $('#btnAdd').click(function () {
    countries.insert({ id: ++id, name: $('#countryName').val() });
    });
    countries.select();
    //=======================================================================
    });
    </script>
    </head>
    <body>
    <select id="countries"></select>
    <div>
    <input id="countryName" /><button id="btnAdd">添加</button>
    </div>
    </body>
    </html>
    代码是可以直接Copy运行的，界面如下图：
    
    界面与数据分离怎么做？ 三联
    上面的代码，真正做到了界面与数据的分离：
    1、在数据访问的代码，没有一行涉及到UI的，如果有一行，哪怕一行涉及到，都不能算是界面与数据分离。（简单点说，就是数据访问的代码，不能对UI有依赖）
    2、当界面需求发生变化，只要修改界面的代码就可以了。
    3、数据访问的代码会不会发生变化？一般来说，这个是很少会发生变化的（相比界面）。假如发生变化了，需要修改数据访问的代码，所作的修改并不会影响到界面的代码。
    关于代码，我就不作解释了，相信有点基础的同学都能看懂
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 19:09:07