一、MVC是什么？

MVC(Model View Controller)是一种架构设计模式

M ： model，即数据层（数据模型），负责操作所有的数据。
V ：view，即视图层，负责所有UI界面，是提供给用户的操作界面，是程序的外壳。
C ：Controller,即控制层，负责根据用户从“视图层”输入指令，选取“数据层中的数据”，对其进行相应的操作(绑定事件等），产生最终结果。这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

关于MVC，事实上没有一个明确的定义，我理解的MVC是将代码结构化的一种抽象的概念，下面给出一些伪代码的示例。

Model 数据层（数据模型）

数据管理，主要负责和服务器进行交互，将请求到的数据传给Controller。

const m = {
    data: {},
    create() {增 },
    delete() { 删},
    update() {改},
    get() {查}
}

View 视图层

负责用户界面，HTML 渲染

const v = {
    el: null,
    // 初始化html
    html: `代码`
    ,
    init(container) {
        v.el = $(container)
    },
    render(n) { }
}

Controller 控制层

负责监听并处理View 的事件,更新和调用 Model,也负责监听 Model的变化并更新到View

const c={
  init(container){}
  events:{事件}
  add(){执行}
  minus(){执行}
  update(){执行}
  get(){执行}
  autoBindEvents(){逻辑}
}

二、EventBus

EventBus是什么？

前面提到MVC三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。当层与层之间需要通信时，这时就需要用到EventBus。EventBus主要用于组件之间的监听与通信。

EventBus 常用API

EventBus.on（）监听事件

EventBus.trigger（）触发事件

EventBus.on（）取消监听事件

EventBus的作用

用于模块间的通讯

示例代码

import $ from "jquery";
class EventBus{
    constructor() {
        this._eventBus = $(window);
    }
    on(eventName,fn){
        return this._eventBus.on(eventName,fn)
    }
    trigger(eventName,data){
        return this._eventBus.trigger(eventName,data)
    }
    off(eventName,fn){
        return this._eventBus.off(eventName,fn)
    }
}
export default EventBus

三、表驱动编程

概述

表驱动法是一种编程模式(scheme)，从表里面查找信息而不使用逻辑语句(if或case)

作用

对简单的情况而言，使用逻辑语句更为容易和直白，但随着逻辑链的越来越发杂，表驱动编程的方式更高效

const c = {
    events: {
        'click #add1': 'add',
        'click #minus1': 'minus',
        'click #mul2': 'mul',
        'click #divide2': 'divide'
    },
    add() {
        m.update({n: m.data.n + 1})
    },
    minus() {
        m.update({n: m.data.n - 1})
    },
    mul() {
        m.update({n: m.data.n * 2})
    },
    divide() {
        m.update({n: m.data.n / 2})
    },
    autobindEvents() {
        for (let key in c.events) {
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0, spaceIndex)
            const part2 = key.slice(spaceIndex + 1)
            v.el.on(part1, part2, value)
        }
    }
}

四、我是如何理解模块化的

模块化就是把相对独立的代码从一大段代码里抽取成一个个小模块每个模块之间相对独立，方便日后的维护。

浅析 MVC