工大学子

浅谈表现和数据分离

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

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

说法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两种结合起来会不会更好一些。。。。。。。

写了一半不知道该怎么往下写了，等有好的想法再补充

如果有什么不对的，或者什么更好的想法一定要说哦~

posted @ 2013-07-27 12:43  飞天小莫  阅读(9313)  评论(1)    收藏  举报
飞天小莫