关于前端:微型Vue框架实现Part2数据代理实现

数据代理实现的底层

• 应用 Object.defineProperty()

object 类型的代理实现

• 单纯的对象构造

   obj = {
     num: 20,
     name: 'xx'
   }

• 对象嵌套对象的数据结构

   obj = {
     name: "xx",
     obj: {
        num: 20,
        age: 33
     }
   }

• 代码实现

  /**
   * 代理数据对象
   */
  
  function getObjKey(obj) {return Object.keys(obj);
  }
  function getNameSpace (nameSpace, key) {if (key === null || key === "") {return nameSpace;}else if(nameSpace === null || nameSpace === "") {return key}else {return nameSpace + "." + key}
  }
  
  
  function constructObjProxy (vm, options, nameSpace){let proxyObj = {};
    
    const optionAllKey = getObjKey(options);
    optionAllKey.forEach((key, index) => {
      {
        /**
         * proxyObj 对象 代理 options 的 key
         * 目标：监听 data 对象中的值
         */
        Object.defineProperty(proxyObj, key, {
            configurable: true,
            get: function() {return options[key]
            },
            set: function(value) {console.log("proxyObj 对象代理——扭转的时候做点什么。。。");
  
                options[key] = value;
            }
        })
      }
  
      {
        /**
         * vm 实例 代理 options 的 key
         * 目标：vm 实例能批改 data 中的指
         */
        Object.defineProperty(vm, key, {
            configurable: true,
            get: function() {return options[key]
            },
            set: function(value) {console.log("vm 代理 key——扭转时候做点什么。。。");
  
                options[key] = value;
            }
        })
      }
  
      // 对象嵌套对象的状况
      if(options[key] instanceof Object) {options[key] = constructProxy(vm, options[key], getNameSpace(nameSpace, key))
      }
    })
  
    return proxyObj;
  }
  
  
  /**
   * 
   * @param {*} vm 实例对象
   * @param {*} options 须要代理的数据对象
   * @param {*} nameSpace 命名空间
   * 
   * 仅针对 object、Array 类型的数据进行代理
   */
  export  function constructProxy(vm, options, nameSpace) {
    let proxyObj = null;
    if(options instanceof Object) {proxyObj = constructObjProxy(vm, options, nameSpace)
    }else if(options instanceof Array) { }else {throw new Error("this is not proxy object");
    }
  
    return proxyObj
  }