MVC是一种架构设计的模式,它包括三类对象分别是
- Model模型:用于封装,一般有一个或多个视图来监听model,当model变化会通知相关的view。
- View视图:对html的渲染,用来描绘model的当前状态,当model数据变化,视图view也会刷新。
- Controller控制器:面对用户输入的响应方式,用来控制应用程序的流程,处理用户行为和数据model上的改变。
用代码分别表示为
- Model模型
//数据相关放入m
const m ={
data:{
n:parseInt(localStorage.getItem('n'))
},
create(){},
delete(){},
update(data){
Object.assign(m.data,data)
eventBus.trigger('m:update')
localStorage.setItem('n',m.data.n)
},
get(){}
}
- View视图
const v = {
el:null,
html:`
<div>
<div class="output">
<span id="number">{{n}}</span>
</div>
<div class="actions">
<button id="add1">+1</button>
<button id="minus1">-1</button>
<button id="mul2">*2</button>
<button id="divide2">÷2</button>
</div>
</div>
`,
init(container){
v.el = $(container)
},
render(n){
if(v.el.children.length !==0) v.el.empty()
$(v.html.replace(('{{n}}'mn))
.appendTo(v.el)
}
}
- Controller控制器
const c = {
init(container) {
v.init(container)
v.render(m.data.n)
c.autoBindEvents()
eventBus.on('m:updated', () => {
console.log('here')
v.render(m.data.n)
})
},
events: {
'click #add1': 'add',
'click #minus1': 'minus',
'click #mul2': 'mul',
'click #divide2': 'div',
},
add() {
m.update({n: m.data.n + 1})
},
minus() {
m.update({n: m.data.n - 1})
},
mul() { m.update({n: m.data.n * 2})
},
div() { m.update({n: m.data.n / 2})
},
autoBindEvents() {
for (let key in c.events) {
const value = c[c.events[key]]
const spaceIndex = key.indexOf(' ')
const part1 = key.slice(0, spaceIndex)
const part2 = key.slice(spaceIndex + 1)
v.el.on(part1, part2, value)
}
}
}
EventBus
eventbus主要负责对象间通信,提供了on、off和trigger等API,on用于监听,trigger用于触发事件。eventBus 可以满足最小知识原则,m 和 v 互相不知道对方的细节,但是却可以调用对方的功能。代码如下
// eventBus触发事件
eventBus.trigger('m:updated')
// eventBus监听事件
eventBus.on('m:updated',()=> {
v.render(m.data.n)
})
// eventBus移除事件
eventBus.off('m:updated',()=>{
v.render(m.data.n)
})
表驱动编程
表驱动编程就是通过一种数据结构哈希表来优化代码,使代码不那么冗长,从而达到模块化的处理。
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];
模块化
代码模块化有效的避免的代码重复,每个模块都能实现特定的功能,代码直接互相不干扰但却可以通过一些方法互相调用,出现错误也能更快确定是哪一模块出现错误,方便后期维护。