10分钟快速实现数据双向绑定

概念

双向绑定概念其实很简单,就是视图(View)的变化能实时让数据模型(Model)发生变化,而数据的变化也能实时更新到视图层。我们所说的单向数据绑定就是从数据到视图这一方向的关系。

分析

1、响应式数据

使用Object.defineProperty、Proxy对数据进行监听拦截。

//obj:必需。目标对象
//prop:必需。需定义或修改的属性的名字
//descriptor:必需。目标属性所拥有的特性
Object.defineProperty(obj, prop, descriptor)

vue3.0 开始 Proxy代替Object.defineProperty

let p = new Proxy(target, handler);

2、input事件监听

绑定事件处理函数,实时修改数据。

3、相关dom操作

将数据与相关dom节点绑定在一起,修改数据的时候对应的dom节点也应一起改变。

实现

1、html页面



    
        
        v-model
    
    
        

姓名:{{name}}

年龄:{{age}}

年龄:{{age}}

10分钟快速实现数据双向绑定_第1张图片

2、VModel.js

(1)构造VModel

class  VModel {
    constructor(el,data) {
        this.el = document.querySelector(el);
        //存放数据对象
        this._data = data;
        //存放绑定数据的dom节点
        this.domPoll = {};
        
        this.init();
    }
}

(2)初始化数据对象

使用Object.defineProperty
initData () {
    const _this = this;
    this.data = {};
    for(let key in this._data){
        Object.defineProperty(this.data,key,{
            get(){
                console.log("获取数据",key,_this._data[key]);
                return _this._data[key];
            },
            set(newVal){
                console.log("设置数据",key,newVal);
                _this.domPoll[key].innerText = newVal;
                _this._data[key] = newVal;
            }
        });
    }
}
使用Proxy
initData () {
    const _this = this;
    this.data = {};
    this.data = new Proxy(this.data,{
        get(target,key){
            return Reflect.get(target,key);
        },
        set(target,key,value){
            // _this.domPoll[key].innerText = value;
            _this.domPoll[key].forEach(item => {
                item.innerText = value;
            })
            return Reflect.set(target,key,value);
        }
    })
}

(3)绑定dom节点

bindDom(el){
    const childNodes = el.childNodes;
    childNodes.forEach(item => {
        //nodeType为3时该dom节点为文本节点
        if(item.nodeType === 3){
            const _value = item.nodeValue;
        
            if(_value.trim().length){
                //匹配是否有两个花括号包裹的数据
                let  _isValid = /\{\{(.+?)\}\}/.test(_value);
                if(_isValid){
                    const _key = _value.match(/\{\{(.+?)\}\}/)[1].trim();
                    // this.domPoll[_key] = item.parentNode;
                    //一个数据可以被多个dom节点绑定,所以应该用数组来进行保存
                        //未定义时先初始化
                        if(!this.domPoll[_key]) this.domPoll[_key] = [];
                        this.domPoll[_key].push(item.parentNode);
                    //替换绑定的值
                    item.parentNode.innerText = this.data[_key] || undefined;
                }
            }
        }
        //递归遍历子节点
        item.childNodes && this.bindDom(item);
    })
}

(4)输入框数据绑定

bindInput(el){
    //获取input所有元素节点
    const _allInput = el.querySelectorAll('input');
    _allInput.forEach(input => {
        const _vModel = input.getAttribute('v-model');
        //判断是否有v-model属性
        if(_vModel){
//监听输入事件            input.addEventListener('keyup',this.handleInput.bind(this,_vModel,input),false);
        }
    })
}

handleInput(key,input){
    const _value = input.value;
    //数据变化的时候会同步修改dom节点绑定的数据。
    this.data[key] = _value;
}

(4)完整代码

class  VModel {
    constructor(el,data) {
        this.el = document.querySelector(el);
        this._data = data;
        this.domPoll = {};
        
        this.init();
    }
    
    init(){
        this.initData();
        this.initDom();
    }
    initDom(){
        this.bindDom(this.el);
        this.bindInput(this.el);
        console.log('domPoll',this.domPoll);
    }
    
    initData () {
        const _this = this;
        this.data = {};
        // for(let key in this._data){
        //     Object.defineProperty(this.data,key,{
        //         get(){
        //             console.log("获取数据",key,_this._data[key]);
        //             return _this._data[key];
        //         },
        //         set(newVal){
        //             console.log("设置数据",key,newVal);
        //             _this.domPoll[key].innerText = newVal;
        //             _this._data[key] = newVal;
        //         }
        //     });
        // }
        this.data = new Proxy(this.data,{
            get(target,key){
                return Reflect.get(target,key);
            },
            set(target,key,value){
                // _this.domPoll[key].innerText = value;
                _this.domPoll[key].forEach(item => {
                    item.innerText = value;
                })
                return Reflect.set(target,key,value);
            }
        })
    }
    
    bindDom(el){
        const childNodes = el.childNodes;
        childNodes.forEach(item => {
            if(item.nodeType === 3){
                const _value = item.nodeValue;
            
                if(_value.trim().length){
                    let  _isValid = /\{\{(.+?)\}\}/.test(_value);
                    if(_isValid){
                        const _key = _value.match(/\{\{(.+?)\}\}/)[1].trim();
                        // this.domPoll[_key] = item.parentNode;
                        if(!this.domPoll[_key]) this.domPoll[_key] = [];
                        this.domPoll[_key].push(item.parentNode);
                        item.parentNode.innerText = this.data[_key] || undefined;
                    }
                }
            }
            
            item.childNodes && this.bindDom(item);
        })
    }
    
    bindInput(el){
        const _allInput = el.querySelectorAll('input');
        _allInput.forEach(input => {
            const _vModel = input.getAttribute('v-model');
            
            if(_vModel){
                input.addEventListener('keyup',this.handleInput.bind(this,_vModel,input),false);
            }
        })
    }
    
    handleInput(key,input){
        const _value = input.value;
        this.data[key] = _value;
        // console.log(this.data);
    }
    
    setData(key,value){
        this.data[key] = value;
    }
}

10分钟快速实现数据双向绑定_第2张图片

你可能感兴趣的