本篇內容主要講解“js中的MVC是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“js中的MVC是什么”吧!

創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今，是專業(yè)互聯(lián)網技術服務公司，擁有項目網站制作、網站設計網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元東乃做網站,已為上家服務,為東乃各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

MVC是什么？

MVC是一種架構模式，它將應用抽象為3個部分：模型（數據）、視圖、控制器（分發(fā)器）。

本文將用一個經典的例子todoList來展開（代碼在最后）。

一個事件發(fā)生的過程（通信單向流動）：

1、用戶在視圖V上與應用程序交互

2、控制器C觸發(fā)相應的事件，要求模型M改變狀態(tài)（讀寫數據）

3、模型M將數據發(fā)送到視圖V，更新數據，展現給用戶

在js的傳統(tǒng)開發(fā)模式中，大多基于事件驅動的：

1、hash驅動

2、DOM事件，用來驅動視圖

3、模型事件（業(yè)務模型事件和數據模型事件），用來驅動模型和模型結合

所以js中的mvc的特點是：單向流動、事件驅動

一）模型

模型存放著應用的所有數據對象（業(yè)務數據、數據校驗、增刪改查），比如，例子todoList中的store模型，存放每一條記錄及與之有關的邏輯。

數據是面向對象的，當控制器請求模型讀寫數據時，模型就將數據包裝成模型實例。任何定義在這個數據模型上的函數或邏輯都可以直接被調用。在本文的例子中采用localSrorage也是類似道理的。存儲的Todos可以隨時被調用

模型不關心，不包含視圖和控制器的邏輯。它們應該是互相解耦的。這里提一點，模型與視圖的耦合，顯然是違反MVC架構原則，但往往我們有時候卻因為業(yè)務關系而無法完全解耦

模型表現了領域特定的數據，當一個模型有所改變的時候，它會通知它的觀察者（視圖）。

二）視圖

視圖是呈現給用戶的，是用戶交互的第一入口。它定義配置、管理著每個頁面相應的模板與組件，它表現為一個模型的當前狀態(tài)，視圖通過觀察者模式監(jiān)視模型，以獲得最新的數據，來呈現最新的頁面。所以，頁面首次加載時，往往是從接收模型的數據開始。

三）控制器

控制器（分發(fā)器），是模型和視圖之間的橋梁，集中式地配置和管理事件分發(fā)、模型分發(fā)、視圖分發(fā)，還用來權限控制、異常處理等。我們的應用中往往是有多個控制器的

頁面加載完成后，控制器會監(jiān)聽視圖的用戶交互（按鈕點擊或表單提交），一旦用戶發(fā)生交互時，控制器做出對視圖的選擇，觸發(fā)控制器的事件處理機制，去派發(fā)新的事件，通知模型更新數據（這樣就回到了第一步了）

Demo-todoList

最后這里是一個用原生js寫的todoLIst，這個demo做的很簡陋，點擊輸入文字點擊確定就添加，刪除是直接點擊該行信息。

單獨分離開來舉例子不好講，所以在代碼中進行注釋。首先簡單理下下邊代碼的思路：

1、V層定義配置了一個顯示數據的字符串模板，同時定義一個訂閱者的回調函數render() 用于頁面更新數據。

2、C層監(jiān)聽用戶的添加與刪除操作，添加是add() 函數 它執(zhí)行了回調函數render，同時向M層寫入數據，通知M層改變。刪除操作同理。

3、M層是本地存儲localStorage，模擬一個存儲數據對象的后臺模型。

 
 



 
待定事項


 
 
 確認

隨著界面和邏輯的復雜，用js或者jq去控制DOM是不現實的。上邊例子只是用原生js模擬mvc的思想實現過程。真正地項目往往會依賴一些封裝好的優(yōu)秀庫進行高效開發(fā)。

mvc模式的優(yōu)點

mvc編程把所有精力放在數據處理，盡可能減少對網頁元素的處理。對于有一定數量功能的網頁，Mvc模式下強制規(guī)范代碼，簡化，減少重復代碼，使代碼易于擴充。

mvc模式的弊端

1、清晰的構架以代碼的復雜性為代價， 對小項目反而降低開發(fā)效率。 （如果本文的例子todoList用面條式代碼編寫，那得多簡單?。。。。?br/>2、控制層和視圖層耦合，導致沒有真正分離和重用

3、在同一業(yè)務邏輯下，如果存在多種視圖呈現，需要視圖定義配置多個模板引擎、數據解析，多次處理數據與頁面更新。代碼就充滿了各種選擇器與事件回調，隨著業(yè)務的膨脹，變得難以維護。

到此，相信大家對“js中的MVC是什么”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！