最近更新
阅读排行
关注本站

JS中的表现与数据分离

阅读:7476 次   编辑日期: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的方法都是分离的。
将本篇文章分享到:
top