数据劫持

数据劫持

• 将来我们在使用框架的时(vue),框架目前都支持一个"数据驱动视图"" 完成数据驱动视图 需要帮助我们完成
• 以原始数据为基础,对数据进行一份复刻 复刻出来的数据不允许修改的,值从原始数据里面获取

语法 Object.defineProperty('哪一个对象', '属性', '配置项')

<h1></h1>
  <h2 class="box">1</h2>

    const h1 = document.querySelector('h1')
    const box = document.querySelector('.box')
    const obj = {}
     obj.age = 18
    obj.name = '张三'
    //将obj里的属性  劫持到这个对象中
    res = {}
    Object.defineProperty(res, "age", {
      // value: 18,
      // writable: true,//能否被修改
      enumerable: true,//该属性能不能被遍历到
      get() { //叫做getter获取器,可以决定当前属性的值与value writable冲突
        // console.log("my name is gg");
        return obj.age
      },
      set(val) {
       //console.log("你现在想要修改obj的age属性,所以出发了setter函数", "你想要设置的值为" + val);
       h1.innerHTML = `res 年龄:${val}`
       obj.age = val
      }

    })
    obj.age = 99
    console.log(obj);
    h1.innerHTML = `res 年龄:${res.age}`
    box.innerHTML = `obj 年龄:${obj.age}`

封装数据劫持

html :

 <h1 class="box1">1</h1>
 <h1 class="box2">2</h1>

  //原始对象
   const obj = {}
   obj.name = '张三'
   obj.age = 18

   //如果劫持的属性多了,原本的写法不太方便,代码量比较多,所以封装数据劫持
   function observer(origin, callback) {
     const target = {}
     for (let key in origin) {
       Object.defineProperty(target, key, {
         enumerable: true,
         get() {
           return origin[key]
         },
         set(val) {
           // box1.innerHTML = `res 年龄:${val}`
           console.log(1);
           origin[key] = val
           callback(target)
         }
       })
     }
     return target
   }
   function fn(res) {
     box1.innerHTML = `年龄:${res.age};名字:${res.name}`
     console.log(111);
   }
   const newObj = observer(obj, fn)
   newObj.age = 666
   newObj.name = '阿瑟斯'