浅析MVC

30.1.2 什么是mvc?

mvc是一种设计模式. 具体来说:

• M: model 数据模型,例如:

  const M = {
      data:{
          数据项一:4,
          数据项二:"我是数据"
          
      },
      删除数据的函数(){},
      增加数据的函数(){},
      修改数据的函数(){},
      查找数据的函数(){}
  }
  

• V: View: 负责所有UI界面

  const V = {
      界面元素变量一,
      界面元素变量二,
      渲染函数(){}
  }
  

• C: Controller : 控制其他 , 例如业务逻辑,

  const C ={
      初始化函数(){},
      事件绑定函数(){}
  }
  

但是mvc没有明确定义, 但是很多人理解有差异, Google一下mvc, 前四张图片mvc的流程图都不一样

mvc最重要的是: 用来重构意大利面条式代码, 逐步变成框架式代码. 而框架式代码的好处: 有稳当的代码复杂度.

---

用MVC重构代码的时候需要注意哪些?

1. 渲染和数据更新分离. 减少调用渲染函数的次数, 而是将数据修改的结构暴露, 你只要修改数据就行, 渲染页面的函数, 由update函数判断.

2. 最小知识原则: 当设计一个函数, 模块的时候, 对使用者者知识要求要降到最低. 特别是字符串变量, 闭包的情况

---

30.1.3 什么是EventBus? 有什么作用?

事件公交车, 顾名思义: 用来触发事件函数,以及事件监听函数的一个变量.

例如:

class Eventbuss{
    事件触发函数(){},
    事件监听函数(){}
}

function 任意一个函数(){
    eventBus.事件触发函数("当一个人上车")
}

eventBus.事件监听函数('当一个人上车',()=>{
    console.log("那我就要提醒他买票")
})

EventBus的作用: 能够将数据更新和页面渲染分离. 一般的函数只要调用数据更新函数update, 在update函数里面,存放时间触发函数, 来调用渲染函数. 这样做到有条件的渲染.

因为eventBus太常用了, 一般放在api的最顶层.

---

30.1.4 表驱动编程

就是用hashTable来代替复杂的 if else.

例如:

//表驱动编程之前:
if("星期一"){
    "那么我就学习"
}else if("星期二"){
    "那么我就打牌"
}else if("星期三"){
    "那么我就打球"
}

//表驱动编程之后:
const xxx={
    "星期一": "学习",
    "星期二": "打牌",
    "星期三": "打球"
}
"那么我就"+xxx[今天星期几]

---

30.1.5 什么是模块化:

根据每个模块尽可能独立完成自己的功能，不依赖于模块外部的代码原则, 将相关性高的代码放在一个模块. 使得: 程序结构中各模块的内聚程度越高，模块间的耦合程度就越低。

这样的好处:

1. 增加重用性:一个模块可以多次重复使用
2. 最小知识原则: 不需要知道模块的细节, 实现技术. 我只需要知道模块传入的参数,返回的值就好
3. 降低整个系统的复杂度,便于测试, 调试
4. 更改一个模块不会影响到其他模块