表现与数据分离

个人理解的意思是：

前台代码实现UI设计即为表现层，JS只实现功能不涉及UI界面即为数据层，即使UI界面发生变化只要功能不变，也无需修改功能代码。

具体思想可参考以下代码：

原地址：http://www.cnblogs.com/yexiaochai/p/3167465.html

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             //定义一个controller
 8             var piliController = {
 9                 //选择视图
10                 start: function () {
11                     this.view.start();
12                 },
13                 //将用户操作映射到模型更新上
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     '叶小钗': '刀狂剑痴',
21                     '一页书': '百世经纶',
22                     '素还真': '清香白莲'
23                 },
24                 curPerson: null,
25                 //数据模型负责业务逻辑和数据存储
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ? name : null;
28                     this.onchange();
29                 },
30                 //通知数据同步更新
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //相应视图对当前状态的查询
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //用户触发change事件
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="叶小钗">叶小钗</option>
58         <option value="一页书">一页书</option>
59         <option value="素还真">素还真</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>

 

posted @ 2017-02-18 23:53  历史最高  阅读(246)  评论(0)    收藏  举报