大家应该知道,在C#中对于属性、文件等的更改监视非常简单,因为有委托(事件)、FileSystemWatcher等好东东扶持。
那么在JavaScript中,如何对变量的更改进行监视呢?首先,我仿照c#的属性来对JS进行操作,写出了如下的示例:
1 function Class1()
2 {
3 var oldValue='';
4 var name='xu';
5 var id='1';
6 this.setName=function(n)
7 {
8 oldValue=name;
9 name=n;
10 this.propertyChange('name',oldValue,n);
11 }
12 this.setID=function(n)
13 {
14 oldValue=id;
15 id=n;
16 this.propertyChange('id',oldValue,n);
17 }
18 this.display=function()
19 {
20 alert(name+'\'s id is :'+id);
21 }
22 }
23 Class1.prototype={
24 propertyChange:function(propertyName,oldValue,newValue)
25 {
26 alert(propertyName+'\'s value changed from '+oldValue+' to '+newValue);
27 }
28 };
29
30 var c=new Class1();
31 c.setName('xu22');
32 c.setID('5');
33 c.display();
2 {
3 var oldValue='';
4 var name='xu';
5 var id='1';
6 this.setName=function(n)
7 {
8 oldValue=name;
9 name=n;
10 this.propertyChange('name',oldValue,n);
11 }
12 this.setID=function(n)
13 {
14 oldValue=id;
15 id=n;
16 this.propertyChange('id',oldValue,n);
17 }
18 this.display=function()
19 {
20 alert(name+'\'s id is :'+id);
21 }
22 }
23 Class1.prototype={
24 propertyChange:function(propertyName,oldValue,newValue)
25 {
26 alert(propertyName+'\'s value changed from '+oldValue+' to '+newValue);
27 }
28 };
29
30 var c=new Class1();
31 c.setName('xu22');
32 c.setID('5');
33 c.display();
按说这样搞就能监视变量 的更改了,但是在FireFox的官方网站上有一个叫Object.watch(unwatch)的东东,可以用来监视变量的变更。
非常可惜的是,这个方法在IE等浏览器下不能正常运行。俺到网上搜了一番,在
http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes
中找到如下东东:
1 if (!Object.prototype.watch)
2 {
3 Object.prototype.watch = function (prop, handler)
4 {
5 var oldval = this[prop], newval = oldval,
6 getter = function ()
7 {
8 return newval;
9 },
10 setter = function (val)
11 {
12 oldval = newval;
13 return newval = handler.call(this, prop, oldval, val);
14 };
15 if (delete this[prop])
16 {
17 if (Object.defineProperty) // ECMAScript 5
18 {
19 Object.defineProperty(this, prop, {get: getter,set: setter});
20 }
21 else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__)
22 {
23 Object.prototype.__defineGetter__.call(this, prop, getter);
24 Object.prototype.__defineSetter__.call(this, prop, setter);
25 }
26 }
27 };
28 }
29
30 if (!Object.prototype.unwatch)
31 {
32 Object.prototype.unwatch = function (prop)
33 {
34 var val = this[prop];
35 delete this[prop];
36 this[prop] = val;
37 };
38 }
2 {
3 Object.prototype.watch = function (prop, handler)
4 {
5 var oldval = this[prop], newval = oldval,
6 getter = function ()
7 {
8 return newval;
9 },
10 setter = function (val)
11 {
12 oldval = newval;
13 return newval = handler.call(this, prop, oldval, val);
14 };
15 if (delete this[prop])
16 {
17 if (Object.defineProperty) // ECMAScript 5
18 {
19 Object.defineProperty(this, prop, {get: getter,set: setter});
20 }
21 else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__)
22 {
23 Object.prototype.__defineGetter__.call(this, prop, getter);
24 Object.prototype.__defineSetter__.call(this, prop, setter);
25 }
26 }
27 };
28 }
29
30 if (!Object.prototype.unwatch)
31 {
32 Object.prototype.unwatch = function (prop)
33 {
34 var val = this[prop];
35 delete this[prop];
36 this[prop] = val;
37 };
38 }
通过__defineSetter__来对赋值操作监听~~~
OK,好东西。收藏。