title: JavaScript中的MVC設(shè)計(jì)模式
date: 2018-10-10 10:46:58
tags: [JavaScript]
categories: JavaScript
JavaScript中的MVC
MVC模式（Model–view–controller）是一種設(shè)計(jì)模式（或者軟件架構(gòu)），把系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）和控制器（Controller）。
- Model 數(shù)據(jù)管理，主要負(fù)責(zé)和服務(wù)器進(jìn)行交互。將請(qǐng)求到的數(shù)據(jù)傳給Controller。
- View 負(fù)責(zé)用戶界面，HTML 渲染。
- Controller 負(fù)責(zé)監(jiān)聽(tīng)并處理View 的事件，更新和調(diào)用 Model；也負(fù)責(zé)監(jiān)聽(tīng) Model的變化（Model從服務(wù)器獲得數(shù)據(jù)），并更新 View。Controller 控制其他所有流程。
畫(huà)圖來(lái)理解：
MVC.png
Model 和服務(wù)器交互，Model 將得到的數(shù)據(jù)交給 Controller，Controller 把數(shù)據(jù)填入 View，并監(jiān)聽(tīng) View
用戶操作 View，如點(diǎn)擊按鈕，Controller 就會(huì)接受到點(diǎn)擊事件，Controller 這時(shí)會(huì)去調(diào)用 Model，Model 會(huì)與服務(wù)器交互，得到數(shù)據(jù)后返回給 Controller，Controller 得到數(shù)據(jù)就去更新 View
MVC模式的優(yōu)點(diǎn)
就我的理解來(lái)說(shuō)，MVC模式有這些好處：
- 低耦合性。
每層各司其職，比如只需要改變視圖層而不需要重新編譯模型和控制器代碼，改代碼不用在各個(gè)部分改，只需要改變某部分的代碼。 - 方便維護(hù)和修改。
視圖層、數(shù)據(jù)層和業(yè)務(wù)邏輯層分開(kāi)，結(jié)構(gòu)清晰好理解。 - 大大提高代碼的可重用性。
比如用不同的視圖層訪問(wèn)模型的數(shù)據(jù)，只要在控制器層對(duì)數(shù)據(jù)格式做處理，而不需要修改模型層的代碼。
重要屬性和方法
舉例說(shuō)明 MVC 三個(gè)對(duì)象分別有哪些重要屬性和方法：
var model = {
data: null,
init(){}
fetch(){}
save(){}
update(){}
delete(){}
}
view = {
init() {}
template: '<h1>hi</h1'>
}
controller = {
view: null,
model: null,
init(view, model){
this.view = view
this.model = model
this.bindEvents()
}
render(){
this.view.querySelector('name').innerText = this.model.data.name
},
bindEvents(){}
}
具體例子
代碼鏈接：https://github.com/yuyuye958/resume/blob/master/js/message.js
這段代碼實(shí)現(xiàn)使用leanCloud的庫(kù)來(lái)做留言板的功能。
- 另外這段代碼使用了立即執(zhí)行函數(shù)和閉包，可見(jiàn)我的另一篇博客(立即執(zhí)行函數(shù)和閉包的使用)詳解。
