成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端 MVVM 原理

leiyi / 2719人閱讀

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

author: 陳家賓
email: [email protected]
date: 2018/3/1
MVVM 背景

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

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

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

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

MV* 模式 
MVC & MVP & MVVM 三者對比偽代碼：點我
MVC

Model：數(shù)據(jù)模型 & 手動渲染模板

View：模板

Controller：修改數(shù)據(jù)

MVP

Model：數(shù)據(jù)模型

View：模板

Presenter：修改數(shù)據(jù) & 手動渲染模板

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

MVVM

Model：數(shù)據(jù)模型

View：帶特殊屬性的 html 模板

ViewModel：依靠 Directive，修改數(shù)據(jù) & 自動渲染

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

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

數(shù)據(jù)變更檢測方案（Directive） （一）手動觸發(fā)綁定

在頁面需要改變時，手動觸發(fā)檢測，改變 model 數(shù)據(jù)，并掃描元素，對有特殊標(biāo)記的元素進行修改

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]);
            }
        }
    }
}
（二）臟檢測機制

針對手動綁定進行優(yōu)化，只對修改到的數(shù)據(jù)進行更新元素

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

在上面的基礎(chǔ)更進一步，使用 Object.defineProperty 對數(shù)據(jù)進行 get & set 監(jiān)聽，當(dāng)數(shù)據(jù)有變時，自動執(zhí)行 scan 掃描并更新元素。

原來是在改變數(shù)據(jù)時，還要手動 scan?，F(xiàn)在只需要直接改變數(shù)據(jù)，會自動 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

與方法三類似，換了種寫法，這里應(yīng)用了 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];
    }
});

以上。

參考資料

《現(xiàn)代前端 技術(shù)解析》，張成文，2017 年 4 月第 1 版d

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93034.html

相關(guān)文章

  • MVVM框架理解及其原理實現(xiàn)

    摘要：小白一枚，一直使用的是，想要多了解一些其它的框架，正好最近越來越火熱，上的數(shù)已經(jīng)超過了?？蚣芾斫庹f起這個模型，就不得不說框架。函數(shù)表示創(chuàng)建一個文本節(jié)點，函數(shù)表示創(chuàng)建一個數(shù)組。 小白一枚，一直使用的是React，想要多了解一些其它的框架，正好最近Vue越來越火熱，Github上的Star數(shù)已經(jīng)超過了React。而其背后蘊含的MVVM框架思想也一直跟React的組件化開發(fā)思想并駕齊驅(qū)，在這...

    DevWiki 評論0 收藏0

  • 我的前端面試

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

    meteor199 評論0 收藏0

  • 前端的發(fā)展歷程

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

    劉明 評論0 收藏0

  • 利用 JavaScript 數(shù)據(jù)綁定實現(xiàn)一個簡單的 MVVM 庫

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

    hzx 評論0 收藏0

  • 狀態(tài)決定視圖——基于狀態(tài)的前端開發(fā)思考

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

    miya 評論0 收藏0

發(fā)表評論

0條評論

leiyi

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<