浅析 MVC

何为MVC

MVC是一种架构设计模式，把软件系统分为三个基本的部分：模型（Model）、视图（View）、和控制器（Controller）。

举个例子：可能你在编写的时候觉得，一步接一步，逻辑已经很清晰了；在几天后，你回过头看自己的项目，你已经失去了头绪。 有很多重复的地方，改一步就要改所有，这其中就可能会有严重的错误产生。 而运用MVC思想，真正的把你的代码变成一个个分块，而不是一大坨堆在一起

Model(数据)

Model 数据管理，包括数据逻辑、数据请求、数据储存等功能。

前端 Model 主要负责 AJAX 请求或者 LocalStrage 的储存。

const model ={
        //定义数据

        data: null,

        //初始化

        init(){}

        //各种方法

        fetch(){}

        save(){}

        update(){}

        deltet(){}

}

View(视图)

View 负责用户界面,前端 View 主要负责 HTML 渲染.

const view = {
init(){}

    template:`<div>HI</div>`

}  

Controller(控制器)

Controller 负责处理 View 的事件,并更新Model,也负责监听 Model 的变化,并更新 View , Controller 控制其他所有流程

const controller = {
    view: null,
    model: null,
    init(view, model){
        this.view = view
        this.model = model
        this.bindEvents()
    }
    render(){
        this.view.querySelector('name').innerText = this.model.data.name
    },
    bindEvents(){}
}

表驱动编程

在MVC优化代码过程中，我们提取出了一个“哈希表”(events)；我们只留下了需要的、不能再简略的东西：doSomething。

const controller = {
    init() {
        ...

        //我们将之称为自动绑定事件
        controller.autoBindEvents()
    },
    //事件
    events: {
        'click #a1': 'method_1',
        'click #a1': 'method_1',
        ...
        'click #a1': 'method_n'
    },
    autoBindEvents() {
        //实现过程，比如遍历
        for (let key in controller.events)
        //比如将包含'事件 选择器'的字符串分为几个部分，放到不同的变量中
    },
    method_1() {
        doSomething_a1
    },
    method_2() {
        doSomething_a2
    },
    ...
    method_n() {
        doSomething_an
    }
}

eventBus的作用

• EventBus也是一种设计模式或框架，主要用于组件/对象间通信的优化简化。
• eventBus提供了 on 、off 和 trigger 等API，on 用于监听事件，trigger 用域触发事件。

const model = {
    data: {
        i: come from somewhere
    }，
    //update 事件
    update(data) {
        //将 data 更新到 model.data
        Object.assign(model.data, data)
        //触发 model:updated 事件
        eventBus.trigger('model:updated')
    }
}

const controller = {
    //初始化方法
    init() {
        //初始化渲染
        view.render(model.data.i)
        //只要监听到 model:updated 方法就渲染更新页面
        eventBus.on('model:updated', () => {
            v.render(model.data.i)
        })
    },
    ...
    method_1() {
        //model.update(i: model.data.i + 1)
        model.update(i: model.data.i doWithMethod_1)
    },
    method_2() {
        model.update(i: model.data.i doWithMethod_2)
    },
    ...
    method_n() {
        model.update(i: model.data.i doWithMethod_n)
    }
}

总结何为模块化

其实MVC就是一个模块化，将一些零散的代码进行封装成块。模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

MVC 只是一种设计模式，给了我们一种设计代码结构的主要思路。在设计模式实现的过程中，如果结合更多的方法与理念，可以让代码向真正的“好代码”靠近。