关于前端:微型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}