js實現(xiàn)數(shù)據(jù)雙向綁定(訪問器監(jiān)聽)

更新時間：2021年09月10日 10:37:02 作者：chen__cheng

這篇文章主要為大家詳細(xì)介紹了采用訪問器監(jiān)聽的方式實現(xiàn)簡單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)數(shù)據(jù)雙向綁定的具體代碼，供大家參考，具體內(nèi)容如下

雙向綁定：

雙向綁定基于MVVM模型：model-view-viewModel

model: 模型層，負(fù)責(zé)業(yè)務(wù)邏輯以及與數(shù)據(jù)庫的交互
view：視圖層，負(fù)責(zé)將數(shù)據(jù)模型與UI結(jié)合，展示到頁面中
viewModel：視圖模型層，作為model和view的通信橋梁

雙向綁定的含義：當(dāng)model數(shù)據(jù)發(fā)生變化的時候，會通知到view層，當(dāng)用戶修改了view層的數(shù)據(jù)的時候，會反映到模型層。

而雙向數(shù)據(jù)綁定的好處在于：只關(guān)注于數(shù)據(jù)操作，DOM操作減少

Vue.js實現(xiàn)的原理就是采用的訪問器監(jiān)聽，所以這里也采用訪問器監(jiān)聽的方式實現(xiàn)簡單的數(shù)據(jù)雙向綁定。

訪問器監(jiān)聽的實現(xiàn)，主要采用了javascript中原生方法：Object.defineProperty，該方法可以為某對象添加訪問器屬性，當(dāng)訪問或者給該對象屬性賦值的時候，會觸發(fā)訪問器屬性，因此利用此思路，可以在訪問器屬性中添加處理程序。

這里先實現(xiàn)一個簡單的input標(biāo)簽的數(shù)據(jù)雙向綁定過程，先大致了解一下什么是數(shù)據(jù)的雙向綁定。

<input type="text">

<script>
// 獲取到input輸入框?qū)ο?
let input = document.querySelector('input');
// 創(chuàng)建一個沒有原型鏈的對象，用于監(jiān)聽該對象的某屬性的變化
let model = Object.create(null);
// 當(dāng)鼠標(biāo)移開輸入框的時候，view層數(shù)據(jù)通知model層數(shù)據(jù)的變化
input.addEventListener('blur',function() {
    model['user'] = this.value;
})

// 當(dāng)model層數(shù)據(jù)發(fā)生變化的時候，通知view層數(shù)據(jù)的變化。
Object.defineProperty(model, 'user', {
    set(v) {
        user = v;
        input.value = v;
    },
    get() {
        return user;
    }
})
</script>

以上的代碼中首先對Input標(biāo)簽對象進行獲取，然后對input元素對象添加監(jiān)聽事件(blur)，當(dāng)事件被觸發(fā)的時候，也就是view層發(fā)生變化的時候，就需要去通知model層去更新數(shù)據(jù)，這里的model層利用的是一個沒有原型的空對象（使用空對象的原因：避免獲取某屬性的時候，由于原型鏈的存在，造成數(shù)據(jù)的誤讀）。

使用Object.defineProperty的方法，為該對象的指定屬性添加訪問器屬性，當(dāng)該對象的屬性被修改，就會觸發(fā)setter訪問器，我們這里就可以為view層的數(shù)據(jù)賦值，更新view層的數(shù)據(jù)，這里的view層指的是Input標(biāo)簽的屬性value。

看一下效果:

在文本框中輸入一個數(shù)據(jù)，在控制臺打印model.user可以看到數(shù)據(jù)已經(jīng)影響到了model層

接著在控制臺手動修改model層的數(shù)據(jù)：model.user = ‘9090';
此時可以看到數(shù)據(jù)文本框也被相應(yīng)的進行了修改，影響到了view層

好啦，實現(xiàn)了最簡單的只針對于文本框的數(shù)據(jù)雙向綁定，我們可以從以上的案例中可以發(fā)現(xiàn)以下的實現(xiàn)邏輯：

