這里的MVC 是一種設(shè)計模式欢揖，它將應(yīng)用劃分為 3 個部分 ：
數(shù)據(jù)（model）、展現(xiàn)層（view）和用戶交互層（control）玉凯。
相信大家都知道在不用任何庫和框架寫原生的前端代碼的時候势腮，很多大牛都提倡將HTML（結(jié)構(gòu)層）、CSS（表現(xiàn)層）漫仆、JavaScript(交互層)分離開來捎拯，目的是更好的維護代碼。雖然我們這里的MVC模式和上面的前端代碼分層邏輯完全不一樣盲厌，但是小編覺得其實從某種宏觀的角度來它們的本質(zhì)都是為了更好的維護代碼(解耦玄渗、復(fù)用...)，讓其他小伙伴更容易閱讀狸眼。
1.從聊天的例子說起
這里我們舉一個網(wǎng)頁版的微信發(fā)消息的例子說起藤树，當我們給別人發(fā)消息的時候到展示是這樣的：
- 用戶提交一條新的聊天消息（按下發(fā)送的那一剎那）
- 控制器(control)的事件處理器被觸發(fā)
- 控制器(control)創(chuàng)建了一個新的聊天模型記錄
- 然后控制器更新視圖(聊天對話框)
- 用戶在窗口就可以看到新的聊天消息
下面我們將上面的聊天例子簡單的總結(jié)下就是這樣的一個過程
- 用戶和應(yīng)用產(chǎn)生交互。
- 控制器的事件處理器被觸發(fā)拓萌。
- 控制器從模型中請求數(shù)據(jù)岁钓，并將其交給視圖。
- 視圖將數(shù)據(jù)呈現(xiàn)給用戶。
我們可以不用類庫或者框架就可以實現(xiàn)這種MVC的架構(gòu)模式屡限，重點是需要將MVC的每一個部分按照職能劃分清晰品嚣，使其保持良好的解耦。我們可以對每一個部分進行獨立的開發(fā)钧大、測試和維護
2翰撑、模型(model)
模型是用來存放所有應(yīng)用數(shù)據(jù)的對象的。如當我們有一個User模型啊央，用來存放用戶的列表眶诈、他們的屬性以及所有與模型有關(guān)的邏輯。當控制器(control)從服務(wù)器中抓取數(shù)據(jù)或創(chuàng)建新的記錄時瓜饥，它就會將數(shù)據(jù)包裝成模型實例
模型不必知道視圖和控制器的細節(jié)逝撬，模型只需要包含數(shù)據(jù)及直接和這些數(shù)據(jù)相關(guān)的邏輯，其他任何的事件處理代碼乓土、視圖模板宪潮、以及和模型無關(guān)的邏輯都應(yīng)該隔離在模型之外，將模型和視圖代碼混淆在一起是違反MVC的設(shè)計原則的趣苏。
3狡相、視圖
視圖層是展示給用戶的，用戶可與之產(chǎn)生交互食磕。在JavaScript應(yīng)用中尽棕，視圖大多由HTML、CSS芬为、JavaScript模板組成萄金。除了簡單的條件語句外蟀悦，視圖不應(yīng)當包含任何其他邏輯媚朦。
實際上，和模板類似日戈，視圖也可以從其他的應(yīng)用中解耦出來询张。視圖不必去知曉模型和控制器的所有細節(jié)，它們是相互獨立的浙炼。
4份氧、控制器
控制器作為模型和視圖之間的紐帶。
- 控制器從視圖(view)中獲得事件和輸入弯屈，對其進行處理(這個過程很可能包含模型蜗帜，取的數(shù)據(jù)在模型中封裝)，并相應(yīng)的取更新視圖资厉。
- 當頁面加載的時候厅缺，控制器會給視圖添加事件監(jiān)聽，如監(jiān)聽表單的提交、按鈕的點擊湘捎、移動端手勢的滑動等诀豁。當用戶和應(yīng)用產(chǎn)生交互的時候，控制器中的事件觸發(fā)器就開始工作了
5窥妇、結(jié)合
最后我們看上面描述的MVC模型圖
參考鏈接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
《基于MVC的JavaScript webfu富應(yīng)用開發(fā)》
