关于vue.js:10分钟快速实现数据双向绑定

44次阅读

共计 4246 个字符,预计需要花费 11 分钟才能阅读完成。

概念

双向绑定概念其实很简略,就是视图(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 页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="姓名"/>
            <input type="text" v-model="age" placeholder="年龄"/>
            <div>
                <p>
                    姓名:<span>{{name}}</span>
                </p>
                <p>
                    年龄:<span>{{age}}</span>
                </p>
                <p>
                    <p>
                        年龄:<span>{{age}}</span>
                    </p>
                </p>
            </div>
            <button id="btn"> 批改名字 </button>
        </div>
    </body>
    <script src="./VModel.js"></script>
    <script>
        const app = new VModel('#app',{
            name:'',
            age:''
        });
        document.getElementById('btn').addEventListener('click',function() {app.setData('name','名字扭转了');
        })
    </script>
</html>

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;
    }
}

正文完
 0