MVC是啥
M-Model昨稼,V-View,C-Controller
- model用于封裝與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)钞钙,以及對(duì)相關(guān)數(shù)據(jù)的處理方法雕蔽。通常會(huì)有數(shù)個(gè)view去監(jiān)聽(tīng)model,一旦model里面的數(shù)據(jù)產(chǎn)生變化讳苦,model就會(huì)通知相應(yīng)的view
Model = {
data: {xxx},
create: {xxx},
delete: {xxx},
get: {xxx},
update(data): {
Object.assign(m.data, data)//替換數(shù)據(jù)
eventBus.trigger('mUpdate')//通知view重新渲染
}
}
- view是在界面上顯示model的當(dāng)前狀態(tài)带膜,當(dāng)model內(nèi)的數(shù)據(jù)產(chǎn)生改變時(shí),view會(huì)重新渲染
View = {
el: xxx,
html: `......`,
init(){
v.el: xxx
},
render(){xxx}//渲染頁(yè)面
}
- controller用于組織不同層面的頁(yè)面鸳谜,用于處理用戶的行為以及改變model的數(shù)據(jù)
Controller = {
init(){
v.init() // 初始化view
v.render() // 第一次渲染
c.autoBindEvents() // 自動(dòng)的事件綁定
eventBus.on('m:update', () => { v.render() }) // 當(dāng)eventBus觸發(fā)'m:update'時(shí)View刷新
},
events:{ 事件以哈希表方式記錄 }膝藕,
method() {
data = 改變后的新數(shù)據(jù)
m.update(data)
},
autoBindEvents() { 自動(dòng)綁定事件 }
}EventBus
EventBus
常見(jiàn)api
- on咐扭,監(jiān)聽(tīng)事件
- trigger芭挽,觸發(fā)事件
- off,取消監(jiān)聽(tīng)
用來(lái)干嘛的
- 用于模塊之間的通信問(wèn)題
- 用于整合應(yīng)用內(nèi)不同模塊的通信接口蝗肪,可以使模塊解耦
表驅(qū)動(dòng)編程
就是使用哈希表存放數(shù)據(jù)袜爪,以替代大量的if else的使用
這種編程思路的好處在于復(fù)雜程度恒定,需要數(shù)據(jù)時(shí)直接對(duì)哈希表進(jìn)行遍歷即可薛闪,在數(shù)據(jù)量龐大的時(shí)候不會(huì)明顯增加代碼的復(fù)雜程度
模塊化編程
- 使用模塊化編程可以讓整份代碼看起來(lái)更加清晰辛馆,每個(gè)模塊各司其職,耦合度低
- 修改的時(shí)候不容易牽一發(fā)而動(dòng)全身豁延,如果還是改一個(gè)地方而其他意想不到的地方出錯(cuò)了昙篙,就是模塊化沒(méi)有做好:(
- 重復(fù)的代碼可以直接封裝成模塊,可以提高代碼的復(fù)用性诱咏,便于維護(hù)