前端架構 MVC以及MVVM MVP介紹

2022-10-10 15:24:13 字數 2456 閱讀 1891

mvc

model-view-controller(模型-檢視-控制器):用一種業務邏輯、資料、介面顯示分離的方法組織**,將業務邏輯聚集到乙個部件裡面,在改進和個性化定製介面及使用者互動的同時,不需要重新編寫業務邏輯.它強制性的使應用程式的輸入、處理和輸出分開。最典型的mvc就是jsp +servlet+j**abean的模式。

model-view-presenter:是從經典的模式mvc演變而來,它們的基本思想有相通的地方:controller/presenter負責邏輯的處理,model提供資料,view負 責顯示。作為一種新的模式,mvp與mvc有著乙個重大的區別:在mvp中view並不直接使用model,它們之間的通訊是通過presenter (mvc中的controller)來進行的,所有的互動都發生在presenter內部,而在mvc中view會從直接model中讀取資料而不是通過 controller。

model-view-viewmodel:和mvc模式一樣,主要目的是分離檢視(view)和模型(model);在概念上是真正將頁面與資料邏輯分離的模式,在開發方式上,它是真正將前台**開發者(js+html)與後台**開發者分離的模式(asp,asp.net,php,jsp)。

1. 低耦合。檢視(view)可以獨立於model變化和修改,乙個viewmodel可以繫結到不同的"view"上,當view變化的時候model可以不變,當model變化的時候view也可以不變。

2. 可重用性。你可以把一些檢視邏輯放在乙個viewmodel裡面,讓很多view重用這段檢視邏輯。

3. 獨立開發。開發人員可以專注於業務邏輯和資料的開發(viewmodel),設計人員可以專注於頁面設計,使用expression blend可以很容易設計介面並生成xaml**。

4. 可測試。介面素來是比較難於測試的,而現在測試可以針對viewmodel來寫。

下面從乙個簡單的頁面例項講講mvc模式的使用:

1首先我們有最簡潔直白的頁面的寫法(view model 和control完全混合)

雖然簡單直接但是頁面**量變大時需要修改js**將會使整個頁面變得很混亂,不易維護;類似於jsp中直接嵌入j**a語句;

2、將js**與html**適當的分離:(view和model,control在同一頁面適當分離)

這是將js中的操作放到script指令碼標籤中,使得js邏輯**相對集中,易於後期修改。但是我們還是會在html頁面混著有對js函式的呼叫,依舊沒有分離;

3.講html和js徹底分離(view 和 model control完全分離):

//分離出來的模型model和控制control的綜合example.js**:

此時button節點的操作和時間註冊等工作已經完全與html頁面分離,但是control和model還混合在一起,所以還不是乙個基於mvc的模式;類似於jsp中的j**abean實現類似;

4.符合mvc的框架:(model,view,control完全分離)

/*第一引數:為button節點id

第二引數:為需要註冊的觸發事件

第三引數:事件觸發函式

第四引數:需要傳遞的引數。

*//*

說明:control.js的**就是實現html頁面節點事件的註冊。使得節點的各種事件知道會觸發什麼函式去執行。

具體的函式操作,可以放到model模組中執行,在model中,才是真正處理邏輯操作

*///

model.js

function

tipinfo(arr)

以上模式就類似於jsp中的struts框架,struts標籤的實現方式。

總結:view:只管頁面的顯示和樣式展示。

control:進行頁面節點事件的註冊和控制,以及頁面載入效能的實現(例如方榮的硬碟快取)。

model:真正的邏輯處理,例如jslib庫中的form、popup、drag等功能元件都屬於model模組。

MVC和三層架構以及區別

一 了解mvc結構以及功能 m moder,模型 資料訪問層 dao,業務邏輯層 乙個功能 資料庫增刪改查,bean類 v view,檢視 表示層 ul 用於展示 以及與使用者互動 html,js,css等前端技術實現 c controller 控制器 表示層 ul 接收請求,將請求跳轉到模型層進行...

MVC架構簡介

本篇部落格打算簡單介紹一下mvc是什麼,為接下來寫一篇spring mvc和struts2的文章做一下鋪墊。mvc是一種架構設計模式,是一種設計理念。是為了達到分層設計的目的,從而使 解耦,便於維護和 的復用。mvc是3個單詞的縮寫,全稱 model view controller 模型 檢視 控制...

MVC分層架構

mvc即模型 檢視 控制器,將應用程式的邏輯層與展現層進行分離的一種設計模式。傳統的mvc包括三個方面 模型 檢視 控制器。模型,關注資料處理 檢視,關注資料顯示和報表處理 控制器,負責協調模型和檢視 m model層主要負責要處理的業務 和資料操作 v view向使用者展示資料,通常指使用者看到的...