一 、MVC的三个对象
- Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑,在数据变化时更新控制器。
- View(视图) - 视图代表模型包含的数据的可视化。
- Controller(控制器) - 控制器作用于模型和视图上。它控制数据流向模型对象,并在数据变化时更新视图。它使视图与模型分离开。
- Model代码,所有和数据相关的都放在这里
class Model={
data(){}
create(){}
remove(){}
update(){}
get(){}
}
- View代码,所有能看得到的都放这里(这个和著名的vue框架很相似)
class View={
el:
html:
init(){
v.el:
},
render(){
}
}
- Controller代码,乱七八糟的业务放在这里,它是干活的
class Controller {
init() {}
events
bindEvent() {}
}
二、EventBus 的API
有三个API:
- on监听事件
- off取消监听
- trigger(emit)触发事件
eventBus.on("m:updated", () => {
v.render(m.data.n);
});
eventBus.trigger('m:updated')
eventBus.off(eventName)
作用:实现模块之间的通信
三、表驱动编程
表驱动法就是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。 说的其实就是利用哈希表将重要信息存储,想要的东西通过哈希表来查找,可以减少大量的if…else…switch语句,就是用来减少代码的,信息较多时,这种方法拥有更稳定的复杂度,信息越多就越有优势
例如给四个按钮,分别有加一,减一,乘二,除二的功能
bindEvents(){
v.el.on('click','#add1',()=>{
m.data.n +=1
v.render(m.data.n)
})
v.el.on('click','#minus1',()=>{
m.data.n-=1
v.render(m.data.n)
})
v.el.on('click','#mul2',()=>{
m.data.n*=2
v.render(m.data.n)
})
v.el.on('click','#divide2',()=>{
m.data.n/=2
v.render(m.data.n)
})
}
events:{
'click #aa1':'add',
'click #minus1':'minus',
'click #mul2':'mul',
'click #divide2':'div'
},
add(){
m.update( data: {n:m.data.n +1})
},
minus(){
m.update( data:{n:m.data.n -1})
},
mul(){
m.update( data: {n:m.data.n *2})
},
div(){
m.update(data: {n:m.data.n /2})
}
四、模块化
就是编程中的高内聚低耦合,模块之间尽量减少联系,必要时可以引入中间模块来降低耦合 使用模块化使得代码容易合成,容易维护,做一个大的项目时通常是几个人同时负责,一人负责一个或者几个模块,互不干扰,也能够提高代码重用率,其他项目中有同样或者相似的模块直接拿过来,毕竟它和其他模块没多大关系,其实一个大项目就像拼装奥特曼一样,一块一块的。
|