表现与数据分离(MVC)

作者: 吃萝卜的小兔子 | 来源:发表于2017-08-03 20:42 被阅读0次

表现与数据分离(MVC)
1.angularjs
AngularJS-1.5
angularJs学习笔记
MVC、MVP和MVVM
spring mvc -- 概括了解
【学习】android的MVC与MVP与助手的聊天系统
Web学习笔记 - 第003天
MVVM
Android设计架构详解

mvc指的是model，view，controller 三部分，view为视图层，负责显示内容；model为模块层，负责业务逻辑和数据存储；controller为控制层,负责将它们联系起来。这样就做到了表现与数据分离。看接下来的两段代码：
没有使用mvc

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVC</title>
    <script type="text/javascript" src="../jquery/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var end =  $('#end');
            $('#pili').change(function () {
                var name = '';
                var p = $(this).val();
                if(p == '叶小钗'){
                    name = '叶小钗';
                }
                if(p == '叶中钗'){
                    name = '叶中钗';
                }
                if(p == '叶大钗'){
                    name = '叶大钗';
                }

                end.html(name+p)
            });
        });
    </script>
    
</head>
<body>
    <select id="pili">
        <option value="叶小钗">叶小钗</option>
        <option value="叶中钗">叶中钗</option>
        <option value="叶大钗">叶大钗</option>
    </select>
    <div id="end"></div>
</body>
</html> -->

使用mvc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVC</title>
    <script type="text/javascript" src="../jquery/jquery-3.2.1.js"></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>

前一个和后一个代码实现一样的功能，好吧，后一个看起来略微的有点复杂。为什么要使用这种模式呢？因为一个界面的更改相对于他要实现的功能和存放的数据的更改相对更频繁一些，我们不能每次界面更改就全盘把代码重新码一遍，那样的话大概会累死，而且这样做也会使代码更加易读。

参考：叶小钗的表现与数据分离博客