例項說明MVC,MVP,MVVM架構

很早就知道有這三個概念，但是一直都不清楚是怎麼回事，在網上搜尋，都是泛泛而談，沒有具體例子，新手是看不懂的，直到找到這篇文章，我對這三個架構有了更清楚的了解。

從乙個簡單的例子去研究這三個架構。

注意，mvc，mvp，mvvm中的c，p，vm，下文都要controller指代。

需求如下

介面上顯示100，以及兩個按鈕，其中乙個點一下加1，另外乙個點一下減1

如圖

誠然，這麼簡單的需求，並不需要用什麼架構去完成，可是如果是複雜的需求，要長篇大論才能說完，所以只拿簡單的來做例子，實際開發中，你在完成乙個需求之前，是需要好好掂量是否要用架構，要的話，用什麼架構（不侷限於這三個），架構裡面又要用什麼設計模式等等。經過我的實踐，發現，即使是架構改變了，view是可以完全不變的，所以先展現view層的**。

html部分

<
span 
id="text"
>100
span
>
<
button 
id="upbtn"
>up
button
>
<
button 
id="downbtn"
>down
button
>

js部分

function
$(id) `);
}function
view(controller) 
upbtn.onclick =controller.up;
downbtn.onclick =controller.down;
}

render方法是核心，方法名稱不能改（後面要依賴這個render方法），其中要實現資料的展示邏輯，然後是一些點選事件的繫結

model層

function
model() ;
this.down = function
() ;
this.getvalue = function
() ;
}

儲存資料，並提供訪問，修改資料的方法，如果僅僅是這樣，那麼當model改變時，view是不知道的，所以需要讓model去通知view，我資料改變了，你要更新了。怎麼做呢？利用觀察者模式。在model中，增加乙個陣列views，去儲存這個model對應的檢視，在修改資料的時候，遍歷views陣列，呼叫每個view的render方法，引數是自己。

修改後的model

function
model() ;
this.down = function
() ;
this.getvalue = function
() ;
this.broadcast = function
() ;
this.subscribe = function
(cb) 
}

仔細看修改後的model，雖然增加了通知的方法（broadcast），但是在修改資料的方法（up和down）中並沒有去通知檢視。這個工作是由controller承擔的，另外把view註冊到model中，也是controller做的。

controller層

function
controller() ;
this.down = function
() 
this.init = function
() }

可以看到，controller把自己傳給了view去建立檢視，同時儲存引用，建立model後，把view註冊到model中。同時實現了，改變資料，通知檢視的工作。

請一定要好好理解mvc，後面的mvp，mvvm都只是稍加修改而已。

在mvc中，改變資料，通知檢視，都是在controller做的，註冊檢視，以及通知檢視，這兩個方法的實現，都是model完成的，既然model負責資料處理，這兩個工作實際上和改變資料是沒關係的，把他們都轉移到controller中，不僅可以讓model層專注於資料處理，同時也方便多個檢視共用乙個controller

model層

function
model() ;
this.down = function
() ;
this.getvalue = function
() ;
}

model層更小了，刪除了註冊，通知方法，只儲存資料和提供獲取，修改資料的方法

controller層

function
controller() 
this.up = function
() ;
this.down = function
() 
this.init = function
() }

controller，增加了廣播方法，該方法的實現和呼叫都在controller中，另外，如果想多個檢視共用乙個controller，如果這多個檢視都是同乙個model，上面**能夠勝任，如果是這多個檢視是不同的model，那就要自己去實現好view和model的對應關係了（要用map來儲存對應關係，乙個陣列做不到）。

可以看到，在mvp中，model也有乙個up方法，controller也有乙個up方法，只是增加了乙個廣播方法的呼叫。是不是有些重複呢？把這兩個類似的方法整合到controller，model只負責儲存資料，不實現修改資料的邏輯，這就是mvvm了，極大地精簡model

model層

function
model() ;
this.setvalue = function
(v) 
}

其實，不用函式，單純地用乙個變數，也是可以的，但是為了view層不變，view層中依賴model的getvalue方法，所以這裡還是用函式去實現model

controller層

function
controller() 
this.up = function
() ;
this.down = function
() 
this.init = function
() }

精簡model的代價是controller要做更多的事情，實現修改資料的邏輯，通知檢視。如果用框架，react或者vue，通知檢視這部分框架會幫你實現，只要實現資料修改的邏輯就好了。

至此，三個架構都講完了，如果錯誤，歡迎討論。

例項說明MVC,MVP,MVVM架構

epoll使用例項說明

awk使用例項說明

字首索引例項說明

例項說明MVC,MVP,MVVM架構

epoll使用例項說明

awk使用例項說明

字首索引例項說明

相關推薦