MVC 是什么?

MVC拆解如下：

• Model（数据模型） - 管理程序的数据
• View（视图） - 模型的直观表示
• Controller（控制器） - 链接用户和系统

// M 处理数据，并在数据更新触发"m:updated"
const m = {
data: {
  n: parseInt(localStorage.getItem("n"))
},
update(data) {
  Object.assign(m.data, data); 
  eventBus.trigger("m:updated");
  localStorage.setItem("n", m.data.n);
};
// v 渲染HTML
const v = {
el: null,
html: `<div >
      <div class="output">
        <span id="number">{{n}}</span>
      </div>
    </div>`,

render(n) {
  if (v.el.children.length !== 0) {
    v.el.empty();
  }
  $(v.html.replace("{{n}}", n)).appendTo(v.el);
}
};
// c 连接M和V，接收到M的触发定"m:updated"后绑定触发事件，调用V中的render对HTML渲染。
const c = {
init() {
  eventBus.on("m:updated", () => {
  v.render(m.data.n);
  });
}
};

EventBus 有哪些 API?

eventBus 提供了 on、off 和 trigger 等 API，on 用于监听事件，trigger 用于触发事件。

eventBus.trigger('m:updated') //触发事件 
eventBus.on('m:updated',()=>{ //监听事件
     v.render(m.data.n)
 })

表驱动编程作用

表驱动法(Table-Driven Approach),简单讲是指用查表的方法获取值。可以代替if else方法，逻辑语句往往更简单而且更直接。

const c ={
//建立表单
  events: {
    "#add1": "add",
    "#minus1": "minus",
    "#mul2": "mul",
    "#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]];
      v.el.on("click", key, value);
    }
  }
}；

模块化理解

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

简单来说就是对一个功能实现后，可以给类似的地方直接用，而不需要去修改代码内部。即使后续优化，模块化的代码也更容易增删改查。

总结

记住最小知识原则，如以最少的知识使用一个模块，平时我们需要引入 html,并在 html 里引入 css 和 js，现在只需要引入一个模块 js 就够了。