JavaScript實現簡單的雙向數據綁定

来源:https://www.cnblogs.com/laixiangran/archive/2018/04/23/8922301.html
-Advertisement-
Play Games

什麼是雙向數據綁定 雙向數據綁定簡單來說就是UI視圖（View）與數據（Model）相互綁定在一起，當數據改變之後相應的UI視圖也同步改變。反之，當UI視圖改變之後相應的數據也同步改變。 雙向數據綁定最常見的應用場景就是表單輸入和提交。一般情況下，表單中各個欄位都對應著某個對象的屬性，這樣當我們在表 ...


什麼是雙向數據綁定

雙向數據綁定簡單來說就是UI視圖（View）與數據（Model）相互綁定在一起，當數據改變之後相應的UI視圖也同步改變。反之，當UI視圖改變之後相應的數據也同步改變。

雙向數據綁定最常見的應用場景就是表單輸入和提交。一般情況下，表單中各個欄位都對應著某個對象的屬性，這樣當我們在表單輸入數據的時候相應的就改變對應的對象屬性值，反之對象屬性值改變之後也反映到表單中。

目前流行的 MVVM 框架（Angular、Vue）都實現了雙向數據綁定，這樣也就實現了視圖層和數據層的分離。相信使用過 jQuery 的人都知道，往往我們在獲取到數據之後就直接操作 DOM ，這樣數據操作和 DOM 操作就高度耦合在一起了。

實現方式

發佈者-訂閱者模式

這種實現方式就是使用自定義的 data 屬性在 HTML 代碼中指明綁定。所有綁定起來的 JavaScript 對象以及 DOM 元素都將 “訂閱” 一個發佈者對象。任何時候如果 JavaScript 對象或者一個 HTML 輸入欄位被偵測到發生了變化，我們將代理事件到發佈者-訂閱者模式，這會反過來將變化廣播並傳播到所有綁定的對象和元素。具體實現可看這篇文章：http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day

臟值檢查

Angularjs（這裡特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）雙向數據綁定的技術實現是臟值檢查。原理就是：Angularjs內部會維護一個序列，將所有需要監控的屬性放在這個序列中，當發生某些特定事件時（並不是定時的而是由某些特殊事件觸發的，比如：DOM事件、XHR事件等等），Angularjs會調用 $digest 方法，這個方法內部做的邏輯就是遍歷所有的 watcher，對被監控的屬性做對比，對比其在方法調用前後屬性值有沒有發生變化，如果發生變化，則調用對應的 handler。

這種方式的缺點很明顯，遍歷輪訓 watcher 是非常消耗性能的，特別是當單頁的監控數量達到一個數量級的時候。

訪問器監聽

vue.js 實現數據雙向綁定的原理就是訪問器監聽。它使用了 ECMAScript5.1（ECMA-262）中定義的標準屬性 Object.defineProperty 方法。通過 Object.defineProperty 設置各個屬性的 setter，getter，在數據變動時更新UI視圖。

實現

本文將採用 訪問器監聽 這種方式來實現一個簡單的雙向數據綁定，主要實現：

  • obverse：對數據進行處理，重寫相應的 set 和 get 函數
  • complie：解析指令（e-bind、e-model、e-click）等，併在這個過程中對 view 與 model 進行綁定
  • Watcher：作為連接 obverse 和 complie 的橋梁，用來綁定更新函數，實現對視圖的更新

首先看下我們的視圖代碼：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="賴祥燃, [email protected], http://www.laixiangran.cn"/>
    <title>實現簡單的雙向數據綁定</title>
    <style>
        #app {
            text-align: center;
        }
    </style>
    <script src="eBind.js"></script>
    <script>
        window.onload = function () {
            new EBind({
                el: '#app',
                data: {
                    number: 0,
                    person: {
                        age: 0
                    }
                },
                methods: {
                    increment: function () {
                        this.number++;
                    },
                    addAge: function () {
                        this.person.age++;
                    }
                }
            });
        };
    </script>
</head>
<body>
<div id="app">
    <form>
        <input type="text" e-model="number">
        <button type="button" e-click="increment">增加</button>
    </form>
    <h3 e-bind="number"></h3>
    <form>
        <input type="text" e-model="person.age">
        <button type="button" e-click="addAge">增加</button>
    </form>
    <h3 e-bind="person.age"></h3>
</div>
</body>

從視圖代碼可以看出，在 <div id="app"> 的子元素中我們應用了三個自定義指令
e-bind、e-model、e-click, 然後我們通過 new EBind({***}) 應用雙向數據綁定。

分析

EBind

