MVC是啥
M-Model,V-View,C-Controller
- model用于封装与应用程序的业务逻辑相关的数据,以及对相关数据的处理方法。通常会有数个view去监听model,一旦model里面的数据产生变化,model就会通知相应的view
Model = {
data: {xxx},
create: {xxx},
delete: {xxx},
get: {xxx},
update(data): {
Object.assign(m.data, data)//替换数据
eventBus.trigger('mUpdate')//通知view重新渲染
}
}
- view是在界面上显示model的当前状态,当model内的数据产生改变时,view会重新渲染
View = {
el: xxx,
html: `......`,
init(){
v.el: xxx
},
render(){xxx}//渲染页面
}
- controller用于组织不同层面的页面,用于处理用户的行为以及改变model的数据
Controller = {
init(){
v.init() // 初始化view
v.render() // 第一次渲染
c.autoBindEvents() // 自动的事件绑定
eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
},
events:{ 事件以哈希表方式记录 },
method() {
data = 改变后的新数据
m.update(data)
},
autoBindEvents() { 自动绑定事件 }
}EventBus
EventBus
常见api
- on,监听事件
- trigger,触发事件
- off,取消监听
用来干嘛的
- 用于模块之间的通信问题
- 用于整合应用内不同模块的通信接口,可以使模块解耦
表驱动编程
就是使用哈希表存放数据,以替代大量的if else的使用
这种编程思路的好处在于复杂程度恒定,需要数据时直接对哈希表进行遍历即可,在数据量庞大的时候不会明显增加代码的复杂程度
模块化编程
- 使用模块化编程可以让整份代码看起来更加清晰,每个模块各司其职,耦合度低
- 修改的时候不容易牵一发而动全身,如果还是改一个地方而其他意想不到的地方出错了,就是模块化没有做好:(
- 重复的代码可以直接封装成模块,可以提高代码的复用性,便于维护