前端框架系列之（mvvm）

前面我們介紹過了mvc 前端框架系列之（mvc），mvp 前端框架系列之（mvp）,mvp中我們說過隨著業務邏輯的增加，ui的改變多的情況下，會有非常多的跟ui相關的case，這樣就會造成view的介面會很龐大。而mvvm就解決了這個問題，通過雙向繫結的機制，實現資料和ui內容，只要想改其中一方，另一方都能夠及時更新的一種設計理念，這樣就省去了很多在view層中寫很多case的情況，只需要改變資料就行。

我們再看一下mvc的設計圖：

再看一下mvp的設計圖：

最後看一下mvvm的設計圖：

有沒有發現，不管是mvc、mvp、mvvm其實都差不多呢？其實區別還是挺大的，在mvp中view和presenter要相互持有，方便呼叫對方，而在mvp中 view和viewmodel通過binding進行關聯，他們之前的關聯處理通過繫結器（databinding）完成。

其實vue本身就是乙個mvvm架構，通過es5的object.defineproperty監聽資料的變化，然後通過觀察者模式通知各個vue例項，最後觸發dom的更新，實現了資料驅動檢視。感興趣的可以去看一下我之前寫的兩篇關於vue的文章：

接收使用者輸入的「使用者名稱」和「密碼」做登入操作

登入成功後返回「登入成功提示」

我們直接用上一節的demo

我們copy乙個mvc目錄為mvvm：

同樣，我們修改一下main.ts的入口為mvvm/index.vue

main.ts:

import vue from "vue";
import demo from "./mvvm/index.vue";
new vue(

model實現沒變，還是跟mvc一樣。

usermodelimp.ts

import user from "./user";
/** * user資料持久化介面層
*/export default inte***ce iusermodel name
* @param pwd
* @returns 
*/login(name: string, pwd: string): promise}

usermodelimp.ts

import user from "./user";
import iusermodel from "./iusermodel";
/** * user資料持久化實現層
*/export default class usermodelimp implements iusermodel name
* @param pwd
* @returns 
*/login(name: string, pwd: string): promise else 
});}};

vue中已經為我們提供了乙個叫vuex的工具，vuex完美的替代了我們的整個viewmodel,包括資料繫結器（databinding）。

首先我們安裝vuex：

yarn add vuex || npm install -s vuex

我們在mvvm目錄底下建立乙個叫store的檔案

store.ts

import vue from 'vue';
import vuex, from 'vuex';
import user from "../user";
import usermodelimp from "../usermodelimp";
vue.use(vuex);
//建立乙個使用者業務處理例項
const usermodelimp = new usermodelimp();
const store = new vuex.store(,
mutations: 
},actions: 
*/login(context) ).catch((error) => );
}}} as storeoptions);
export default store;

我們直接建立了乙個vuex中的store，vuex代表了我們的viewmodel,那麼viewmodel是怎麼跟view連線起來的呢？通過vuex的store跟頁面進行資料繫結的，實現上面的**想必大家問題都不大，不懂的童鞋可以去看vuex的官網，感興趣的還可以看一下我之前寫的幾篇關於vuex的文章：

index.ts

把store當viewmodel暴露出去

import store from "./store";
export ;

iuserview.ts介面跟之前mvc、mvp一樣

iuserview.ts

/**
* user view介面
*/export default inte***ce iuserview msg
*/showmessage(msg: string): void;
}

index.vue我們直接通過vuex暴露在vue原型上的$store屬性建立跟viewmodel的關聯

index.vue

使用者名稱：密碼：登入

可以看到，我們view中直接通過vuex的store建立了跟viewmodel的關係，然後通過vuex的store的dispatch方法觸發viewmodel的action，viewmodel再通過usermodel獲取資料，最後viewmodel直接修改state資料觸發檢視更新，其實小夥伴可以直接把vuex看成我們mvvm的viewmodel。

這裡特別宣告一下

小夥伴有沒有看到我們**中：

使用者名稱：密碼：登入

我們直接通過v-model繫結store的state物件的屬性了，這樣做其實是非常危險的，我們這裡為了偷懶才這樣寫的，正常專案的話小夥伴需要通過computed關聯state.name供當前元件使用，要修改state.name的話需要通過監聽input的輸入，然後觸發vuex的action，最後通過mutation觸發state.name的改變，也就是在vuex中只有mutation有權利修改state的值，為什麼這樣做呢？主要就是為了更好的跟蹤state的變化。

上面說的都是vuex官網中的規範，小夥伴可以自行去檢視vuex的官網。

我們已經說了mvc、mvp、mvvm，那我們到底需要怎麼去選擇呢？

其實框架這種東西吧，沒有絕對的框架，用起來大家都能接受、**看起來很爽、維護起來方便、別再被人罵像?一樣就就可以了，管它啥啥啥呢！！！

源**已經上傳到github了

.git

前端框架系列之（mvvm）

又想到了模板引擎和前端MVVM框架

Vue 實現mvvm框架

前端框架之booststrap

前端框架系列之（mvvm）

又想到了模板引擎和前端MVVM框架

Vue 實現mvvm框架

前端框架之booststrap

相關推薦