您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“js中如何實現(xiàn)vue.watch”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js中如何實現(xiàn)vue.watch”這篇文章吧。
getter和setter
getter 是一種獲得屬性值的方法,setter是一種設(shè)置屬性值的方法。
屬性被賦值 a = 1的時候, a 的原型內(nèi)的setter就會被觸發(fā);
而 console.log(a) 的時候,a 的原型內(nèi)的getter就會被觸發(fā)。
實現(xiàn)getter和setter
我們不能直接給變量的setter和getter 綁定事件函數(shù),為了實現(xiàn)綁定我們要借助Object對象來構(gòu)造帶有setter和getter的屬性。
這里有前輩總結(jié)的 幾種實現(xiàn)getter和setter的方法,而且他還總結(jié)了一些Object.prototype內(nèi)控制屬性枚舉的特性的隱式屬性。
我這里選用了比較好構(gòu)造的一種 Object.defineProperty
概要
Object.defineProperty() 方法直接在一個對象上定義一個新屬性,或者修改一個已經(jīng)存在的屬性, 并返回這個對象。
語法
Object.defineProperty(obj, prop, descriptor)
參數(shù)
obj
需要定義屬性的對象。
prop
需被定義或修改的屬性名。
descriptor
需被定義或修改的屬性的描述符。
第一個參數(shù),被構(gòu)造的屬性的this指向的對象
第二個參數(shù),被構(gòu)造的屬性名
第三個參數(shù),構(gòu)造的規(guī)則(上面的文字鏈接最后面有介紹)
(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" 是否可以被再配置,默認(rèn)是false。false的話
Object.defineProperty(o,"a",{set : function(val){}} );
再修改時會不起作用或者報錯,一般默認(rèn)false。
構(gòu)造我們的vue.watch
目標(biāo)實現(xiàn),以下是我們想要的達(dá)到的效果
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
創(chuàng)建構(gòu)造對象
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事件觸發(fā)
/** * @desc 屬性改變監(jiān)聽,屬性被set時出發(fā)watch的方法,類似vue的watch * @author Jason * @date 2018-04-27 * @constructor * @param {object} opts - 構(gòu)造參數(shù). @default {data:{},watch:{}}; * @argument {object} data - 要綁定的屬性 * @argument {object} watch - 要監(jiān)聽的屬性的回調(diào) * 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;
為了函數(shù)內(nèi)部的健壯性,getBaseType是用來做類型校驗的。
Object.defineProperty(this),this把上下文指向當(dāng)前對象。
this.$watch[_key].call(this,val,oldVal),把監(jiān)聽事件的上下文頁綁定到當(dāng)前對象,方便在watch內(nèi)通過this獲取對象內(nèi)的值,如下
let wm = new watcher({ data:{ a: 0, b: 'hello' }, watch:{ a(newVal,oldVal){ console.log(this.b); } } })
總結(jié)
有人可能會問為什么不直接用vue呢。你也知道vue是一個工程級別的框架,做比較大的項目當(dāng)然是用vue,react;但是單單做一個展示性的官網(wǎng)或者做個移動端的H5宣傳頁也用上vue嗎?那當(dāng)然是沒有必要的。
用上這一個watcher類,可以讓你頁面的狀態(tài)控制有條理、有跡可循。
比如幾個按鈕聯(lián)動一個或幾個視圖的改變和動效的時候,你就不用在每個按鈕的click時都觸發(fā)一下修改
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中如何實現(xiàn)vue.watch”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。