一个示例让你明白界面与数据分离

前几天,看到叶小钗同学的《一次面试回顾——探讨表现与数据分离》 ,并且发表自己的见解。他说的“表现”,在我的文章表述为界面,我认为:

1、界面与数据的分离,必须体现在代码上,界面的代码归界面的代码,数据的代码归数据的代码,两者必须泾渭分明。

2、当界面需求发生改变,只需要改写界面的代码,并且所改写的代码不能影响到数据访问的代码。

只有做到这两者才算界面与数据分离。叶小钗同学让我上代码,趁今天还不是很忙,写下了下面的代码:

一个示例让你明白界面与数据分离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <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、数据访问的代码会不会发生变化?一般来说,这个是很少会发生变化的(相比界面)。假如发生变化了,需要修改数据访问的代码,所作的修改并不会影响到界面的代码。

关于代码,我就不作解释了,相信有点基础的同学都能看懂。

本文到此结束了,欢迎大家发表意见。

另外:公司招人中,想找工作的朋友,可以和我聊聊。

一个示例让你明白界面与数据分离

上一篇:ACM进阶之路


下一篇:大挑战(暂定名)服务器架构