一、MVC介绍

1、mvc是一种机构设计模式，主要分为三部分，分别为：M（model）、V（View）、C（controller）

2、MVC三个对象分别做什么。 M主要用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听模型，一旦模型的数据发生改变，模型将通知有关的视图。

Model的代码展示

const m = {
data:{程序所需要的数据}
create(){增加数据}
delete(){删除数据}
get(){获得数据}
update(){修改数据}
}

V主要是在屏幕上的表示，描绘的是Model的当前状态

View代码

const v ={
el:页面元素
html:{显示页面的内容}
init(){v.el ...元素初始化}
render(){重新渲染}
}

C主要定义用户界面对用户输入的响应式方式，用于处理用户的行为和数据Model的改变

Contorller代码

const c = {
init (){初始化}
BindEvents(){绑定事件}
}

二、Eventbus有哪些API，它的作用。

EventBus主要应用于建华组件之间通信与数据传输，比如：View组件、父子组件、兄弟组件。

EventBus常用的API：

.on（监听）

const evenBus = $(window)
eventBus.on("监听事件"，()=>{})

.trigger(触发事件)

const eventBus = $(window)
eventBus.trigger("事件")

.off(取消监听)

const eventBus = $(window)
eventBus.off("监听事件")

三、表驱动编程

表驱动编程是一种编程模式，是从哈希表里查找信息，而不是使用逻辑语句if...else...，原因是当逻辑简单时，用逻辑语句简单，且代码简短，但逻辑复杂时，逻辑语句就很麻烦，代码很长，这时候就应该使用表驱动编程。

//example
const c = {
  events: {
    "click #add1": "add",
    "click #minus": "minus",
    "click #mul2": "mul",
    "click #divide2": "div",
  },
  add() {
    m.update({ n: m.data.n + 1 });
  },
  minus() {
    m.update({ n: m.data.n - 1 });
  },
  mul() {
    m.update({ n: m.data.n * 2 });
  },
  div() {
    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); //view里的v.el
    }
  },
}

四、模块化

模块化意思跟进不同节点，结构分成不同模块，每个模块都可以重复使用，且模块之间可以相互独立，互不影响，这样可以降低代码耦合度，减少重复代码，使得项目结构清晰，便于维护。