一、MVC是什么？
MVC是一种设计模式（那设计模式又是什么呢？简单粗暴的说好用的东西就是设计模式），MVC能够使你的代码更简洁、优美，每个模块都可以写成3个对象，分别是M、V、C。
- M-Model（数据模型），负责操作所有数据
const m = {
data: {
n: parseInt(localStorage.getItem('n'))
},
create(){},
delete(){},
update(data){
Object.assign(m.data,data) //data有什么属性就放到m.data上
eventBus.trigger('m:updated')
localStorage.setItem('n', m.data.n)
},
get(){}
}
- V-view（视图），负责所有UI界面
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}}', n))
.appendTo(v.el)
}
}
- C-Controller（控制器），负责其他事情
const c = {
init(container) {
v.init(container)
v.render(m.data.n) // view = render(data)
c.autoBindEvents()
eventBus.on('m:updated', () => {
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)
}
}
}
这是通过MVC重构后的代码，目前看起来并没有简洁很多，但至少使你的代码不再是面条式的，接下来说说代码中用到的EventBus
二、EventBus（事件总线）
“事件公交车”，公交车为两个不同的地方搭建了桥梁，顾名思义eventbus承载了许多事件，是这些事件通信的桥梁
-
引入EventBus
const eventBus = $(window)
把eventBus打印出来，会发现它就是一个空对象image -
EventBus主要的api有两个，on（监听事件）、trigger（触发事件），当然还有off（取消监听）。
imageimage
触发事件eventBus.trigger('m:updated')，大喊一声“m更新啦”
监听事件eventBus.on('m:updated',()=>{v.render(m.data.n)})，听到后执行事件。
三、表驱动编程
表驱动编程，能从表里面查找信息而不使用逻辑语句。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越复杂，查表法也就愈发显得更具吸引力。
下面这段代码相似性很高，当我们使用表驱动法后
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 #add1' : '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})
}
四、我对模块化的理解
模块化就像是书本中的各章节，使用模块化能够使每块代码条理清楚，独立、互不影响，且发现有错误时便于修改，好的程序猿应该使他的代码分成模块。
