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 全角转半角部分
Oct 28 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
简介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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
华为C++笔试题
2014/08/05 面试题
财务分析个人的自荐书范文
2013/11/24 职场文书
工作表扬信的范文
2014/01/10 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
党员理论学习心得体会
2016/01/21 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
PHP正则表达式之RCEService回溯
2022/04/11 PHP