①. 要實現(xiàn)view層到model的數(shù)據(jù)通信，就需要知道view層的數(shù)據(jù)變化了，以及view層的值，但是一般要獲取到標(biāo)簽本身的值，除非有內(nèi)置屬性，比如：input標(biāo)簽的value屬性，可以獲得文本框的輸入值

②. 利用Object.defineProperty實現(xiàn)model層向view層的通信，當(dāng)數(shù)據(jù)被修改，就會立馬觸發(fā)訪問器屬性setter，從而可以通知使用了該屬性的所有view層去更新他們的現(xiàn)在的數(shù)據(jù)（觀察者）

③. 被綁定的數(shù)據(jù)需要是作為一個對象的屬性，因為Object.defineProperty是對某一個對象的屬性開啟的訪問器特性。

爭對以上的總結(jié)，我們可以設(shè)計出類似于vue.js的數(shù)據(jù)雙向綁定模式：
利用自定義指令實現(xiàn)view到model層的數(shù)據(jù)通信
利用Object.defineProperty實現(xiàn)model層到view層的數(shù)據(jù)通信。

這里的實現(xiàn)涉及到三個主要的函數(shù)：

_observer: 對數(shù)據(jù)進行處理，重寫每一個屬性的getter/setter
_compile：對自定義指令（這里只涉及了e-bind/e-click/e-model）進行解析，并在解析過程中為節(jié)點綁定原生處理事件，以及實現(xiàn)view層到model層的綁定
Watcher: 作為model與view的中間橋梁，當(dāng)model發(fā)生變化進一步更新view層