EBind 構造函數接收應用根元素、數據、方法來初始化雙向數據綁定：


function EBind(options) {
    this._init(options);
}

EBind.prototype._init = function (options) {

    // options 為上面使用時傳入的結構體，包括 el, data, methods
    this.$options = options;

    // el 是 #app, this.$el 是 id 為 app 的 Element 元素
    this.$el = document.querySelector(options.el);

    // this.$data = {number: 0}
    this.$data = options.data;

    // this.$methods = {increment: function () { this.number++; }}
    this.$methods = options.methods;

    // _binding 保存著 model 與 view 的映射關係，也就是我們定義的 Watcher 的實例。當 model 改變時，我們會觸發其中的指令類更新，保證 view 也能實時更新
    this._binding = {};

    // 重寫 this.$data 的 set 和 get 方法
    this._obverse(this.$data);

    // 解析指令
    this._complie(this.$el);
};

obverse

_obverse 的關鍵是使用 Object.defineProperty 來定義傳入數據對象的 getter 及 setter，通過 setter 來監聽對象屬性的變化從而觸發 Watcher 中的更新方法。


EBind.prototype._obverse = function (currentObj, completeKey) {
    var _this = this;
    Object.keys(currentObj).forEach(function (key) {
        if (currentObj.hasOwnProperty(key)) {

            // 按照前面的數據，_binding = {number: _directives: [], preson: _directives: [], preson.age: _directives: []}
            var completeTempKey = completeKey ? completeKey + '.' + key : key;
            _this._binding[completeTempKey] = {
                _directives: []
            };
            var value = currentObj[key];

            // 如果值還是對象，則遍歷處理
            if (typeof value === 'object') {
                _this._obverse(value, completeTempKey);
            }
            var binding = _this._binding[completeTempKey];

            // 雙向數據綁定的關鍵
            Object.defineProperty(currentObj, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    console.log(key + '獲取' + JSON.stringify(value));
                    return value;
                },
                set: function (newVal) {
                    if (value !== newVal) {
                        console.log(key + '更新' + JSON.stringify(newVal));
                        value = newVal;

                        // 當 number 改變時，觸發 _binding[number]._directives 中的綁定的 Watcher 類的更新
                        binding._directives.forEach(function (item) {
                            item.update();
                        });
                    }
                }
            });
        }
    })
};

_complie

_complie 的關鍵是簡析自定義指令，根據不同的自定義指令實現不同的功能。如 e-click 就解析為將對應 node 綁定 onclick 事件，e-model 必須綁定在 INPUT 和 TEXTAREA 上，然後監聽 input 事件，更改 model 的值，e-bind 就直接將綁定的變數值輸出到DOM元素中。


EBind.prototype._complie = function (root) {
    var _this = this;
    var nodes = root.children;
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];

        // 對所有元素進行遍歷，併進行處理
        if (node.children.length) {
            this._complie(node);
        }

        // 如果有 e-click 屬性，我們監聽它的 onclick 事件，觸發 increment 事件，即 number++
        if (node.hasAttribute('e-click')) {
            node.onclick = (function () {
                var attrVal = node.getAttribute('e-click');

                // bind 是使 data 的作用域與 method 函數的作用域保持一致
                return _this.$methods[attrVal].bind(_this.$data);
            })();
        }

        // 如果有 e-model 屬性且元素是 INPUT 和 TEXTAREA，我們監聽它的 input 事件，更改 model 的值
        if (node.hasAttribute('e-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
            node.addEventListener('input', (function (index) {
                var attrVal = node.getAttribute('e-model');

                // 添加指令類 Watcher
                _this._binding[attrVal]._directives.push(new Watcher({
                    name: 'input',
                    el: node,
                    eb: _this,
                    exp: attrVal,
                    attr: 'value'
                }));

                return function () {
                    var keys = attrVal.split('.');
                    var lastKey = keys[keys.length - 1];
                    var model = keys.reduce(function (value, key) {
                        if (typeof value[key] !== 'object') {
                            return value;
                        }
                        return value[key];
                    }, _this.$data);
                    model[lastKey] = nodes[index].value;
                }
            })(i));
        }

        // 如果有 e-bind 屬性
        if (node.hasAttribute('e-bind')) {
            var attrVal = node.getAttribute('e-bind');

            // 添加指令類 Watcher
            _this._binding[attrVal]._directives.push(new Watcher({
                name: 'text',
                el: node,
                eb: _this,
                exp: attrVal,
                attr: 'innerHTML'
            }));
        }
    }
};

Watcher

