无意中看到了一篇关于表现和数据分离的文章，详细的看了一下，感觉和自己理解的不太一样就有了这次的探寻
一、什么是表现和数据分离
说法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两种结合起来会不会更好一些。。。。。。。
写了一半不知道该怎么往下写了，等有好的想法再补充
如果有什么不对的，或者什么更好的想法一定要说哦~