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(){ varo={a:1}//声明一个对象,包含一个a属性,值为1 Object.defineProperty(o,"b",{ get:function(){ returnthis.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
目标实现,以下是我们想要的达到的效果
importwatcherfrom'./watcher.js'; letwm=newwatcher({ data:{ a:0 }, watch:{ a(newVal,oldVal){ console.log('newVal:'+newVal); console.log('oldVal:'+oldVal); } } }) vm.a=1 //newVal:1 //oldVal:0
创建构造对象
classwatcher{ constructor(opts){ this.$data=opts.data; for(letkeyinopts.data){ this.setData(key,opts.data[key]) } } setData(_key,_val){ Object.defineProperty(this,_key,{ get:function(){ returnthis.$data[_key]; }, set:function(val){ constoldVal=this.$data[_key]; if(oldVal===val)returnval; this.$data[_key]=val; returnval; }, }); } } exportdefaultwatcher;
添加watch事件触发
/** *@desc属性改变监听,属性被set时出发watch的方法,类似vue的watch *@authorJason *@date2018-04-27 *@constructor *@param{object}opts-构造参数.@default{data:{},watch:{}}; *@argument{object}data-要绑定的属性 *@argument{object}watch-要监听的属性的回调 *watch@callback(newVal,oldVal)-新值与旧值 */ classwatcher{ constructor(opts){ this.$data=this.getBaseType(opts.data)==='Object'?opts.data:{}; this.$watch=this.getBaseType(opts.watch)==='Object'?opts.watch:{}; for(letkeyinopts.data){ this.setData(key) } } getBaseType(target){ consttypeStr=Object.prototype.toString.apply(target); returntypeStr.slice(8,-1); } setData(_key){ Object.defineProperty(this,_key,{ get:function(){ returnthis.$data[_key]; }, set:function(val){ constoldVal=this.$data[_key]; if(oldVal===val)returnval; this.$data[_key]=val; this.$watch[_key]&&typeofthis.$watch[_key]==='function'&&( this.$watch[_key].call(this,val,oldVal) ); returnval; }, }); } } exportdefaultwatcher;
- 为了函数内部的健壮性,getBaseType是用来做类型校验的。
- Object.defineProperty(this),this把上下文指向当前对象。
- this.$watch[_key].call(this,val,oldVal),把监听事件的上下文页绑定到当前对象,方便在watch内通过this获取对象内的值,如下
letwm=newwatcher({ data:{ a:0, b:'hello' }, watch:{ a(newVal,oldVal){ console.log(this.b); } } })
总结
有人可能会问为什么不直接用vue呢。你也知道vue是一个工程级别的框架,做比较大的项目当然是用vue,react;但是单单做一个展示性的官网或者做个移动端的H5宣传页也用上vue吗?那当然是没有必要的。
用上这一个watcher类,可以让你页面的状态控制有条理、有迹可循。
比如几个按钮联动一个或几个视图的改变和动效的时候,你就不用在每个按钮的click时都触发一下修改
btn1.onclick=function(){ vara='haha'; document.getElementById('id').innerHTML=a; } btn2.onclick=function(){ vara='xixi'; document.getElementById('id').innerHTML=a; } letwm=newwatcher({ data:{ a:"", }, watch:{ a(newVal,oldVal){ document.getElementById('id').innerHTML=newVal; } } }) btn1.onclick=function(){ wm.a='haha'; } btn2.onclick=function(){ wm.a='xixi'; }
但是如果你的视图不被2个以上动作联动的话,也未必会用上。