無意中看到了一篇關於表現和數據分離的文章，詳細的看了一下，感覺和自己理解的不太一樣就有了這次的探尋
一、什么是表現和數據分離
說法1：表現和數據分離就是MVC,MVC 是將數據和業務邏輯分離由控制器分發，明顯不是
說法2：表現和數據分離就是Css和html+data分離，方便修改頁面的表現形式，如模板制作
說法3：表現和數據分離就是javascript中的MVC，將數據的獲取與數據的顯示分離
說法4：表現和數據分離就是javascript控制數據填充，html負責表現
其中
說法1明顯不符合，
說法2更應該稱之為表現與結構分離
說法3，下面是研究並復制別人的代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//定義一個controller
var piliController = {
//選擇視圖
start: function () {
this.view.start();
},
//將用戶操作映射到模型更新上
set: function (name) {
this.model.setPerson(name);
}
};
piliController.model = {
piliKV: {
'葉小釵': '刀狂劍痴',
'一頁書': '百世經綸',
'素還真': '清香白蓮'
},
curPerson: null,
//數據模型負責業務邏輯和數據存儲
setPerson: function (name) {
this.curPerson = this.piliKV[name] ? name : null;
this.onchange();
},
//通知數據同步更新
onchange: function () {
piliController.view.update();
},
//相應視圖對當前狀態的查詢
getPiliAction: function () {
return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
}
};
piliController.view = {
//用戶觸發change事件
start: function () {
$('#pili').change(this.onchange);
},
onchange: function () {
piliController.set($('#pili').val());
},
update: function () {
$('#end').html(piliController.model.getPiliAction());
}
};
piliController.start();
});
</script>
</head>
<body>
<select id="pili">
<option value="葉小釵">葉小釵</option>
<option value="一頁書">一頁書</option>
<option value="素還真">素還真</option>
</select>
<div id="end"></div>
</body>
</html>
寫的確實很好的代碼，個人想法是為什么不將select在用js在view中生成？
說法4 那就是Ajax了，
將3和4兩種結合起來會不會更好一些。。。。。。。
寫了一半不知道該怎么往下寫了，等有好的想法再補充
如果有什么不對的，或者什么更好的想法一定要說哦~