作為連接 _obverse 和 _complie 的橋梁，用來綁定更新函數，通過 update 實現對視圖的更新。


function Watcher(options) {
    // options 屬性：
    // name 指令名稱，例如文本節點，該值設為"text"
    // el 指令對應的DOM元素
    // eb 指令所屬EBind實例
    // exp 指令對應的值，本例如"number"
    // attr 綁定的屬性值，本例為"innerHTML"
    this.$options = options;
    this.update();
}

/**
 * 根據 model 更新 view
 */
Watcher.prototype.update = function () {
    var _this = this;
    var keys = this.$options.exp.split('.');

    // 比如 H3.innerHTML = this.data.number; 當 number 改變時，會觸發這個 update 函數，保證對應的 DOM 內容進行了更新。
    this.$options.el[this.$options.attr] = keys.reduce(function (value, key) {
        return value[key];
    }, _this.$options.eb.$data);
};

總結

這樣我們就使用原生 JavaScript 實現了簡單的雙向數據綁定。

源碼：https://github.com/laixiangran/e-bind


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【讀書筆記】iOS-發佈你的應用
    一，添加圖標 你的應用在iPhone主屏幕上的標準圖標(Icon.png)是57像素*57像素的正方形，PNG格式，不能有透明效果或者圖層，72DPI.除些之外，你還可以提供一個同樣格式的114像素*114像素的高解析度圖標（[email protected]).當用戶的設備是Retina屏幕的時候，這個圖標就 ...
  • Android 自定義支持快速搜索篩選的選擇控制項（一）
    Android 自定義支持快速搜索篩選的選擇控制項 項目中遇到選擇控制項選項過多，需要快速查找匹配的情況。 做了簡單的Demo，效果圖如下： 源碼地址： "https://github.com/whieenz/SearchSelect" 這個控制項是由Dialog+SearchView+ListView實 ...
  • async/await，瞭解一下？
    上一篇博客我們在現實使用和麵試角度講解了Promise(原文可參考《面向面試題和實際使用談promise》)，但是Promise 的方式雖然解決了 callback hell，但是這種方式充滿了 Promise的 then() 方法，如果處理流程複雜的話，整段代碼將充滿 then，代碼流程不能很好的 ...
  • Angular 和 Vue 使用的對比總結 -- 腳手架
    前言 之前是用Vue的，現在由於工作原因，開始使用Angular。分別是Vue2和Angular5入的坑。只是從使用上來對比總結，加深記憶，避免混淆。 什麼 ？ 你問實現原理的異同及優劣？ 本寶寶還在努力學習中，也許有生之年你可以看到分析貼。 不管用什麼框架，創建項目都是第一步。發展到現在，Angu ...
  • HTML5移動應用開發入門經典 中文pdf掃描版
    HTML5是關註度ZUI高的前沿Web技術，而移動互聯網則是近兩年ZUI炙手可熱的Web領域。《HTML5移動應用開發入門經典》將這兩者巧妙結合起來，詳細講解瞭如何利用HTML5進行移動應用開發。 HTML5移動應用開發入門經典總共分為24章，以示例的方式對如何使用HTML5及相關技術進行移動應用開 ...
  • HTML5游戲開發進階指南 中文pdf掃描版​
    HTML5游戲開發進階指南介紹了HTML5游戲開發的一般過程和技巧。全書共分12章，第1章介紹了本書相關的HTML5的諸多新特性，包括在canvas上繪圖、播放聲音等，另外還引入了子畫面頁的概念；第2～4章利用Box2D物理引擎開發了一款非常類似於《憤怒的小鳥》的游戲，全面介紹了物理引擎的概念，以及 ...
  • HTML 5與CSS 3權威指南(第2版·上冊) 中文pdf掃描版​
    HTML5與CSS3權威指南(第2版·上冊)已經成為HTML 5與CSS 3圖書領域的一個標桿，被讀者譽為“系統學習HTML 5與CSS 3技術的最佳指導參考書之一”和“Web前端工程師案頭必備圖書之一”。第2版首先從技術的角度結合最新的HTML 5和CSS 3標準對內容進行了更新和補充，其次從結構 ...
  • HTML、CSS、JavaScript網頁製作從入門到精通 (劉西傑) pdf掃描版彩色版​
    html、css、JavaScript網頁製作從入門到精通中從基礎知識開始講起，如html的基本標記、文字與段落標記、表格標記、超鏈接標記……同時介紹了目前流行的web標準與css網頁佈局實例，以及基於語言的網頁特效製作。需要的朋友們可以下載看看！ HTML\CSS\JavaScript網頁製作從入 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類