前端的表现与数据分离（一）

最新推荐文章于 2024-07-21 22:01:34 发布

云天1995

最新推荐文章于 2024-07-21 22:01:34 发布

阅读量9.1k

点赞数 4

分类专栏：个人笔记文章标签：前端的表现与数据分离 JavaScript mvc

本文链接：https://blog.csdn.net/yuntian1995/article/details/77513113

版权

个人笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

第一次看到表现与数据分离，我就觉得是个很高大上的东西，然后通过万能的度娘，总算是了解了一些，在这里稍微说一下我自己的理解。

“分离”的话可以分为两种：

第一种是前端与后台分离，所有数据都是通过请求（AJAX）从后台获取，前端处理数据展现页面，不需要后台在页面中插入变量。

第二种前端展现与数据分离。也就是说在前端处理数据的过程中，处理DOM的代码与处理数据的代码要区分开，不能混在一起，这样改起来不会牵连太多，泾渭分明

第一种没什么好说，将数据写死在页面的，基本很少见了

第二种就不得不提一下两个大家可能比较熟悉的东西，MVC、MVVM

model view controller

model 数据模型负责业务逻辑和数据存储，在接收到controller传递过来的事件后进行数据处理，并通知view进行同步更新

view 视图绑定用户操作的事件，并在触发时将事件传递给controller，另外在接到同步更新通知后，对页面呈现的内容进行更新

controller 控制器将用户操作映射到model上

这么说可能并不是很清楚（反正我也只是为了自己看得懂凸(艹皿艹 )）

上代码吧，非本人代码，不过读书人的事 →_→

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.11.3.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());
                    console.log($('#pili').val());
                }
            };
            piliController.start();
        });
    </script>
</head>
<body>
    <select id="pili">
     <option value="叶小钗">叶小钗</option>
        <option value="一页书">一页书</option>
        <option value="素还真">素还真</option>
    </select>
    <div id="end"></div>
</body>
</html>

上面的代码，其实只是一个小功能，可能使用mvc反而显得繁琐，但是在项目很大，代码很长，数据很多的情况下，dom与数据处理混合在一起的时候，代码的维护就成了一个很麻烦的事