前端 MVVM 原理

leiyi 發布于2019-08-22 14:57 / 2698人閱讀

摘要：原來是在改變數據時，還要手動。現在只需要直接改變數據，會自動，更新元素。參考資料現代前端技術解析，張成文，年月第版，和的圖示，阮一峰，年月日，

author: 陳家賓
email: 617822642@qq.com
date: 2018/3/1

MVVM 背景

都說懶惰使人進步，MVVM 的進化史，正印證了這句話，是一步步讓開發人員更懶惰更簡單的歷史：

直接 DOM 操作 -> MVC -> MVP -> MVVM

最開始的前端交互，是很直接的 DOM 操作，最出名的這類庫當數 jQuery 了，封裝了 DOM API，讓一切 DOM 操作都變得簡單。

但當頁面數據和交互多的時候，散亂的代碼將使項目變得難以維護，讓人發狂。所以才有了 MV* 模式的發展。

MV* 模式

MVC & MVP & MVVM 三者對比偽代碼：點我

MVC

Model：數據模型 & 手動渲染模板

View：模板

Controller：修改數據

MVP

Model：數據模型

View：模板

Presenter：修改數據 & 手動渲染模板

MVP 是 MVC 模式的一種改造（這里不說改進，是因為兩者其實很相似，沒有本質上的變化），將 手動渲染 步驟** 從 Model 移到了 Presenter，讓 View 和 Model 更獨立更存粹了，但從另一個角度來說，也加大了 Presenter 的工作。

MVVM

Model：數據模型

View：帶特殊屬性的 html 模板

ViewModel：依靠 Directive，修改數據 & 自動渲染

MVVM 模式依靠 Directive，實現了 模板自動渲染，極大地解放了開發者的雙手，此時開發者只需關注 View 和 Model，效率和可維護性方面達到了飛躍式的進步。

下面將著重介紹下神奇的 Directive。

數據變更檢測方案（Directive） （一）手動觸發綁定

在頁面需要改變時，手動觸發檢測，改變 model 數據，并掃描元素，對有特殊標記的元素進行修改

let data = {
      value: "hello"
};

let directive = {
    html: function (html) {
        this.innerHTML = html;
    },
    value: function (html) {
        this.setAttribute("value", value);
    }
};

ViewModelSet("value", "hello world");

function ViewModelSet(key, value) {
    data[key] = value;
    scan(); 
}

function scan() {
    for (let elem of elems) {
        elem.directive = [];
        for (let attr of elem.attributes) {
            if (attr.nodeName.indexOf("v-") >= 0) {
                directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
            }
        }
    }
}

（二）臟檢測機制

針對手動綁定進行優化，只對修改到的數據進行更新元素

function scan(elems, val) {
    let list = document.querySelectorAll(`[v-bind=${val}]`); // 只掃描修改到的數據涉及的元素
    for (let elem of elems) {
        for (let attr of elem.attributes) {
            let dataKey = elem.getAttribute("v-bind");
            if (elem.directive[attr.nodeValue] !== data[dataKey]) { // 當元素值有變時，更新元素
                directive[attr.nodeValue].call(elem, data[dataKey]); 
                elem.directive[attr.nodeValue] = data[dataKey]; // 保存元素當前值
            }
        }
    }
}

（三）前端數據對象劫持（Hijacking）

在上面的基礎更進一步，使用 Object.defineProperty 對數據進行 get & set 監聽，當數據有變時，自動執行 scan 掃描并更新元素。

原來是在改變數據時，還要手動 scan。現在只需要直接改變數據，會自動 scan，更新元素。

defineGetAndSet(data, "value");

data.value = "hello world";

function defineGetAndSet(obj, propName) {
    Object.efineProperty(obj, propName, {
        get: function () {
            return this.bVal;
        },
        set: function (newVal) {
            this.bVal = newVal;
            scan();
        },
        enumerable: true,
        configurable: true
    });
}

（四）ECMAScript 6 Proxy

與方法三類似，換了種寫法，這里應用了 ES6 里的 Proxy

let data = new Proxy({
    get: function (obj, key) {
        return obj[key];
    },
    set: function (obj, key, val) {
        obj[key] = val;
        scan();
        return obj[key];
    }
});

以上。

參考資料

《現代前端技術解析》，張成文，2017 年 4 月第 1 版d

《MVC，MVP 和 MVVM 的圖示》，阮一峰，2015年2月 1日，http://www.ruanyifeng.com/blo...

云服務器 GPU云服務器 js前端路由原理 MVVM mvvm模式 javascript_mvvm

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93034.html

MVVM框架理解及其原理實現

摘要：小白一枚，一直使用的是，想要多了解一些其它的框架，正好最近越來越火熱，上的數已經超過了。框架理解說起這個模型，就不得不說框架。函數表示創建一個文本節點，函數表示創建一個數組。小白一枚，一直使用的是React，想要多了解一些其它的框架，正好最近Vue越來越火熱，Github上的Star數已經超過了React。而其背后蘊含的MVVM框架思想也一直跟React的組件化開發思想并駕齊驅，在這...

DevWiki 2019-08-23 10:43 評論0 收藏0
我的前端面試

摘要：前言這次找工作也面了好幾家公司，也通過了好幾家公司的面試，畢竟之前也準備了一段時間，所以面試的時候心里也不是很虛。的代碼分割怎么實現的說說剛才提到的和的區別前端緩存怎么實現扯扯強緩存和協商緩存，重點問了如何實現緩存二面就聊了項目。。。前言這次找工作也面了好幾家公司，也通過了好幾家公司的面試，畢竟之前也準備了一段時間，所以面試的時候心里也不是很虛。這里記錄一下面試過程中被問到的問題...

meteor199 2019-08-26 13:29 評論0 收藏0
前端的發展歷程

摘要：前端的發展歷程什么是前端前端針對瀏覽器的開發，代碼在瀏覽器運行后端針對服務器的開發，代碼在服務器運行前端三劍客超文本標記語言是構成世界的基石。前端的發展歷程什么是前端前端：針對瀏覽器的開發，代碼在瀏覽器運行后端：針對服務器的開發，代碼在服務器運行前端三劍客 HTML CSS JavaScript HTML HTML（超文本標記語言——HyperText Markup ...

劉明 2019-08-23 14:17 評論0 收藏0
利用 JavaScript 數據綁定實現一個簡單的 MVVM 庫

摘要：和刷新函數是一對多的關系，即一個可以有任意多個處理它的回調函數刷新函數，比如和兩個指令共用一個數據模型字段。添加數據訂閱實現方式為建立緩存回調函數的數組緩存回調函數當數據模型的字段發生改變時，就會觸發緩存數組中訂閱了的所有回調。 MVVM 是 Web 前端一種非常流行的開發模式，利用 MVVM 可以使我們的代碼更專注于處理業務邏輯而不是去關心 DOM 操作。目前著名的 MVVM 框架有...

hzx 2019-08-19 18:00 評論0 收藏0
狀態決定視圖——基于狀態的前端開發思考

摘要：前端與狀態現在的前端開發中，對于狀態的管理是重中之重。有限狀態機那么如何更好的管理前端軟件的復雜度的狀態機思想給出了自己的答案。有限狀態機并不是一個復雜的概念簡單說，它有三個特征狀態總數是有限的。前提在現在的前端社區，關于MVVM、Model driven view 之類的概念，已經算是非常普及了。React/Vue 這類框架可以算是代表。而自己雖然有 React/Vue 的使用經...

miya 2019-08-20 18:22 評論0 收藏0