界面与数据分离的示例

界面与数据分离的示例2015-03-04 cnblogs 麦舒前几天，看到叶小钗同学的《一次面试回顾——探讨表现与数据分离》，并且发表自己的见解。他说的“表现”，在我的文章表述为界面，我认为：

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）;},//Eventson_selected: $.Callbacks（）,on_inserted: $.Callbacks（）,//Methodsselect: 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、数据访问的代码会不会发生变化？一般来说，这个是很少会发生变化的（相比界面）。假如发生变化了，需要修改数据访问的代码，所作的修改并不会影响到界面的代码。

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