Javascript監(jiān)視變量變化的方法
本文實(shí)例講述了Javascript監(jiān)視變量變化的方法。分享給大家供大家參考。具體分析如下:
大家應(yīng)該知道,在C#中對(duì)于屬性、文件等的更改監(jiān)視非常簡(jiǎn)單,因?yàn)橛形校ㄊ录?、FileSystemWatcher等好東東扶持。
那么在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-04
html的DOM中Event對(duì)象onabort事件用法實(shí)例
這篇文章主要介紹了html的DOM中Event對(duì)象onabort事件用法,實(shí)例分析了onabort事件的適用范圍與對(duì)應(yīng)的javascript使用技巧,需要的朋友可以參考下2015-01-01
JavaScript編寫(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ù)組那么的直觀。本文為大家總結(jié)了JS樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理的方法,需要的可以參考下2022-07-07
javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實(shí)例形式分析了在不同場(chǎng)合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01
JavaScript的內(nèi)置對(duì)象Date詳解
這篇文章主要為大家介紹了vue組件通信的幾種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11

