浅析 MVC-前端中的你有啥不同

361 阅读1分钟
  1. 如何简单理解MVC?

MVC是一种编程概念,标准讲法是一种架构设计模式。它来源于后端,即前端借鉴后端的概念去组织或者设计前端的代码,导入模块化编程思想。

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);
  });
}
};

学习MVC,就是要用这种概念去将JS中的代码归类放入不同的模块里面。这样理解别人的代码,或者修改自己的代码都比较直观,就像图书馆的书一样分门别类,才不至于摸不着头脑。

  1. 了解MVC,还要掌握到哪些新知识?

首先,把MVC设计为三个独立对象,怎么串联呢,故引入EventBus来进行两个组件间的通信。 使用方法和例举相关API如下:

const eventBus = $(window); 
eventBus.on //绑定事件
eventBus.trigger //触发事件
eventBus.off //解除绑定事件

其次,学习MVC,还要改变单纯的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);
    }
  }
};

最后,要学习一劳永逸的编程思想,即代码设计成模块化,代码重构,方便理解,使代码具有良好的可移植性。简单来说就是对一个功能实现后,可以给类似的地方直接用,而不需要去修改代码内部。即使后续优化,模块化的代码也更容易增删改查。