一、MVC是什么

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

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

传统意义上的MVC各个部分之间的通信是单向的

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

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

Model

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

const m = {
    data: { 程序需要操作的数据或信息 }，
    create: { 增数据 },
    delete: { 删数据 },
    update(data) { 改数据 },
    get:{ 获取数据 } 
}

View

负责用户界面，HTML 渲染

const v = {
    el: null, // 需要刷新的元素
    html: `代码`, // 初始化html
    init(container) {
        v.el = $(container) // 需要刷新的元素
    },
    render(n) { 更新页面 }
}

Controller

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

const c = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 }，
   method() {
      data = 改变后的新数据
      m.update(data)
   }，
   autoBindEvents() { 自动绑定事件-逻辑 }
}EventBus

二、EventBus

EventBus是什么？作用？

EventBus主要用于组件之间的监听与通信。
解决模板之间通信的问题，view组件层面，父子组件、兄弟组件通信都可以使用 eventBus 处理

EvetBus API

on 监听事件
off 取消监听
trigger 触发事件

// 参数1:事件名称  参数2:事件函数
eventBus.on('监听事件',()=>{})
// 参数1:事件名称  参数2:事件函数
eventBus.off('监听事件',()=>{})
eventBus.trigger('m:updated') // 触发事件

三、表驱动编程

概念

表驱动法是一种编程模式，从表(哈希表)里面查找信息而不是使用逻辑语句（if…else…switch），可以减少重复代码，只将重要的信息放在表里，然后利用表来编程，与逻辑语句相比较有着更稳定的复杂度。

作用

比如 if 逻辑实现星期几的判断：

function weekday(day) {
    if (day === '1') {
        return '周一'
    } else if (day === '2') {
        return '周二'
    } else if (day === '3') {
        return '周三'
    } else if......
}

是不是非常繁琐，如果用表编程的思维，就非常清晰明了。

function weekday(day) {
    let map = {
        '1': '周一',
        '2': '周二',
        '3': '周三'
        ...
    }
    return map[day];
}

非常清晰，可读性强，后续的更新，可维护性也比单纯 if 逻辑强了 n 倍。

四、如何去理解模块化

其实是一种思想，一种封装的思想，把大量的代码封装成几个模块，各个模块之间负责不同的工作，相对独立，又存在着某种联系，各个模块之间协调配合完成一个项目。这就好比生活中不同部门之间完成各自的需求，相互配合完成整个项目。

M+V+C

每个模块都可以用M+V+C的模式搞定，即使MVC在vue 里浓缩成了一个 V。

事不过三(抽象思维)

把重复的事情抽象简单

重复的代码==>抽象成函数
同样的属性==>抽象成原型或类
同样的原型==>使用继承

浅析 MVC