一個示例讓你明白介面與資料分離

麥舒發表於2014-01-21

前幾天，看到葉小釵同學的《一次面試回顧——探討表現與資料分離》 ，並且發表自己的見解。他說的“表現”，在我的文章表述為介面，我認為：

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、資料訪問的程式碼會不會發生變化？一般來說，這個是很少會發生變化的（相比介面）。假如發生變化了，需要修改資料訪問的程式碼，所作的修改並不會影響到介面的程式碼。

關於程式碼，我就不作解釋了，相信有點基礎的同學都能看懂。

本文到此結束了，歡迎大家發表意見。

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

 

 

 

 

相關文章