浅析MVC

102 阅读2分钟

MVC 是一种软件设计模式。

M - Model(数据模型)负责操作所有数据

// 数据相关都放到m
const m = {
  data: {},
  create() {},//增
  delete() {},//删
  update(data) {},//改
  get() {}//查
}

复制代码

V - View(视图)负责所有 UI 界面

// 视图相关都放到v
const v = {
  el: null,
  html: `代码`,
  init(container) {
    v.el = $(container)
  },
  render(n) {}
}

复制代码

C - Controller(控制器)是连接视图和模型桥梁,处理业务逻辑操作,它处理事件并作出响应

const c = {
  init(container) {},
  events: {},
  add() {},
  autoBindEvents() {}
}
复制代码

2. EventBus 有哪些 API,是做什么用的

eventBus 主要用于对象间通信。使用 eventBus 可以满足最小知识原则,m 和 v 互相不知道对方的细节,但是却可以调用对方的功能

EventBus中常用API分别是:on、trigger、off

on:用来监听事件

this.on('m:updated', () => {
      this.render(this.data)
    })

trigger:用来自动触发事件

update(data) { Object.assign(m.data, data)//把传进来的data直接放在m.data上
eventBus.trigger('m:updated')//通过trigger自动更新数据 
localStorage.setItem('n', m.data.n)//储存数据

off:用来取消绑定事件

3.表驱动编程是做什么的?

表驱动编程是解决大量重复的代码,在进行重构时都会用数据结构里面哈希表以字符串的形式来存储重复的数据,需要用到里面的数据时,就遍历哈希表,根据 key 得到需要的数据。

getweek(value){  
this.dayOfWeek = value;  
if(this.dayOfWeek == 1){  
this.Week = "星期一";  
}else if(this.dayOfWeek == 2){  
this.Week = "星期二";  
}else if(this.dayOfWeek == 3){  
this.Week = "星期三";  
}else if(this.dayOfWeek == 4){  
this.Week = "星期四";  
}else if(this.dayOfWeek == 5){  
this.Week = "星期五";  
}else if(this.dayOfWeek == 6){  
this.Week = "星期六";  
}else if(this.dayOfWeek == 0){  
this.Week = "星期日";  
}  
}

// 表驱动方法

let weekdayMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];     
this.Week = weekdayMap[value]; 

4. 模块化是什么

模块化可以降低代码耦合度,使得项目结构清晰,便于维护。当代码简单时体现不出来,但是当代码逻辑复杂时,模块化是必须的。

把负责不同功能的代码分块,这样修改重构时很轻松能找到对应的代码,如果不使用模块化思想,全部丢在一起,可能两天之后看自己的代码都不知道在写什么了。