引言：認真學習了下廣義MVC模式下前端怎么寫，狹義的MVC其實是有一個變化過程：MVC MVP MVVM，網上看了很多的關於這方面的介紹，以前總是將視圖數據邏輯寫一個模塊，最近嘗試分開並用組件式的開發的方式...
MVC
MVC是模型(Model)－視圖(View)－控制器(Controller)的縮寫，是設計模式中最常用的軟件架構。
視圖（View）：用戶界面。
控制器（Controller）：業務邏輯
模型（Model）：數據保存
所有方式都是單向通信：
- View 接受用戶交互請求
- View 將請求轉交給Controller處理
- Controller 操作Model進行數據更新保存
- 數據更新保存之后，Model會通知View更新
- View 更新變化數據使用戶得到反饋
MVC簡化模型
//頁面加載后創建MVC對象
$(function(){
//創建MVC對象
var MVC=MVC||{}；
//初始化MVC數據模型層
MVC.model=function(){}();
//初始化MVC視圖層
MVC.view=function(){}();
//初始化MVC控制器層
MVC.controller=function(){}();
});
- MVC數據模型層
//MVC數據模型層
MVC.model=function(){
//內部數據對象
var M={};
//服務器端獲取數據，通常通過Ajax獲取並存儲
M.data={};
//配置數據
M.config={};
return {
//獲取服務器端數據
getData:function(m){
return M.data[m];
},
//獲取配置數據
getConfig:function(c){
//根據數據字段獲取數據
return M.config[c]
},
//設置服務器數據
setData:function(m,v){
M.data[m]=v;
return this;
},
//設置配置數據
setConfig:function(c,v){
M.data[c]=v;
return this;
}
};
}();
- MVC視圖層
//MVC視圖層
MVC.view=function(){
//模型數據層對象操作方法引用
var M=MVC.model;
//內部視圖創建方法對象
var V={};
//獲取視圖的接口方法
return function(v){
//根據視圖名詞返回視圖
V[v]();
}
}();
- MVC控制器層
//MVC控制器層
MVC.controller=function(){
//模型數據層對象操作方法引用
var M=MVC.model;
//視圖數據層對象操作方法引用
var V=MVC.view;
//控制器創建方法對象
var C={};
}();
MVP
MVP是Model-View-Presenter，即將MVC中的控制器Controller換成了Presenter負責邏輯的處理。
MVC和MVP的區別是：在MVP中View並不直接使用Model，它們之間的通信是通過Presenter (MVC中的Controller)來進行的，所有的交互都發生在Presenter內部，而在MVC中View會直接從Model中讀取數據而不是通過 Controller。
各部分之間都是雙向通信：
- View 接收用戶交互請求
- View 將請求轉交給 Presenter
- Presenter 操作Model進行數據更新
- Model 通知Presenter數據發生變化
- Presenter 更新View數據
MVVM
MVVM是Model-View-ViewModel，和MVP的區別在於Presenter換成了ViewModel負責邏輯處理。
MVVM的優點是低耦合、可重用性、獨立開發。
雙向綁定（data-binding）：
- View 接收用戶交互請求
- View 將請求轉交給ViewModel
- ViewModel 操作Model數據更新
- Model 更新完數據，通知ViewModel數據發生變化
- ViewModel 更新View數據
后面會詳細介紹MVVM的設計模式架構，同時會有針對於react和vue之類MVVM框架的原理。
參考文章：