逻辑 -> 数据 <—>视图

    1. /**
    2.  * 1. 数据 -> 响应式数据 Object.defineProperty  Proxy
    3.  * 2. input -> input/keyup -> 事件处理函数的绑定 -> 改变数据
    4.  * 3. 相关的DOM & 数据  =>  绑定在一起
    5.  *    操作数据的某个属性  ->  对应DOM就改变
    6.  *  {
    7.  *      'name': [span节点]
    8.  *  }
    9.  * 
    10.  * 
    11.  * 
    12.  */
    14. const reg_var = /\{\{(.*?)\}\}/;
    16. // eslint-disable-next-line
    17. class MVVM {
    18.     constructor(el, data){
    19.         this.el = document.querySelector(el);
    20.         // this._data = data;
    21.         this.data = data;
    22.         this.domPool = {};//dom池
    24.         this.init();
    25.     }
    27.     init(){
    28.         this.initData();
    29.         this.initDom();
    30.     }
    32.     initData(){
    33.         const _this = this;
    34.         // this.data = {};
    36.         // for(const key in this._data){
    37.         //     if(typeof key === 'object'){
    38.         //         //递归
    39.         //     }
    40.         //     Object.defineProperty(this.data, key, {
    41.         //         get(){
    42.         //             console.log("获取数据: ", key, _this._data[key]);
    43.         //             return _this._data[key];
    44.         //         },
    45.         //         set(newValue){
    46.         //             if(newValue===_this._data[key]){
    47.         //                 return;
    48.         //             }
    49.         //             console.log("设置数据: ", key, _this._data[key]);
    50.         //             _this.domPool[key].innerText = newValue;
    51.         //             _this._data[key] = newValue;
    52.         //         }
    53.         //     });
    54.         // }
    57.         //Proxy写法
    58.         this.data = new Proxy(this.data, {
    59.             get(target, key){
    60.                 return Reflect.get(target, key);
    61.             },
    62.             set(target, key, value){
    63.                 _this.domPool[key].innerText = value;
    64.                 return Reflect.set(target, key, value);
    65.             }
    66.         })
    67.     }
    69.     initDom(){
    70.         this.bindDom(this.el);//这应该先执行
    71.         console.log("看看dom池子：",this.domPool);
    72.         this.bindInput(this.el);
    73.     }
    75.     //数据与DOM节点绑定--解析出{{name}}绑定到对应节点上
    76.     bindDom(el){
    77.         if(!el){
    78.             return;
    79.         }
    80.         const childNodes = el.childNodes;
    81.         // console.log("el.childNodes: ", childNodes);
    82.         childNodes.forEach(item => {
    83.             //如果是文本节点
    84.             if(item.nodeType===3){
    85.                 const _value = item.nodeValue;
    86.                 // console.log(_value);
    87.                 if(_value.trim().length){
    88.                     let _isValid = reg_var.test(_value);//捕获组&懒惰模式
    89.                     if(_isValid){
    90.                         const _key = _value.match(reg_var)[1].trim();
    91.                         console.log("匹配到的属性：", _key);
    92.                         this.domPool[_key] = item.parentNode;//其实应该是个set集合,这里简化为1v1了
    93.                         //再设置DOM
    94.                         item.parentNode.innerText = this.data[_key] || undefined;
    95.                     }
    96.                 }
    97.             }
    99.             item.childNodes && this.bindDom(item);//递归
    100.         });
    101.     }
    104.     //input--绑定事件处理函数
    105.     bindInput(el){
    106.         if(!el){
    107.             return;
    108.         }
    109.         const _allInputs = el.querySelectorAll('input');
    110.         _allInputs.forEach(input=>{
    111.             const _vModel = input.getAttribute('v-model');
    113.             if(_vModel){
    114.                 input.addEventListener('keyup', this.handleInput.bind(this, _vModel, input));
    115.             }
    116.         })
    117.     }
    119.     handleInput(key, input){
    120.         const _value = input.value;
    121.         this.data[key] = _value;
    122.     }
    124.     setData(key, value){
    125.         this.data[key] = value;
    126.     }
    127. }