js技巧之十几行的代码实现vue.watch代码


            getter和setter

getter 是一种获得属性值的方法，setter是一种设置属性值的方法。

属性被赋值 a = 1的时候, a 的原型内的setter就会被触发；

而 console.log(a) 的时候，a 的原型内的getter就会被触发。

实现getter和setter

我们不能直接给变量的setter和getter 绑定事件函数，为了实现绑定我们要借助Object对象来构造带有setter和getter的属性。

这里有前辈总结的 几种实现getter和setter的方法，而且他还总结了一些Object.prototype内控制属性枚举的特性的隐式属性。

我这里选用了比较好构造的一种 Object.defineProperty



概要

Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj

需要定义属性的对象。

prop

需被定义或修改的属性名。

descriptor

需被定义或修改的属性的描述符。





  第一个参数，被构造的属性的this指向的对象

  第二个参数，被构造的属性名

  第三个参数，构造的规则（上面的文字链接最后面有介绍）







(function () {

  var o = { a : 1}//声明一个对象,包含一个 a 属性,值为1

  Object.defineProperty(o,"b",{

    get: function () {

      return this.a;

    },

    set : function (val) {

      this.a = val;

    },

    configurable : true

  });



  console.log(o.b);//==> 1

  o.b = 2;

  console.log(o.b);//==> 2

})();



configurable是指 "b" 是否可以被再配置，默认是false。false的话

Object.defineProperty(o,"a",{set : function(val){}} );

再修改时会不起作用或者报错，一般默认false。

构造我们的vue.watch

目标实现，以下是我们想要的达到的效果





import watcher from './watcher.js';

let wm = new watcher({

  data:{

    a: 0 

  },

  watch:{

    a(newVal,oldVal){

      console.log('newVal:'+newVal);

      console.log('oldVal:'+oldVal);

    }

  }

})

vm.a = 1 

// newVal:1

// oldVal:0



创建构造对象





class watcher{

  constructor(opts){

    this.$data = opts.data;

    for(let key in opts.data){

      this.setData(key,opts.data[key])

    }

  }



  setData(_key,_val){

    Object.defineProperty(this,_key,{

      get: function () {

        return this.$data[_key];

      },

      set : function (val) {

        const oldVal = this.$data[_key];

        if(oldVal === val)return val;

        this.$data[_key] = val;

        return val;

      },

    });

  }

}



export default watcher;



添加 watch事件触发





/**

 * @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch

 * @author Jason

 * @date 2018-04-27

 * @constructor 

 * @param {object} opts - 构造参数. @default {data:{},watch:{}};

 * @argument {object} data - 要绑定的属性

 * @argument {object} watch - 要监听的属性的回调 

 * watch @callback (newVal,oldVal) - 新值与旧值 

 */

class watcher{

  constructor(opts){

    this.$data = this.getBaseType(opts.data) === 'Object' ? opts.data : {};

    this.$watch = this.getBaseType(opts.watch) === 'Object' ? opts.watch : {};

    for(let key in opts.data){

      this.setData(key)

    }

  }



  getBaseType(target) {

    const typeStr = Object.prototype.toString.apply(target);

  

    return typeStr.slice(8, -1);

  }



  setData(_key){

    Object.defineProperty(this,_key,{

      get: function () {

        return this.$data[_key];

      },

      set : function (val) {

        const oldVal = this.$data[_key];

        if(oldVal === val)return val;

        this.$data[_key] = val;

        this.$watch[_key] && typeof this.$watch[_key] === 'function' && (

          this.$watch[_key].call(this,val,oldVal)

        );

        return val;

      },

    });

  }

}



export default watcher;





  为了函数内部的健壮性，getBaseType是用来做类型校验的。

  Object.defineProperty(this),this把上下文指向当前对象。

  this.$watch[_key].call(this,val,oldVal),把监听事件的上下文页绑定到当前对象，方便在watch内通过this获取对象内的值，如下







let wm = new watcher({

  data:{

    a: 0,

    b: 'hello'

  },

  watch:{

    a(newVal,oldVal){

      console.log(this.b);

    }

  }

})



总结

有人可能会问为什么不直接用vue呢。你也知道vue是一个工程级别的框架，做比较大的项目当然是用vue，react；但是单单做一个展示性的官网或者做个移动端的H5宣传页也用上vue吗？那当然是没有必要的。

用上这一个watcher类，可以让你页面的状态控制有条理、有迹可循。

比如几个按钮联动一个或几个视图的改变和动效的时候，你就不用在每个按钮的click时都触发一下修改





 btn1.onclick=function(){

  var a = 'haha';

  document.getElementById('id').innerHTML = a;

 }

 btn2.onclick=function(){

  var a = 'xixi';

  document.getElementById('id').innerHTML = a;

 }

let wm = new watcher({

  data:{

    a: "",

  },

  watch:{

    a(newVal,oldVal){

      document.getElementById('id').innerHTML = newVal;

    }

  }

})



btn1.onclick=function(){

  wm.a = 'haha';

 }

 btn2.onclick=function(){

  wm.a = 'xixi';

 }



但是如果你的视图不被2个以上动作联动的话，也未必会用上。