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

10次阅读

共计 1370 个字符，预计需要花费 4 分钟才能阅读完成。

应用 Object.defineProperty()

单纯的对象构造
```
 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
}

正文完