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)分為三個基本部分：模型（Model）肥印、視圖（View）和控制器（Controller）。
- Model 數(shù)據(jù)管理吮螺，主要負(fù)責(zé)和服務(wù)器進(jìn)行交互。將請求到的數(shù)據(jù)傳給Controller凿试。
- View 負(fù)責(zé)用戶界面沛膳，HTML 渲染。
- Controller 負(fù)責(zé)監(jiān)聽并處理View 的事件酬荞，更新和調(diào)用 Model；也負(fù)責(zé)監(jiān)聽 Model的變化（Model從服務(wù)器獲得數(shù)據(jù)）瞧哟，并更新 View混巧。Controller 控制其他所有流程。
畫圖來理解：
MVC.png
Model 和服務(wù)器交互勤揩，Model 將得到的數(shù)據(jù)交給 Controller咧党，Controller 把數(shù)據(jù)填入 View，并監(jiān)聽 View
用戶操作 View陨亡，如點(diǎn)擊按鈕傍衡，Controller 就會接受到點(diǎn)擊事件，Controller 這時會去調(diào)用 Model负蠕，Model 會與服務(wù)器交互蛙埂，得到數(shù)據(jù)后返回給 Controller，Controller 得到數(shù)據(jù)就去更新 View
MVC模式的優(yōu)點(diǎn)
就我的理解來說遮糖，MVC模式有這些好處：
- 低耦合性绣的。
每層各司其職，比如只需要改變視圖層而不需要重新編譯模型和控制器代碼欲账，改代碼不用在各個部分改屡江，只需要改變某部分的代碼。 - 方便維護(hù)和修改敬惦。
視圖層、數(shù)據(jù)層和業(yè)務(wù)邏輯層分開谈山，結(jié)構(gòu)清晰好理解俄删。 - 大大提高代碼的可重用性。
比如用不同的視圖層訪問模型的數(shù)據(jù)奏路，只要在控制器層對數(shù)據(jù)格式做處理畴椰，而不需要修改模型層的代碼。
重要屬性和方法
舉例說明 MVC 三個對象分別有哪些重要屬性和方法：
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的庫來做留言板的功能鸽粉。
- 另外這段代碼使用了立即執(zhí)行函數(shù)和閉包斜脂，可見我的另一篇博客(立即執(zhí)行函數(shù)和閉包的使用)詳解。
