一疼蛾、MVC是什么踱卵？
MVC是一種設計模式（那設計模式又是什么呢？簡單粗暴的說好用的東西就是設計模式），MVC能夠使你的代碼更簡潔惋砂、優(yōu)美，每個模塊都可以寫成3個對象绳锅，分別是M西饵、V、C鳞芙。
- M-Model（數(shù)據(jù)模型）眷柔，負責操作所有數(shù)據(jù)
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打印出來歼秽，會發(fā)現(xiàn)它就是一個空對象
eventBus -
EventBus主要的api有兩個，on（監(jiān)聽事件）、trigger（觸發(fā)事件）宋雏，當然還有off（取消監(jiān)聽）。
eventBus.on燕垃，eventBus.off
eventBus.trigger
觸發(fā)事件eventBus.trigger('m:updated')箭券，大喊一聲“m更新啦”
監(jiān)聽事件eventBus.on('m:updated',()=>{v.render(m.data.n)})，聽到后執(zhí)行事件狸涌。
三切省、表驅(qū)動編程
表驅(qū)動編程，能從表里面查找信息而不使用邏輯語句杈抢。事實上数尿，凡是能通過邏輯語句來選擇的事物，都可以通過查表來選擇惶楼。對簡單的情況而言右蹦，使用邏輯語句更為容易和直白。但隨著邏輯鏈的越來越復雜歼捐，查表法也就愈發(fā)顯得更具吸引力何陆。
下面這段代碼相似性很高，當我們使用表驅(qū)動法后
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)
})
}
將事件提取出一個哈希表豹储，使邏輯和數(shù)據(jù)清晰明了的分離開贷盲。
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})
}
四、我對模塊化的理解
模塊化就像是書本中的各章節(jié)，使用模塊化能夠使每塊代碼條理清楚巩剖，獨立铝穷、互不影響，且發(fā)現(xiàn)有錯誤時便于修改佳魔，好的程序猿應該使他的代碼分成模塊曙聂。
