1.什么是 MVC ？

MVC模式（Model-view-controller）是一种设计模式（软件架构）。
MVC包括三类对象，将它们分离以提高灵活性和复用性。

模型（Model）：同于数据管理，一旦模型的数据发生改变，Model将通知有关的视图。
视图(View) ：负责用户界面，HTML渲染。描绘的是Model的当前状态，当模型的数据发生改变，View就会刷新自己。
控制（Controller） : 控制器， Controll 控制其他所有流程。负责监听并处理视图(View)的事件。更新和调用Model。也负责监听Model的变化，并更新View。

const m = {
  data: {
    index: parseInt(localStorage.getItem(localKey)) || 0
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('index', m.data.index)
  },
  get() {}
}

由于M是负责操作数据的,我们将我们所需要的变量index存入到了m对象中；

const v = {
  el: null,
  html: (index) => {
    return `
    <div>
      <ol class="tab-bar">
        <li class="${index === 0 ? 'selected' : ''}" data-index="0"><span>1111</span></li>
        <li class="${index === 1 ? 'selected' : ''}" data-index="1"><span>2222</span></li>
      </ol>
      <ol class="tab-content">
        <li class="${index === 0 ? 'active' : ''}">内容1</li>
        <li class="${index === 1 ? 'active' : ''}">内容2</li>
      </ol>
    </div>
`
  },
  init(container) {
    v.el = $(container)
  },
  render(index) {
    if (v.el.children.length !== 0) v.el.empty()
    $(v.html(index)).appendTo(v.el)
  }
}

由于V是负责操作视图的,我们将所需要的添加的html文件以及渲染的函数封装到了V对象中；

const c = {
  init(container) {
    v.init(container)
    v.render(m.data.index) // view = render(data)
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      v.render(m.data.index)
    })
  },
  events: {
    'click .tab-bar li': 'x',
  },
  x(e) {
    const index = parseInt(e.currentTarget.dataset.index)
    m.update({index: index})
  },
  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)
    }
  }
}

C代表的是其他的一些操作，这里放入了绑定事件，以及初始化事件。

最小知识原则

引入一个模块需要引入 html、css、js
引入一个模块需要引入 html、js
引入一个模块需要引入 js
你需要知道的知识越少越好
模块化为这一点奠定了基础

用模块化用户只会看到一个js的文件,其他的文件都被我们通过export import 导入导出的方式放到了我们的js代码中,即可实现网页的展示；
现在我们将每一个部分都各自的抽成了一个模块,当需要改动数据,或者需要修改绑定事件时只需要去对应的位置进行修改即可,这就是MVC设计模式。

2.EventBus的作用？

EventBus的API：

EventBus.on()//监听事件
EventBus.trigger()//触发事件
EventBus.off()//取消监听

作用：

EventBus 主要用于对象间的通信，
使用 EventBus 可以满足最小知识原则，model和view互相不知道对方的细节，但是却可用调用对方的功能。

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

3.表驱动编程是做什么的？

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

4. 理解模块化

模块化概念：

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

模块化的好处：

可以提高代码整体的效率；
减少重复的代码；
在项目结构上更加清晰，便于维护。

浅析 MVC