MVC 三個對象分別做什么
每個模塊都可以寫成三個對象饥脑，分別是M、V懦冰、C
- M（Model:數(shù)據(jù)模型）: 負責操作所有的數(shù)據(jù)
- V（View:視圖）: 負責所有的UI界面
- C（Controller:控制器）: 負責其他
現(xiàn)在給出一個需求：給一個初始數(shù)字，然后用戶可以進行+谣沸、-刷钢、*、/的相關(guān)操作乳附，來看下MVC三個對象在代碼中的具體實現(xiàn)
- M對象操作所有的數(shù)據(jù)
數(shù)據(jù)相關(guān)都放到m,（采用偽代碼内地，理解思路即可）
const m = {
data: {數(shù)據(jù)A},
create() {},
delete() {},
update(data) {
Object.assign(m.data,data)//用新數(shù)據(jù)替換舊數(shù)據(jù)
eventBus.trigger('m:update')//eventBus觸發(fā)'m:update'信息，通知View刷新界面
},
get() {數(shù)據(jù)A}
}
- V對象負責所有的UI界面
視圖相關(guān)都放到v赋除，代碼如下：
const v = {
el: 需要刷新的元素,
html: `
body里面的內(nèi)容
`,
init(container) {
v.el = $(container)
},
render(n) {刷新頁面}
}
- C對象負責其他
其他都放到c對象中阱缓，代碼如下：
const c = {
init(container) {
v.init()//初始化View
v.render()//第一次渲染頁面
c.autoBindEvents()//自動的事件綁定
eventBus.on('m:update',()=>{v.render()}//當enentsBus觸發(fā)'m:update'是View刷新
},
events: {事件 }, //事件以哈希表的方式記錄存儲
add() {+具體實現(xiàn)},
minus() {-具體實現(xiàn)},
mul() {*具體實現(xiàn)},
div() {/具體實現(xiàn)},
autoBindEvents() {自動綁定事件}
}
EventBus 有哪些 API，是做什么用的
什么是EventBus?
簡單的說举农，就是一個以事件為驅(qū)動的消息服務(wù)總線Web平臺運行期為什么要用EventBus荆针？
便于業(yè)務(wù)邏輯解耦
提供豐富的擴展點，包括前擴展颁糟、后擴展和覆蓋
使用事件驅(qū)動航背，讓事件觸發(fā)更加清晰
讓代碼更加簡潔清楚Web平臺運行期在那些地方使用了EventBus？
業(yè)務(wù)邏輯調(diào)度中心棱貌，包括前端玖媚、Web服務(wù)端任何地方
通過EventBus集成各種超類、模板婚脱、頁面
通過EventBus集成各種系統(tǒng)服務(wù)與業(yè)務(wù)組件EventBus 有哪些 API?
on : 監(jiān)聽事件
trigger(emit) : 觸發(fā)事件
off : 取消監(jiān)聽
class EventBus {
constructor() {
this._eventBus = $(window)
}
on(eventName, fn) {
return this._eventBus.on(eventName, fn)
}
trigger(eventName, data) {
return this._trigger.trigger(eventName, data)
}
off(eventName, fn) {
return this._eventBus.off(eventName, fn)
}
}
export default EventBus
//new.js
import EventBus from 'EventBus.js'
const e = new EventBus()
e.on()
e.trigger()
e.off()
表驅(qū)動編程是做什么的
表驅(qū)動編程方法是一種使你可以在表中查找信息今魔，而不必用很多的邏輯語句（if或Case）來把它們找出來的方法勺像。在簡單的情況下，邏輯語句往往更簡單而且更直接错森。但隨著邏輯鏈的復雜吟宦，復雜度也會越來越高。表就可以減少重復代碼问词，只將重要的信息放在表里督函，然后利用表來編程，與邏輯語句相比較有著更穩(wěn)定的復雜度激挪。
以下兩段代碼進行對比即可發(fā)現(xiàn)用表驅(qū)動編程方法可以使代碼變得更為簡潔辰狡。
- 沒有使用表驅(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)
})
}
- 運用了表驅(qū)動編程的代碼（將事件提取出一個哈希表，使邏輯和數(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})
}
會發(fā)現(xiàn)通過表驅(qū)動編程之后代碼邏輯變的更為清晰簡潔了垄分。
【擴展】
我是如何理解模塊化的宛篇？
- 代碼模塊化之后無論是代碼的整體性還是后期進行代碼維護都變的清晰簡單了起來。例如與邏輯相關(guān)的代碼統(tǒng)一放到JS文件中薄湿，與視圖相關(guān)的統(tǒng)一放到html文件中叫倍，與樣式相關(guān)的統(tǒng)一放到css文件中。
- 業(yè)務(wù)模塊化之后可以使業(yè)務(wù)流程更為清晰豺瘤，便于開展工作吆倦，各個業(yè)務(wù)模塊之間負責自己模塊的業(yè)務(wù)，也避免了一些不必要的麻煩坐求，使得工作的效率也會更高蚕泽。
- 模塊化我覺得是一種高效的思想，這在編程過程中提供了一種優(yōu)化代碼以及重構(gòu)代碼的方向桥嗤。
與模塊相關(guān)的兩個命令
一般來說须妻，一個模塊就是一個獨立的文件，該文件內(nèi)部的所有變量泛领，外部無法獲取荒吏，如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export命令輸出該變量渊鞋，使用import命令輸入其他模塊提供的功能绰更。
