1. MVC 三個(gè)對(duì)象
MVC即 Model+View+Controller 完慧，其中
- M-Model數(shù)據(jù)模型：負(fù)責(zé)操作所有數(shù)據(jù)
//示例
let Model={
data:{數(shù)據(jù)源},
create:{增加數(shù)據(jù)},
delete:{刪除數(shù)據(jù)},
update(data){
Object.assign(m.data,data)//用新數(shù)據(jù)替換舊數(shù)據(jù)
eventBus.trigger('m:update')//eventBus觸發(fā)'m:update'信息谋旦，通知View刷新界面
},
get:{獲取數(shù)據(jù)}
}
- V-View視圖：負(fù)責(zé)所有UI界面
//示例
let View={
el:要刷新的元素，
html：'要顯示在頁(yè)面上的內(nèi)容'
init(){
v.el:需要刷新的元素
}屈尼，
render(){
刷新頁(yè)面
}
}
- C-Controller控制器：負(fù)責(zé)其他
//示例
let Controller={
init(){
v.init()//初始化View
v.render()//第一次渲染頁(yè)面
c.autoBindEvents()//自動(dòng)的事件綁定
eventBus.on('m:update',()=>{v.render()}//當(dāng)enentsBus觸發(fā)'m:update'是View刷新
}册着，
events:{事件以哈希表的方式記錄存儲(chǔ)},
method(){
data=新數(shù)據(jù)
m.update(data)
},
autoBindEvents(){自動(dòng)綁定事件}
}
2.EventBus 有哪些 API，是做什么用的脾歧，給出偽代碼示例
EventBus基本的api有on（監(jiān)聽事件）甲捏，trigger(emit)（觸發(fā)事件）,off（取消監(jiān)聽）方法。
用于模塊間的通訊鞭执，view組件層面司顿，父子組件、兄弟組件通信都可以使eventbus處理
//EventBus.js
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()
3.表驅(qū)動(dòng)編程是做什么的
表驅(qū)動(dòng)法是一種編程模式兄纺，從表(哈希表)里面查找信息而不是使用邏輯語(yǔ)句（if…else…switch大溜，可以減少重復(fù)代碼，只將重要的信息放在表里估脆，然后利用表來(lái)編程钦奋，與邏輯語(yǔ)句相比較有著更穩(wěn)定的復(fù)雜度
下面這段代碼相似性很高，當(dāng)我們使用表驅(qū)動(dòng)法后
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)
})
}
將事件提取出一個(gè)哈希表，使邏輯和數(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})
}
上面的這種利用表格關(guān)系的代碼就等價(jià)于我們一開始的代碼付材，但是這種邏輯結(jié)構(gòu)更清晰
4.我是如何理解模塊化的
- 當(dāng)一個(gè)html文件需要實(shí)現(xiàn)多個(gè)功能的時(shí)候朦拖，我們可以把每個(gè)功能抽象成一個(gè)模塊，針對(duì)每一個(gè)功能開發(fā)不同的模塊厌衔，這使得模塊可以獨(dú)立開發(fā)贞谓，在工作中，不同的模塊也就可以交由不同的開發(fā)人員葵诈。
- 而且在開發(fā)中我們也會(huì)用到一些共同API，這個(gè)時(shí)候我們也可以把這些抽離成一個(gè)公用模塊祟同，當(dāng)需要引用這個(gè)函數(shù)或者功能的時(shí)候作喘，只需要在相應(yīng)的模塊里面用import導(dǎo)入相應(yīng)的包。
- so模塊化開發(fā)是一種管理方式晕城，是一種生產(chǎn)方式泞坦，一種解決問(wèn)題的方案，一個(gè)模塊就是實(shí)現(xiàn)特定功能的文件砖顷，有了模塊贰锁，我們就可以更方便地使用別人的代碼，想要什么功能滤蝠，就加載什么模塊
- 模塊化可以降低代碼耦合度豌熄，減少重復(fù)代碼，提高代碼重用性物咳，并且在項(xiàng)目結(jié)構(gòu)上更加清晰锣险，便于維護(hù)。
- 模塊功能主要由兩個(gè)命令構(gòu)成：export和import览闰，export命令用于規(guī)定模塊的對(duì)外接口芯肤，import命令用于輸入其他模塊提供的功能
- 一般來(lái)說(shuō)，一個(gè)模塊就是一個(gè)獨(dú)立的文件压鉴，該文件內(nèi)部的所有變量崖咨，外部無(wú)法獲取，如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量油吭，就必須使用export關(guān)鍵字輸出該變量
1击蹲、export
模塊功能主要由兩個(gè)命令構(gòu)成：export和import，export命令用于規(guī)定模塊的對(duì)外接口上鞠，import命令用于輸入其他模塊提供的功能
一般來(lái)說(shuō)际邻，一個(gè)模塊就是一個(gè)獨(dú)立的文件，該文件內(nèi)部的所有變量芍阎，外部無(wú)法獲取世曾，如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量
2、import
import命令接受一對(duì)大括號(hào)轮听，里面指定要從其他模塊導(dǎo)入的變量名骗露。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊對(duì)外接口的名稱相同
關(guān)于import其實(shí)還有很多用法血巍，具體的大家可以查看相關(guān)的文檔
3萧锉、import與import
通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }述寡，export default則不需要
在一個(gè)文件或模塊中柿隙，export、import可以有多個(gè)鲫凶，export default僅能有一個(gè)
