最近更新
阅读排行
关注本站
JS中的表现与数据分离
阅读：7349 次 编辑日期：2015-04-18
目录：
概述：
最近真是忙得不可开交，到不是工作多忙，是因为我小公主出生啦~~，最近被一个大哥问到了一个问题：数据分离。那么今天我们就来说说 - 表现与数据分离。
什么是表现与数据分离：
“分离”说的是两方面：
第一方面是前端与后台分离，所有数据都是后台通过AJAX发送数据给前端，前端处理数据展现页面，不需要后台在页面中插入变量。
第二是前端展现与数据分离。也就是说在前端处理数据的过程中，处理DOM的代码与处理数据的代码要区分开，不能混在一起，这样改起来不会牵连太多，泾渭分明。
表现与数据分离有什么好处：
一些小的功能或者项目其实用不用到无所谓，但是试想一下，如果一个项目很大 ，代码很长，DOM与处理数据掺杂在一起，那么我们在修改代码的时候是很痛苦的一件事情。
代码示例：
在网上找了一个例子，大家看一下：
<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>
缺点是乍看之下较难维护，优点是，处理DOM与处理数据甚至刷新DOM的方法都是分离的。
