无意中看到了一篇关于表现和数据分离的文章，详细的看了一下，感觉和自己理解的不太一样就有了这次的探寻

一、什么是表现和数据分离

说法1：表现和数据分离就是MVC,MVC 是将数据和业务逻辑分离由控制器分发，明显不是

说法2：表现和数据分离就是Css和html+data分离，方便修改页面的表现形式，如模板制作

说法3：表现和数据分离就是javascript中的MVC，将数据的获取与数据的显示分离

说法4：表现和数据分离就是javascript控制数据填充，html负责表现

其中

说法1明显不符合，

说法2更应该称之为表现与结构分离

说法3，下面是研究并复制别人的代码

$(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();

});

叶小钗

一页书

素还真

写的确实很好的代码，个人想法是为什么不将select在用js在view中生成？

说法4 那就是Ajax了，

将3和4两种结合起来会不会更好一些。。。。。。。

笔者QQ群 148042812