mvc 第一次打开界面慢_《浅析 MVC》

MVC是什么

MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。

MVC包括三类对象，将他们分离以提高灵活性和复用性。

• 其中M是指model，模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。即负责操作所有数据。
• V是指view，视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。即负责操作所有UI界面。
• C是指controller，控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

javascript MVC模式

下面看一下代码实现加减乘除：

数据相关的代码放到M

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() {},
};

视图相关放到V

const v = {
  el: null,
  //第一次渲染html
  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);
  },
};

其他为C

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

EventBus可以实现对象间通讯。使用方法查看链接 初识EventBus

 eventBus.on("m:updated", () => {
      v.render(m.data.n);
    });

表驱动编程

表驱动法就是一种编程模式，从表里面查找信息而不使用逻辑语句。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越复杂，查表法也就愈发显得更具吸引力。

const c = {
     events:{
      "click #add1": "add",
      "click #subtract1": "subtract",
      "click #multiply1": "multiply",
      "click #divide1": "divide",
     },
     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)
         }
     }
 }

如何理解模块化

我认为模块化就是复杂，重复的代码抽取并封装到一个一个模块中，这些模块之间又有一些特定的接口相互可以去衔接。

资料来源：https://efe.baidu.com/blog/mvc-deformation/