js中如何实现vue.watch
这篇文章主要为大家展示了“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的属性。
这里有前辈总结的 几种实现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'; }
以上是“js中如何实现vue.watch”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文题目:js中如何实现vue.watch
网站网址:http://pwwzsj.com/article/jgddcg.html