一、MVC是什么？
MVC是一種設(shè)計模式（那設(shè)計模式又是什么呢？簡單粗暴的說好用的東西就是設(shè)計模式）脊串，MVC能夠使你的代碼更簡潔、優(yōu)美蓖救，每個模塊都可以寫成3個對象洪规，分別是M、V循捺、C斩例。
- M-Model（數(shù)據(jù)模型），負責(zé)操作所有數(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（視圖）从橘，負責(zé)所有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（控制器）念赶，負責(zé)其他事情
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重構(gòu)后的代碼础钠，目前看起來并沒有簡潔很多，但至少使你的代碼不再是面條式的叉谜，接下來說說代碼中用到的EventBus
二旗吁、EventBus（事件總線）
“事件公交車”，公交車為兩個不同的地方搭建了橋梁停局，顧名思義eventbus承載了許多事件很钓，是這些事件通信的橋梁
-
引入EventBus
const eventBus = $(window)
把eventBus打印出來，會發(fā)現(xiàn)它就是一個空對象image -
EventBus主要的api有兩個董栽，on（監(jiān)聽事件）码倦、trigger（觸發(fā)事件），當(dāng)然還有off（取消監(jiān)聽）锭碳。
imageimage
觸發(fā)事件eventBus.trigger('m:updated')袁稽，大喊一聲“m更新啦”
監(jiān)聽事件eventBus.on('m:updated',()=>{v.render(m.data.n)})，聽到后執(zhí)行事件擒抛。
三推汽、表驅(qū)動編程
表驅(qū)動編程，能從表里面查找信息而不使用邏輯語句歧沪。事實上歹撒，凡是能通過邏輯語句來選擇的事物，都可以通過查表來選擇诊胞。對簡單的情況而言栈妆，使用邏輯語句更為容易和直白。但隨著邏輯鏈的越來越復(fù)雜厢钧，查表法也就愈發(fā)顯得更具吸引力。
下面這段代碼相似性很高嬉橙，當(dāng)我們使用表驅(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)有錯誤時便于修改，好的程序猿應(yīng)該使他的代碼分成模塊粪滤。
