前端唠嗑

• 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. 　　开启测试链接端口

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