1、界面與數(shù)據(jù)的分離，必須體現(xiàn)在代碼上，界面的代碼歸界面的代碼，數(shù)據(jù)的代碼歸數(shù)據(jù)的代碼，兩者必須涇渭分明。
2、當(dāng)界面需求發(fā)生改變，只需要改寫(xiě)界面的代碼，并且所改寫(xiě)的代碼不能影響到數(shù)據(jù)訪問(wèn)的代碼。
只有做到這兩者才算界面與數(shù)據(jù)分離。葉小釵同學(xué)讓我上代碼，趁今天還不是很忙，寫(xiě)下了下面的代碼：
<!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: '中國(guó)' },
{ id: 1, name: '日本' },
{ id: 2, name: '美國(guó)' }
];
$.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 });
}
}
//=======================================================================
// 以下為界面代碼，當(dāng)要調(diào)整界面，改這里就行啦~~~
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運(yùn)行的，界面如下圖：
界面與數(shù)據(jù)分離怎么做？ 三聯(lián)
上面的代碼，真正做到了界面與數(shù)據(jù)的分離：
1、在數(shù)據(jù)訪問(wèn)的代碼，沒(méi)有一行涉及到UI的，如果有一行，哪怕一行涉及到，都不能算是界面與數(shù)據(jù)分離。（簡(jiǎn)單點(diǎn)說(shuō)，就是數(shù)據(jù)訪問(wèn)的代碼，不能對(duì)UI有依賴）
2、當(dāng)界面需求發(fā)生變化，只要修改界面的代碼就可以了。
3、數(shù)據(jù)訪問(wèn)的代碼會(huì)不會(huì)發(fā)生變化？一般來(lái)說(shuō)，這個(gè)是很少會(huì)發(fā)生變化的（相比界面）。假如發(fā)生變化了，需要修改數(shù)據(jù)訪問(wèn)的代碼，所作的修改并不會(huì)影響到界面的代碼。
關(guān)于代碼，我就不作解釋了，相信有點(diǎn)基礎(chǔ)的同學(xué)都能看懂
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：