浅析MVC

MVC的三个对象

• M-module（数据模型）：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。好处在于，会有一个或多个视图对该模型进行监听，减少了代码的重复性。
• V-view（视图）：用户看到的并与之交互的界面。（即用户在屏幕看到的视图描绘的module的当前状态）负责操作所有的UI界面
• C-controller（控制器）：起到不同层面间的组织作用，用于控制应用程序的流程。它处理用户的行为和数据 Model 上的改变并作出响应。

代码示例：

module：

const m = {
  data: {
    n: parseInt(localStorage.getItem("n"))
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data); 
    eventBus.trigger("m:updated");
    localStorage.setItem('n', m.data.n);
  },
  get() {},
};

view:

const v = {
  el: null,
  html: `
      <div>
        <div class="output">
          <span id="number">{{n}}</span>
        </div>
        <div class="actions">
          <button id="add1">+1</button>
          <button id="subtract1">-1</button>
          <button id="multiply1">*2</button>
          <button id="divide1">÷2</button>
        </div>
      </div>`,
  init(container) {
    v.el = $(container);
    v.render();
    console.log(v.render())
  },
  render(n) {
    if (v.el.children.length !== 0) v.el.empty();
    console.log(n)
    $(v.html.replace("{{n}}", n)).appendTo(v.el);
  },
};

controller:

const c = {
  init(container) {
    v.init(container);
    v.render(m.data.n); //view=render(data)  
    c.autoBindEvents();
    eventBus.on("m:updated", () => {
      v.render(m.data.n);
    });
  },
  events: {
    "click #add1": "add",
    "click #subtract1": "subtract",
    "click #multiply1": "multiply",
    "click #divide1": "divide",
  },
  add() {
    m.update({ n: m.data.n + 1 });
  },
  subtract() {
    console.log("here");
    m.update({ n: m.data.n - 1 });
  },
  multiply() {
    console.log("here");
    m.update({ n: m.data.n * 2 });
  },
  divide() {
    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);
    }
  },
};

EventBus

有哪些API？

1. on监听事件
2. off取消监听
3. trigger触发事件

EventBus是做什么的？

• 解决模块之间的通讯问题
• 简化组件间的通讯
• 代码更简洁、性能更好

表驱动编程

表驱动编程就是一种编程模式，从表（哈希表）里面查找信息而不使用逻辑语句。将复杂的逻辑语句简化，使代码看起来更为直白。

代码示例：

const day = new Date().getDay()
let week;
if(day === 0){
    week = '星期日'
}else if(day === 1) {
    week = '星期一'
}
...
else{
    week = '星期六'
}

使用表驱动变成方法可简化为：

const keys = ['星期日', '星期一',..., '星期六']
const day = new Date().getDay(
const week = keys[day]

模块化的理解

1. 模块化就是将文件一个一个封装到特定的模块里，模块之间有特定的接口相互衔接。
2. 模块化使得代码维护更为方便。每次去修改代码或提出新的需求时不会影响到其他模块里的内容。