實現(xiàn)代碼：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙向數(shù)據(jù)綁定</title>
    <style>
        #app {
            text-align: center;
        }
    </style>
    <script src="/js/eBind.js"></script>
    <script>
        window.onload = function () {
           let ebind =  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>
    <input e-model="number" type="text">
    <form>
        <input type="text" e-model="person.age">
        <button type="button" e-click="addAge">增加</button>
    </form>
    <h3 e-bind="person.age"></h3>
</div>
</body>
</html>

eBind.js

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

// 根據(jù)所給的自定義參數(shù)，進行數(shù)據(jù)雙向綁定的初始化工作
EBind.prototype._init = function (options) {
    // options是初始化時的數(shù)據(jù)，包括el,data,method
    this.$options = options;

    // el是需要管理的Element對象，el:#app this.$el:id為app的Element對象
    this.$el = document.querySelector(options.el);

    // 數(shù)據(jù)
    this.$data = options.data;

    // 方法
    this.$methods = options.methods;

    // _binding保存著model與view的映射關(guān)系，也就是Wachter的實例，當(dāng)model更新的時候，更新對應(yīng)的view
    this._binding = {};

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

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


// 該函數(shù)的作用：對所有的this.$data里面的屬性進行監(jiān)聽，訪問器監(jiān)聽，實現(xiàn)model到view層的數(shù)據(jù)通信。當(dāng)model層改變的時候通知view層
EBind.prototype._obverse = function (currentObj, completeKey) {
    // 保存上下文
    var _this = this;

    // currentObj就是需要重寫get/set的對象，Object.keys獲取該對象的屬性，得到的是一個數(shù)組
    // 對該數(shù)組進行遍歷
    Object.keys(currentObj).forEach(function (key) {

        // 當(dāng)且僅當(dāng)對象自身的屬性才監(jiān)聽
        if (currentObj.hasOwnProperty(key)) {

            // 如果是某一對象的屬性，則需要以person.age的形式保存
            var completeTempKey = completeKey ? completeKey + '.' + key : key;

            // 建立需要監(jiān)測屬性的關(guān)聯(lián)
            _this._binding[completeTempKey] = {
                _directives: [] // 存儲所有使用該數(shù)據(jù)的地方
            };

            // 獲取到當(dāng)前屬性的值
            var value = currentObj[key];

            // 如果值是對象，則遍歷處理，對每個對象屬性都完全監(jiān)測
            if (typeof value == 'object') {
                _this._obverse(value, completeTempKey);
            }

            var binding = _this._binding[completeTempKey];

            // 修改對象的每一個屬性的get和set，在get和set中添加處理事件
            Object.defineProperty(currentObj, key, {
                enumerable: true,
                configurable: true, // 避免默認(rèn)為false
                get() {
                    return value;
                },
                set(v) {
                    // value保存當(dāng)前屬性的值
                    if (value != v) {
                        // 如果數(shù)據(jù)被修改，則需要通知每一個使用該數(shù)據(jù)的地方進行更新數(shù)據(jù)，也即：model通知view層，Watcher類作為中間層去完成該操作（通知操作）
                        value = v;
                        binding._directives.forEach(function (item) {
                            item.update();
                        })
                    }
                }
            })
        }
    })
}


// 該函數(shù)的作用是：對自定義指令進行編譯，為其添加原生監(jiān)聽事件，實現(xiàn)view到model層的數(shù)據(jù)通信，也即當(dāng)view層數(shù)據(jù)變化之后通知model層數(shù)據(jù)更新
// 實現(xiàn)原理：通過托管的element對象：this.$el，獲取到所有的子節(jié)點，遍歷所有的子節(jié)點，查看其是否有自定義屬性，如果有指定含義的自定義屬性
// 比如說：e-bind/e-model/e-click則根據(jù)節(jié)點上添加的自定義屬性的不同為其添加監(jiān)聽事件
// e-click添加原生的onclick事件，這里主要注意點就是：需要將this.$method中指定方法的上下文this改為this.$data
// e-model為綁定的數(shù)據(jù)更新，這里只支持input,textarea標(biāo)簽，原因：采用標(biāo)簽自帶的value屬性實現(xiàn)的view到model層的數(shù)據(jù)通信
// e-bind
EBind.prototype._compile = function (root) {
    // 保存執(zhí)行上下文
    var _this = this;

    // 獲取到托管節(jié)點元素的所有子節(jié)點，只包括元素節(jié)點
    var nodes = root.children;

    for (let i = 0; i < nodes.length; i++) {
        // 獲取到子節(jié)點/按順序
        var node = nodes[i];

        // 如果當(dāng)前節(jié)點有子節(jié)點，則繼續(xù)逐層處理子節(jié)點
        if (node.children.length) {
            this._compile(node);
        }

        // 如果當(dāng)前節(jié)點綁定了e-click屬性，則需要為當(dāng)前節(jié)點綁定onclick事件
        if (node.hasAttribute('e-click')) {
            // hasAttribute可以獲取到自定義屬性
            node.addEventListener('click',(function () {
                // 獲取到當(dāng)前節(jié)點的屬性值，也就是方法
                var attrVal = node.getAttribute('e-click');
                // 由于綁定的方法里面的數(shù)據(jù)要使用data里面的數(shù)據(jù)，所以需要將執(zhí)行的函數(shù)的上下文，也就是this改為this.$data
                // 而使用bind，不使用call/apply的原因是onclick方法需要觸發(fā)之后才會執(zhí)行，而不是立馬執(zhí)行
                return _this.$methods[attrVal].bind(_this.$data);
            })())
        }


        // 只對input和textarea標(biāo)簽元素可以施行雙向綁定，原因：利用這兩個標(biāo)簽的內(nèi)置的value屬性實現(xiàn)雙向綁定
        if (node.hasAttribute('e-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
            // 給element對象添加監(jiān)聽input事件 ，第二個參數(shù)是一個立即執(zhí)行函數(shù)，獲取到節(jié)點的索引值，執(zhí)行函數(shù)內(nèi)部代碼，返回事件處理
            node.addEventListener('input', (function (index) {
                // 獲取到當(dāng)前節(jié)點的屬性值，也就是方法
                var attrVal = node.getAttribute('e-model');

                // 給當(dāng)前element對象添加model到view層的映射
                _this._binding[attrVal]._directives.push(new Watcher({
                    name: 'input',
                    el: node,
                    eb: _this,
                    exp: attrVal,
                    attr: 'value'
                }))

                // 如果input標(biāo)簽value值改變，此時需要更新model層的數(shù)據(jù)，也就是view層到model層的改變
                return function () {
                    // 獲取到綁定的屬性，以.為分隔符，如果只是一個值，就直接獲取當(dāng)前值，如果是個對象（obj.key）的形式，則綁定的其實obj對象
                    // 中的key的值，此時就需要獲取到key，并對key進行賦值為已改變的input標(biāo)簽的value值
                    var keys = attrVal.split('.');

                    // 獲取上一步得到的屬性的集合中最后一個屬性（最后一個屬性才是真正被綁定的值）
                    var lastKey = keys[keys.length - 1];

                    // 獲得真正被綁定的值的父對象
                    // 因為如果是對象，比如：obj.key.val，則需要找到key的引用，因為這里要改變的是val
                    // 通過引用key 從而改變val的值，但是如果直接獲取到的val的引用，val是數(shù)值型存儲，賦值給另一個變量的時候，其實是新開辟的一個空間
                    // 并不能直接改變model層也就是this.$data里面的數(shù)據(jù)，而引用數(shù)據(jù)存儲的話，賦值給另一個變量，另一個變量的修改，會影響原來的引用的數(shù)據(jù)
                    // 所以這里需要找到真正被綁定值的父對象，也就是obj.key里面的obj值
                    var model = keys.reduce(function (value, key) {
                        // 如果不是對象，則直接返回屬性value
                        if (typeof value[key] !== 'object') {
                            return value;
                        }

                        return value[key];
                        // 這里使用model層作為起始值，原因：keys里面記錄的是this.$data里面的屬性，所以需要從父對象this.$data出發(fā)去找目標(biāo)屬性
                    }, _this.$data);

                    // model也就是之前說得父對象，obj.key中的obj,而lastkey也就是真正被綁定的屬性，找到了之后就需要對其更新為節(jié)點的值啦。
                    // 這里的model層被修改會觸發(fā)_observe里面的訪問器屬性setter，所以如果其他地方也使用了這個屬性的話，也會相應(yīng)的發(fā)生改變哦
                    model[lastKey] = nodes[index].value;
                }
            })(i))
        }


        // 對節(jié)點上綁定e-bind，為其添加model到view的映射即可，原因：e-bind實現(xiàn)的是model到view的數(shù)據(jù)通信，而在this._observer中
        // 已經(jīng)通過definePrototype實現(xiàn)了，所以這里只需要添加通信，便于在_oberver中實現(xiàn)。
        if(node.hasAttribute('e-bind')) {
            var attrVal = node.getAttribute('e-bind');
            _this._binding[attrVal]._directives.push(new Watcher({
                name: 'text',
                el: node,
                eb: _this,
                exp: attrVal,
                attr: 'innerHTML'
            }))
        }
    }
}

/**
 * options 屬性：
 * name: 節(jié)點名稱：文本節(jié)點：text, 輸入框：input
 * el: 指令對應(yīng)的DOM元素
 * eb: 指令對應(yīng)的EBind實例
 * exp: 指令對應(yīng)的值：e-bind="test";test就是指令對應(yīng)的值
 * attr: 綁定的屬性值, 比如：e-bind綁定的屬性，其實會反應(yīng)到innerHTML中，v-model綁定的標(biāo)簽會反應(yīng)到value中
 */
function Watcher(options) {
    this.$options = options;
    this.update();
}

Watcher.prototype.update = function () {
    // 保存上下文
    var _this = this;
    // 獲取到被綁定的對象
    var keys = this.$options.exp.split('.');

    // 獲取到DOM對象上要改變的屬性，對其進行更改
    this.$options.el[this.$options.attr] = keys.reduce(function (value, key) {
        return value[key];
    }, _this.$options.eb.$data)
}

實現(xiàn)效果：