MVC

1.MVC

• 模型（Model）：数据保存
• 视图（View）：用户界面。
• 控制器（Controller）：业务逻辑

伪代码示例：

const m={
  data:n
}
//////////////////
const v={
  html:m.data
  render()
}
/////////////////
const c={
 click:m.data+=1
}
v.render(v.html)//初始化页面
c.click//点击+1
v.render(v.html)//data更新后再次渲染页面

2.EventBus

EventBus用于对象间通信

常用API：

const EventBus=jquery({window})
EventBus.on()
EventBus.trigger()
EventBus.off()

伪代码示例：

const EventBus=jquery({window})
const m = {
  data:n
  update(data) {
    EventBus.trigger("data:updated")
  }
}
//////////////////////////////////
const v={
    html:m.data
    render(x)
}
//////////////////////////////////
const c={
  EventBus.on("data:updated", () => {
    v.render(m.data);
    EventBus.off("data:updated")
  }
  init:m.update(data)
}
c.init()
//1.初始化数据
//2.触发"data:updated"
//3.绑定"data:updated"事件，执行v.render(m.data)
//4.解绑"data:updated"事件
//以此实现了m、v、c的通信

3.表驱动编程

要点：

• 一种编程模式
• 简化代码，减少重复代码
• 从表里面查找信息而不使用逻辑语句
• 适用于逻辑链复杂的场景

示例：创建返回每月天数的函数(忽略闰年)

使用if else：

function getDays(month) {
  let days;
  if(month===1) {days = 31}
  else if(month===2) {days = 28}
  else ifmonth===3) {days = 31}
  else if(month===4) {days = 30}
  else if(month===5) {days = 31}
  else if(month===6) {days = 30}
  else if(month===7) {days = 31}
  else if(month===8) {days = 31}
  else if(month===9) {days = 30}
  else if(month===10) {days = 31}
  else if(month===11) {days = 30}
  else if(month===12) {days = 31}
  return days;
}

使用表驱动编程：

const days=  [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
const getDays=(month)=>{
    return days[month-1]
}

4.模块化

优点：

• 相互独立的实现特定功能
• 提高代码的可读性、可扩展性、复用性
• 多个js文件相互独立，方便维护
• 不会污染全局变量

流程：

1. 导出模块

export default x

2. 导入模块

import x from "./1.js";

3. 引用模块

x()