這里的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ā)》