Javascript监视变量变化的方法


Posted in Javascript onJune 09, 2015

本文实例讲述了Javascript监视变量变化的方法。分享给大家供大家参考。具体分析如下:

大家应该知道,在C#中对于属性、文件等的更改监视非常简单,因为有委托(事件)、FileSystemWatcher等好东东扶持。

那么在JavaScript中,如何对变量的更改进行监视呢?首先,我仿照c#的属性来对JS进行操作,写出了如下的示例:

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();

将对对象内部变量(私有变量)的赋值操作提取到了方法中,而在该方法中触发相应的变量值更改回调方法。

按说这样搞就能监视变量 的更改了,但是在FireFox的官方网站上有一个叫Object.watch(unwatch)的东东,可以用来监视变量的变更。

非常可惜的是,这个方法在IE等浏览器下不能正常运行。俺到网上搜了一番,在

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;
   };
}

通过__defineSetter__来对赋值操作监听~~~

OK,好东西。收藏一下。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
localStorage实现便签小程序
Nov 28 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
小程序实现搜索框功能
Mar 26 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 #Javascript
JavaScript中的splice()方法使用详解
Jun 09 #Javascript
JavaScript实现Iterator模式实例分析
Jun 09 #Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 #Javascript
JavaScript数组迭代器实例分析
Jun 09 #Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 #Javascript
JavaScript中的some()方法使用详解
Jun 09 #Javascript
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP7 list() 函数修改
2021/03/09 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
校运会入场式解说词
2014/02/10 职场文书
机关作风建设工作总结
2014/10/23 职场文书
计划生育汇报材料
2014/12/26 职场文书
团代会邀请函
2015/02/02 职场文书
销售业务员岗位职责
2015/02/13 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
申请吧主发表的感言
2015/08/03 职场文书
课改心得体会范文
2016/01/25 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