表现与数据分离

小城听风雨

于 2019-12-23 16:50:15 发布

阅读量1k

点赞数 1

分类专栏： Javascript踩过的坑文章标签： javascript 前端项目架构

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/a5252145/article/details/103668416

版权

Javascript踩过的坑专栏收录该内容

39 篇文章 3 订阅

订阅专栏

表现与数据分离：

表现：顾名思义，就是表达出来的现象，在前端来看，就是html+css，就是平常所看到的的网页的架子；
数据：一般是从后端数据库或从哪爬过来的数据，然后在前台显示出来，即是网页中各个结构上的内容；

好处与坏处：

好处：模块化 –> 容易测试 –> 降低bug频率；
坏处：程序结构复杂，比较耗时，上手有学习曲线；

应用场景：

项目具有明显的数据需求，比如要与很多Service交互，业务流程复杂，表单很多

非应用场景：

项目是典型的静态信息展示型页面，或是微型的内部app，或是产品idea验证时期的MVP。

再来看一段代码：

<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>