谈谈我对 MVC 的理解

228 阅读2分钟

MVC

MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种设计模式,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。

我们可以认为:

  • M - Model (数据模型)负责操作所有数据
  • V - View (视图)负责所有 UI 界面
  • C- Controller (控制器) 负责其他

举例:

// M 包含了数据增删改查的一些方法
const m = {
  data: {},
  create() {},
  delete() {},
  update() {},
  get() {}
}
// V 包含了初始化和渲染,以及一些用户可视的内容
const v = {
  html: ``,
  init() {},
  render() {}
}
// C 包含了一些事件绑定以及其他...
const c = {
  init() {},
  events: {},
}

EventBus

EventBus 也就是观察者模式,又被称为发布-订阅(Publish/Subscribe)模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。

常见的 API:

  • 绑定事件

eventBus.on("eventName",callback)

  • 触发事件

eventBus.emit("eventName",[...args])

  • 解绑事件

eventBus.off("eventName",callback)

表驱动编程

表驱动编程,简单讲是指用查表的方法获取值。可以代替if else方法,逻辑语句往往更简单而且更直接。

这种方法的好处是:

  1. 提高了程序的可读性。
  2. 减少了重复代码。
  3. 可扩展性。
  4. 程序有一个明显的主干。
  5. 降低了复杂度。

模块化

 在 JS 出现的时候,JS 一般只是用来实现一些简单的交互,后来随着 JS 的发展,JS 用来实现越来越复杂的功能,而为了维护的方便,我们也把不同功能的 JS 抽取出来当做一个 JS 文件,而模块化的概念就是,将实现不同功能或者控制不同区域的代码以模块的形式变成一个单独的文件,而项目中我们只需要引入这些单独的文件就可以了。这样可以增加了代码的可读性和可维护性,同时,我们可以降低代码的耦合度,在技术更新或者代码重构的时候,大大减少了难度和时间。

模块功能主要由两个命令构成: exportimportexport 命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

例如:

import $ from 'jquery'
// 引入 jquery 到当前的 JS 文件中
export default init
// 从当前的 JS 文件中导出 init 方法