• mvvm原理以及技术衍生

 

 

  • Object.defineProperty





// 这是将要被劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给大家推荐一款超好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('一刀666，元宝掉不停');
  } else {
    console.log('来做我的兄弟');
  }
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`大家好,我系${newVal}`);
      say(newVal);
    },
  });
});

data.name = '渣渣辉';




 






Object.keys(obj).forEach(key => { Object.defineProperty(obj, key, { // ... }) })





 


    

  • 不能监听数组的变化
    • 

  • 必须遍历对象的每个属性
    • 

  • 必须深层遍历嵌套的对象
    • 



　　


 


 




let obj = {name:'Joe',age:100} 

let obj1 = new Proxy(obj,{
  get:function(target,key,receiver){
    console.log(`get ${key}`)
    return Reflect.get(target,key,receiver)
  },
  set:function(target,key,value,receiver){
    console.log(`set ${key}`)
    return Reflect.set(target,key,value,receiver)
  }
})

console.log(obj1.name)    // get name     "Joe"
obj1.name="Bob"           // set name
console.log(obj1.name)    // get name     "Bob"




 






缺点：Object.defineProperty的第一个缺陷,无法监听数组变化


区别：


    

  • Proxy可以直接监听对象而非属性
    • 

  • Proxy直接可以劫持整个对象,并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty。
    • 

  • Proxy可以直接监听数组的变化
    • 

  • Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。
    • 







 


 


    

  • 

    mvvm背景下的前端框架的数据维护
    

    • 



 


状态管理方案（vuex,redux)。


子父组件直接传值


    

  • 

    数据变化而页面不变
    

    • 

  • 

    前端工具集成（小程序）
    

    • 



 




自动化测试


    

  1. 

    　　开启测试链接端口
    

    2. 





 ./cli.bat --auto C:/project/comperny/cz-wechat-app --auto-port 23345