MVC是什么

每一个模块可以写成三个对象，分别是M、V、C
M——Model（数据模型），负责操作所有数据
V——View（视图），负责所有UI界面
C——Controller（控制器），负责其他

其中涉及到的一些抽象思维

抽象思维1
最小知识原则
引入一个模块需要引入HTML、CSS、JS
需要知道的东西越少越好，模块化为这一点奠定了基础
但是这样做刚开始页面会是空白的，没有内容没有样式
可以添加载入动画或者骨架图或者站位内容
抽象思维2
以不变应万变
每个模块都可以用m+v+c来写，每个模块都这样写，不用思考类似需求怎么写了
但是有时会有多余用不到的代码，遇到特殊情况时难以变通
抽象思维3
view = render（data）
比起操作DOM对象，直接render更为容易，只要改变data就能得到对应的view
但是render渲染会比DOM更加浪费性能
抽象思维4
表驱动编程
表指的是哈希表
表驱动编程可以减少重复代码，只讲重要的信息放在表里，然后利用表来编程（数据结构）
抽象思维5
事不过三
同样的代码写三遍，应该抽成一个函数
同样的属性写三遍，应该做成共有属性（原型或类）
同样的原型写三遍，应该用继承
抽象思维6
俯瞰全局
eventbus 负责事件通信
把所有的对象看成点，实现点与点的通信

Model：是应用程序中用于处理应用数据逻辑的部分。
用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型数据发生变化，模型将通知有关视图。

const m = {
  data: {数据A},
  create() {},
  delete() {},
  update(data) {
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
},
  get() {数据A}
}

View：是应用程序处理应用数据显示的部分。
它是在屏幕上面表示，描绘的是Model当前的状态。当模型的数据发生变化，相应的得到刷新自己的机会。

const v = {
  el: 需要刷新的元素,  
  html: `
       body里面的内容
`,
  init(container) {
    v.el = $(container)
  },
  render(n) {刷新页面}
}

Controller：是应用程序处理人机交互的部分。
Controller定义用户界面对用户输入的响应式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据Model上的变化。

const c = {
  init(container) {
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    },
  events: {},   //事件以哈希表的方式记录存储
  add() {},
  minus() {},
  mul() {},
  div() {},
  autoBindEvents() {自动绑定事件}
}

EventBus

on : 监听事件
trigger(emit) : 触发事件
off : 取消监听
用于模块间的通讯，view组件层面，父子组件、兄弟组件通信都可以使eventbus处理。

const eventBus = $(window)
eventBus.trigger('m:update') // 自动触发事件update
eventBus.on('m:update', () => {console.log('触发';)}) //监听事件 然后执行函数

表驱动编程

表驱动编程的意义在于逻辑与数据的分离

表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

使用if-else

function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '？？？'  
    }
}

// 如果想添加一个新的名词翻译，需要再添加一个if-else逻辑，例如：
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // 此处添加了一个新的名词翻译
        return '四'
    } else {
        return '？？？'  
    }
}

如果使用表

function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

// 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
        '4': '四'   // 添加一个新的名词翻译
   
    return terms[term];
}

显而易见，容易了很多。根本不用修改代码逻辑。