无意中看到了一篇关于表现和数据分离的文章,详细的看了一下,感觉和自己理解的不太一样就有了这次的探寻
一、什么是表现和数据分离
说法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
网友评论