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 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
类之Prototype.js学习
2007/06/13 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python编程实现使用线性回归预测数据
2017/12/07 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
pandas通过索引进行排序的示例
2018/11/16 Python
flask session组件的使用示例
2018/12/25 Python
Django框架封装外部函数示例
2019/05/28 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python ssh 执行shell命令的示例
2020/09/29 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
如何强制垃圾回收
2015/10/06 面试题
学生周末回家住宿长期请假条
2014/02/15 职场文书
六查六看剖析材料
2014/02/15 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书