持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

MVC设计模式是使用业务逻辑和数据以及视图进行分离的方式来组织代码架构的一种模式，我们平常写功能的时候都会把业务逻辑视图以及数据写在一起，在功能比较复杂的情况下后期代码会比较难以维护，这个时候就可以采用MVC设计模式进行改善这种情况

MVC设计模式是由三个单词的首字母组成的，分别代表着三个东西：模型(Model)，视图(View)，控制器(controller)

stateDiagram-v2

View(视图) --> Model(数据)
Model(数据)-->Controller(控制器)
Controller(控制器)-->View(视图)

View层:指的是我们页面显示的内容

Model层：指的是我们所需要的数据，并且提供一些方法，使我们可以去操作这些数据

Controller层：指的是我们编写的代码逻辑

我们在View层被用户操作后做出响应事件，这些事件就会传到 Controller层，Controller层会去通过Model层提供的方法改变数据，Model层改变完数据之后，就会把数据在发送到View层，View层接收到数据后会做出对应的视图渲染

在实际开发中，用户也可以对这三个东西进行分别操作以及单独操作某一个，无论操作怎么改变，但是唯一不变的就是MVC设计模式的分层，每层即是相互独立的，也可以产生一些交互

MVC小实践

我们拥有一组学生数据，希望把学生名字和学生年龄显示在页面中进行查看，并且可以更新学生数据

实现思路

我们先在页面上新建一个存储模板的盒子，然后再使用MVC设计模式思想进行控制模板渲染

<div id="app"></div>

声明一个MVC操作对象，存储了model和view以及controller的操作

        let MVC = {};

model层

model层主要用于存放数据和对数据操作的方法，我们这里来声明一组学生数据，和对学生数据的读取以及添加和修改

        MVC.model = (function () {
            // 数据
            let data = {
                people: [{ name: '若水', age: 21 },
                { name: '牛牛', age: 20 },
                { name: '菜菜', age: 19 }]
            }
                ;
            // 方法
            return {
                // 获取属性
                getData(key) {
                    console.log(key);
                    
                    return data[key];
                },
                // 设置属性
                setData(key, val) {
                    data[key] = val
                }
            }
        })();

view层

视图层主要放了对视图的模板以及对模板调用的方法，完成对页面的内容的添加以及渲染

        MVC.view = (function () {
            //获取到model层
            const model = MVC.model;
            let view = {
                // 创建模板
                crrateTemplte() {
                    let data = model.getData('people');
                    let html = ``;
                    // 获取到参数进行模板拼接
                    data.map(res => {
                        html += `<div>我的名字叫${res.name},今年${res.age}岁了</div>`
                    })
                    // 渲染视图
                   document.getElementById('app').innerHTML=html;
                }
            }
            //把渲染模板方法暴露出去
            return function (template) {
                view[template]();
            }
        })();

controller层

主要放了对view层以及model层的操作以及逻辑的处理，调用view模板方法进行渲染，并且可以对model层进行更新数据，对model层数据更新完成之后还需在调用view层的渲染方法进行视图渲染

        //Controller层 
        MVC.controller = (function () {
        //获取model层
            const model = MVC.model;
            //获取view层
            const view = MVC.view;
            //逻辑层操作
            const controller = {
                // 渲染页面
                render() {
                    view('crrateTemplte')
                },
             // 更新数据
                updated() {
                    model.setData('people', [{ name: '明明', age: 2 },
                    { name: '红红', age: 10 },
                    { name: '烈烈', age: 9 }])
                    // 更新过后渲染页面
                    this.render()
                },
            }
            return controller;
        })();
  
            MVC.controller.render()

我们来给它添加一个更新的按钮

<button id="btn">更新数据</button>

最后直接在页面加载完之后在执行渲染视图方法以及给更新按钮添加方法，防止出现问题

window.onload = function () {
//视图渲染
            MVC.controller.render()
            //获取到更新按钮
            let btn = document.getElementById('btn');
         、//给更新按钮添加点击事件，点击就修改model层和更新视图
            btn.addEventListener('click', () => {
                MVC.controller.updated()
            }, false)
        }

代码我已经放到码上掘金上了，大家可以随时观看 MVC设计模式提高了代码的可维护性，可移植性，可扩展性，三个方面，并且降低了代码的耦合度，但是对于简单的页面如果采用MVC设计模式会提高页面的复杂程度，并且这种分离的操作可能会产生很多更新的操作，降低了运行的效率

坚持努力，无惧未来！

JavaScript设计模式-MVC模式（6）

MVC小实践

实现思路

model层

view层

controller层