使用访问器属性编写一个双向数据绑定

一、原理

1. 双向数据绑定：数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
2. 实现方法：通过Object.defineProperty()方法来实现；

Object.defineProperty()方法(JavaScript高级程序设计第三版P139)：
Object.defineProperty()这个方法接受三个参数 属性所在的对象，属性的名字以及一个描述符对象.

let book = {
    _year: 2004,
    edition: 1
}
Object.defineProperty(book, 'year', {
    get: function() {
        console.log('调用了get方法');
        return this._year;
    },
    set: function(newvalue) {
        if (this._year !== newvalue) {
            console.log('调用了set方法');
            this._year = newvalue;
            this.edition += 1;
        }
    }
});
book.year; // 调用了get方法
book.year = 2021; // 调用了set方法

二、双向数据绑定1.0

function Bind(options) {
    this.el = options.el;
    this.data = options.data;
    getNode(this.el, this.data);
}

function getNode(el, data) {
    let inputs = document.querySelector(el);
    let children = inputs.children;
    for (let i = 0; i < children.length; i++) {
        compile(data, children[i]);
    }
}

function compile(obj, data) {
    let key = node.getAttribute('v-model');
    define(data, key, data[key]);
}

function define(obj, key, val) {
    Object.defineProperty(obj, key, {
        get: function() {
            return val;
        },
        set: function(newvalue) {
            if (val !== newvalue) {
                val = newvalue;
                document.getElementsByClassName('insert')[0].innerHTML = newvalue;
            }
        }
    })
}

let inputs = document.getElementsByTagName('input');

let vm = new Bind({
    el: '#app',
    data: {
        name: '',
        age: ''
    }
});

function input1() {
    vm.data.name = inputs[0].value;
}

function input2() {
    vm.data.age = inputs[1].value;
}

这段代码虽然实现了实现了双向数据绑定，但也仅仅只是实现了这个功能，它还存在许多bug
比如：

1. 代码整体看上去很混乱，并且复用性不强；
2. 使用的是函数的方法来定义Bind，所以编写代码的时候就需要时时考虑this的指向问题；
3. 在Bind()函数里面，如果options里面没有el这个属性，那么this.el就为null，后面在获取标签的时候也获取不了，后面也会跟着出错；compile()函数里面也没有判断key是否存在等等；
4. 在input标签里面添加oninput事件来获取输入的数据；

......

三、双向数据绑定2.0

改进：

1. 使用class来定义Bind；
2. 使用 || 来防止参数options里面不存在el，data这些数据；
3. 通过使用addEventListener来添加事件，并且考虑了兼容问题；
4. 为Bind添加了errorList数组来记录绑定时和绑定之后的错误；
5. 通过创建一个BindError对象，并采用轮询的方法，来对Bind进行监听；

index.js

class Bind {
    constructor(options) {
        this.el = options.el || "";
        this.data = options.data || {};
        this.errorList = [];
        this.getNode();
    }

    getNode() {
        this.rootNode = document.querySelector(this.el);
        const children = this.rootNode ? Array.prototype.slice.call(this.rootNode.children) : [];
        children.forEach((child) => {
            this.complie(child);
        })
    }

    complie(node) {
        const key = node.getAttribute('v-model');
        if (key) {
            this.addEvent(node, 'input', (e) => {
                const { value = 'error' } = e.target;
                this.data[key] = value;
            });
            this.define(this.data, key, this.data[key]);
        } else {
            var div = document.createElement('div');
            div.appendChild(node)
            this.errorList.push(`${div.innerHTML} doesn't have attribute v-model! `);
        }
    }

    addEvent(node, type, handler) {
        if (node.addEventListener) {
            node.addEventListener(type, handler)
        } else if (node.attachEvent) {
            node.attachEvent('on' + type, handler)
        } else {
            node[type] = null;
        }
    }

    define(obj, key, val) {
        Object.defineProperty(obj, key, {
            get: function () {
                return val;
            },
            set: function (newvalue) {
                if (newvalue !== val) {
                    val = newvalue;
                    document.getElementsByClassName('insert')[0].innerHTML = val;
                }
            }
        });
    }
}
var error = new BindError();
var vm = new Bind({
    el: '#app',
    data: {
        name: '',
        age: ''
    }
})
error.addListenerList(vm);

error.js

class BindError {
    constructor() {
        this.listenerList = [];
    }

    addListenerList(obj) {
        this.listenerList.push(obj);
    }

    interval = setInterval(()=>{
        this.listenerList.forEach((obj)=>{
            var { errorList } = obj;
            var error = errorList.pop();
            if(error){
                throw new Error(error);
            }
        })
    },1000);
}

不足：使用轮询，容易造成资源浪费

双向数据绑定3.0

改进：不适用轮询，使用es6的Proxy来对Bind里面的errorList进行一个拦截；

class Bind {
    constructor(options) {
        this.el = options.el || "";
        this.data = options.data || {};
        this.errorList = new Proxy([], {
            set(target, prop, value) {
                Reflect.set(target, prop, value);
                throw new Error(value);
            }
        });
        this.getNode();
    }

    getNode() {
        this.rootNode = document.querySelector(this.el);
        const children = this.rootNode ? Array.prototype.slice.call(this.rootNode.children) : [];
        children.forEach((child) => {
            this.complie(child);
        })
    }

    complie(node) {
        const key = node.getAttribute('v-model');
        if (key) {
            this.addEvent(node, 'input', (e) => {
                const { value = 'error' } = e.target;
                this.data[key] = value;
            });
            this.define(this.data, key, this.data[key]);
        } else {
            var div = document.createElement('div');
            div.appendChild(node)
            this.errorList.push(`${div.innerHTML} doesn't have attribute v-model! `);
        }
    }

    addEvent(node, type, handler) {
        if (node.addEventListener) {
            node.addEventListener(type, handler)
        } else if (node.attachEvent) {
            node.attachEvent('on' + type, handler)
        } else {
            node[type] = null;
        }
    }

    define(obj, key, val) {
        Object.defineProperty(obj, key, {
            get: function () {
                return val;
            },
            set: function (newvalue) {
                if (newvalue !== val) {
                    val = newvalue;
                    document.getElementsByClassName('insert')[0].innerHTML = val;
                }
            }
        });
    }
}

var vm = new Bind({
    el: '#app',
    data: {
        name: '',
        age: ''
    }
})