前端 MV 模式

2022-03-07 00:58:38 字數 2701 閱讀 3736

呼叫關係如下:

controller(model) ,controller中執行業務邏輯,操作model

view(controller,model),view中繫結dom的互動事件,**函式中呼叫controller的方法;接著對model進行監視,設定對應的**方法(model.on(xx,()=>))

model(),當自身資料被修改時,自身發出對應事件(this.trigger(xx))。

特點:**的執行次序依次 view -> controller -> model -> view 

優點:1.模組分化明顯,易於管理。controller集中了業務邏輯、view集中了dom操作

缺點:1.單元測試困難。測試controller,修改了model,view中事件**修改dom,被修改的檢視難以檢測正確性

2.混亂的資料流(多個model與多個view交錯呼叫)。即由於 model 對外直接暴露了 set 和 on 方法,導致 view 層可以隨意改變model中的值,也可以隨意監聽 model中值的變化。這樣的設定最終會導致乙個龐大的 model中某個字段變化後,可能觸發無數個 change 事件,在這些 change 事件的**中,可能還有新的 set方法呼叫,導致更多的 change 事件觸發,更糟糕的是,乙個 model 還能改變另乙個 model 的值,整個資料流動的方式變得更加混亂,不可捉摸(這裡參考自《深入react技術棧》p193中對mvc的解釋,感覺和本文對mvc的解釋不一致,model的set方法本在本文應該是在controller中呼叫,而不是給view直接呼叫的)

3.頁面更新邏輯複雜(多個區域性更新導致頁面整體邏輯複雜)。乙個頁面中有多個view,都有自己獨立的渲染操作,支援獨立更新,這種獨立更新正是高效率的關鍵(當前頁面的狀態是由多個view的更新介面函式所決定的),但會導致整個頁面的更新邏輯複雜,難以定位問題

對於2、3點的解決方案:把多個區域性更新替換乙個整體更新,及每次更新資料,就讀取所有資料,重新渲染整個頁面,這導致效率低下,但資料流動清晰,邏輯簡單。

以上過程中,trigger和on的觀察者api可以這麼實現:

<

script

src=""

>

script

>

<

script

>

//方式1:使用jquery

varmodel

=$({});

model.on('xx

',function

(evt,val));

model.trigger('xx

',1);

//方式2:自定義

function

model();

this

.on

=function

(evtname,cb);

this

.trigger

=function

(evtname);

varvals

=[evt];

vals

=vals.concat(.splice.call(arguments,

1));

cbs.foreach(

function

(cb))}}

model

=new

model();

model.on('xx

',function

(evt,val));

model.trigger('xx

',1);

//方式3:使用node eventemitter

script

>

和mvc的區別在於,對model的監聽和更新dom(model.on(xx,()=>)) 從view中移動到presenter。

呼叫關係如下:

view(presenter),繫結dom互動事件,呼叫presenter中的業務邏輯,設定對外的更新ui的介面

presenter(view,model),執行業務邏輯,更新model,在model的監聽事件中,呼叫view的介面,來修改view

model(),和mvc一致

特點:**的執行次序依次是 view -> presenter -> model -> presenter -> view

優點:易於測試。把對model的監聽和更新dom的操作移動到了presenter中,測試的時候僅僅需要關注presenter中的邏輯即可,因為對於view,這裡僅僅是呼叫了那一塊的介面,所以不需要對那邊擔心。

view便於元件化。寫好對外的更新ui的介面,以及在互動事件中呼叫presenter即可。

是對mvp的改良。

mvvm的呼叫關係和mvp一樣。但是,在viewmodel(model of view)當中會有乙個叫binder,或者是data-binding engine的東西。以前全部由presenter負責的view和model之間資料同步操作交由給binder處理。

viewmodel = presenter + binder

在介面(或者是view的模板裡)中宣告好view與model的繫結關係,binder去讀取這個關係,並做好記錄,內部完成雙向繫結的功能。即presenter中對model進行修改,binder自動去修改對應的ui,ui上發生變化(input輸入),binder自動把資料更新到model上。

軟體設計中MV模式的應用

軟體設計中mv模式的應用 平時在基於j2ee的軟體開發中,時不時的會用到struts框架,這個框架是mvc模式的經典之作。mvc模式介紹 model 作用是根據前台請求資料呼叫後台業務處理並返回處理結果 view 就是前台顯示介面 controller 控制就是聯絡model和view的作用,根據某...

mv命令詳解

語法 mv 選項 原始檔或目錄 目標檔案或目錄 說明 視mv命令中第二個引數型別的不同 是目標檔案還是目標目錄 mv命令將檔案重新命名或將其移至乙個新的目錄中。當第二個引數型別是檔案時,mv命 令完成檔案重新命名,此時,原始檔只能有乙個 也可以是源目錄名 它將所給的原始檔或目錄重新命名為給定的目標檔...

mv 移動命令

3.2.1 語法 用法 mv 選項 t 原始檔 目標檔案 或 mv 選項 原始檔 目錄 或 mv 選項 t 目錄 原始檔 mv option t source dest mv option source directory mv option t directory source 示例 mv a a...