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

前端之家收集整理的这篇文章主要介绍了js技巧之十几行的代码实现vue.watch代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

getter和setter

getter 是一种获得属性值的方法,setter是一种设置属性值的方法属性被赋值 a = 1的时候,a 的原型内的setter就会被触发; 而 console.log(a) 的时候,a 的原型内的getter就会被触发。

实现getter和setter

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

这里有前辈总结的 方法,而且他还总结了一些Object.prototype内控制属性枚举的特性的隐式属性

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

概要 Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。 语法 Object.defineProperty(obj,prop,descriptor) 参数 obj 需要定义属性的对象。 prop 需被定义或修改属性名。 descriptor 需被定义或修改属性的描述符。

  1. 第一个参数,被构造的属性的this指向的对象
  2. 第二个参数,被构造的属性
  3. 第三个参数,构造的规则(上面的文字链接最后面有介绍)
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

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

创建构造对象

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事件触发

属性改变监听,属性被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,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,oldVal),把监听事件的上下文页绑定到当前对象,方便在watch内通过this获取对象内的值,如下

总结

有人可能会问为什么不直接用vue呢。你也知道vue是一个工程级别的框架,做比较大的项目当然是用vue,react;但是单单做一个展示性的官网或者做个移动端的H5宣传页也用上vue吗?那当然是没有必要的。 用上这一个watcher类,可以让你页面的状态控制有条理、有迹可循。 比如几个按钮联动一个或几个视图的改变和动效的时候,你就不用在每个按钮的click时都触发一下修改

btn1.onclick=function(){
wm.a = 'haha';
}
btn2.onclick=function(){
wm.a = 'xixi';
}

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

原文链接:https://www.f2er.com/vue/31958.html

猜你在找的Vue相关文章