模型：模型用于封裝與應用程序的業務邏輯相關的數據以及對數據處理的方法。模型有對數據直接訪問的權利。模型不依賴 “視圖” 和 “控制器”, 也就是說 模型它不關心頁面如何顯示及如何被操作.
視圖：視圖層最主要的是監聽模型層上的數據改變，并且實時的更新html頁面。當然也包括一些事件的注冊或者ajax請求操作(發布事件),都是放在視圖層來完成。
控制器：控制器接收用戶的操作，最主要是訂閱視圖層的事件，然后調用模型或視圖去完成用戶的操作;比如：當頁面上觸發一個事件，控制器不輸出任何東西及對頁面做任何處理; 它只是接收請求并決定調用模型中的那個方法去處理請求, 然后再確定調用那個視圖中的方法來顯示返回的數據。
下面我們來實現一個簡單的下拉框控件，我們可以對它進行增刪操作；如下圖所示：
代碼如下：
HTML代碼如下：
頁面初始化代碼如下：
代碼分析如下：
先分析下我們是要實現什么樣的功能，基本功能有：
一個下拉框，通過用戶輸入的操作來實現用戶增加一項及用戶選中一項后刪除一項的功能;
當然也添加了用戶切換到那一項的事件;
比如我們現在來增加一條數據的時候，在視圖層上添加監聽事件，如下代碼：
然后調用觀察者類Event中的方法notify(發布一個事件) that.addButtonClicked.notify();大家都知道，觀察者模式又叫發布-訂閱模式，讓多個觀察者對象同時監聽某一個主題對象，當某一個主題對象發生改變的時候，所有依賴它的對象都會得到通知;
因此在控制層(Controller)我們可以使用如下代碼對發布者進行監聽操作：
之后調用自身的方法addItem();代碼如下：
調用模型層(model)的方法addItem();把一條數據插入到select框里面去;model(模型層)的addItem()方法代碼如下：
如上代碼 增加一項后，通過 this.itemAdd 發布一個消息，然后在視圖層(View)上通過如下代碼來監聽這個消息;代碼如下：
最后監聽到模型上(Model)的數據發生改變后，及時調用自身的方法rebuildList()去更新頁面上的數據;
模型層(Model)最主要做業務數據封裝操作。視圖層(View)主要發布事件操作及監聽模型層上的數據，如果模型層上有數據改變的時候，及時更新頁面操作，最后顯示給頁面上來，控制層(Controller)主要監聽視圖層(View)的事件，調用模型層(Model)的方法來更新模型上的數據，模型層數據更新后，會發布一條消息出去，最后視圖層(View)通過監聽模型層(Model)的數據變化，來更新頁面的顯示; 如上是MVC的基本流程。
MVC的優點：
1. 耦合性低：視圖層和業務層分離了，如果頁面上顯示改變的話，直接在視圖層更改即可，不用動模型層和控制層上的代碼;也就是視圖層 與 模型層和控制層
已經分離了;所以很容易改變應用層的數據層和業務規則。
2. 可維護性：分離視圖層和業務邏輯層也使得WEB應用更易于維護和修改。
MVC的缺點：
個人覺得適合于大型項目，對于中小型項目并不適合，因為要實現一個簡單的增刪改操作，只需要一點點JS代碼，但是MVC模式代碼量明顯增加了。
對于學習成本也就提高了，當然如果使用一些封裝好的MVC庫或者框架就好了。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
