Javascript監(jiān)視變量變化的方法
本文實(shí)例講述了Javascript監(jiān)視變量變化的方法。分享給大家供大家參考。具體分析如下:
大家應(yīng)該知道,在C#中對(duì)于屬性、文件等的更改監(jiān)視非常簡(jiǎn)單,因?yàn)橛形校ㄊ录ileSystemWatcher等好東東扶持。
那么在JavaScript中,如何對(duì)變量的更改進(jìn)行監(jiān)視呢?首先,我仿照c#的屬性來(lái)對(duì)JS進(jìn)行操作,寫(xiě)出了如下的示例:
function Class1() { var oldValue=''; var name='xu'; var id='1'; this.setName=function(n) { oldValue=name; name=n; this.propertyChange('name',oldValue,n); } this.setID=function(n) { oldValue=id; id=n; this.propertyChange('id',oldValue,n); } this.display=function() { alert(name+'\'s id is :'+id); } } Class1.prototype={ propertyChange:function(propertyName,oldValue,newValue) { alert(propertyName+'\'s value changed from '+oldValue+' to '+newValue); } }; var c=new Class1(); c.setName('xu22'); c.setID('5'); c.display();
將對(duì)對(duì)象內(nèi)部變量(私有變量)的賦值操作提取到了方法中,而在該方法中觸發(fā)相應(yīng)的變量值更改回調(diào)方法。
按說(shuō)這樣搞就能監(jiān)視變量 的更改了,但是在FireFox的官方網(wǎng)站上有一個(gè)叫Object.watch(unwatch)的東東,可以用來(lái)監(jiān)視變量的變更。
非??上У氖?,這個(gè)方法在IE等瀏覽器下不能正常運(yùn)行。俺到網(wǎng)上搜了一番,在
http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes
中找到如下東東:
if (!Object.prototype.watch) { Object.prototype.watch = function (prop, handler) { var oldval = this[prop], newval = oldval, getter = function () { return newval; }, setter = function (val) { oldval = newval; return newval = handler.call(this, prop, oldval, val); }; if (delete this[prop]) { if (Object.defineProperty) // ECMAScript 5 { Object.defineProperty(this, prop, {get: getter,set: setter}); } else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) { Object.prototype.__defineGetter__.call(this, prop, getter); Object.prototype.__defineSetter__.call(this, prop, setter); } } }; } if (!Object.prototype.unwatch) { Object.prototype.unwatch = function (prop) { var val = this[prop]; delete this[prop]; this[prop] = val; }; }
通過(guò)__defineSetter__來(lái)對(duì)賦值操作監(jiān)聽(tīng)~~~
OK,好東西。收藏一下。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript使用push方法添加一個(gè)元素到數(shù)組末尾用法實(shí)例
這篇文章主要介紹了JavaScript使用push方法添加一個(gè)元素到數(shù)組末尾,實(shí)例分析了javascript中push函數(shù)的使用技巧,需要的朋友可以參考下2015-04-04html的DOM中Event對(duì)象onabort事件用法實(shí)例
這篇文章主要介紹了html的DOM中Event對(duì)象onabort事件用法,實(shí)例分析了onabort事件的適用范圍與對(duì)應(yīng)的javascript使用技巧,需要的朋友可以參考下2015-01-01JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07淺談JavaScript構(gòu)造樹(shù)形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹(shù)形結(jié)構(gòu)的一種高效算法,對(duì)算法感興趣的同學(xué),可以參考下2021-05-05一文吃透JS樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)
在開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí),常常會(huì)涉及到各種樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯,例如:增,刪,改,查等。而樹(shù)狀結(jié)構(gòu)的處理就沒(méi)有數(shù)組那么的直觀(guān)。本文為大家總結(jié)了JS樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理的方法,需要的可以參考下2022-07-07javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實(shí)例形式分析了在不同場(chǎng)合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01JavaScript的內(nèi)置對(duì)象Date詳解
這篇文章主要為大家介紹了vue組件通信的幾種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11