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 相关文章推荐
jquery动态加载select下拉框示例代码
Dec 10 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 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
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
linux iconv方法的使用
2011/10/01 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP7 标准库修改
2021/03/09 PHP
可输入的下拉框
2006/06/19 Javascript
一个对于js this关键字的问题
2007/01/09 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
AOP的定义以及作用
2013/09/08 面试题
优秀毕业生推荐信
2013/11/02 职场文书
个人合作协议书范本
2014/04/18 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
中秋晚会致辞
2015/07/31 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL