zoukankan      html  css  js  c++  java
  • Javascript监视变量变化

    大家应该知道,在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();
     将对对象内部变量(私有变量)的赋值操作提取到了方法中,而在该方法中触发相应的变量值更改回调方法。

    按说这样搞就能监视变量 的更改了,但是在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 }

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

    OK,好东西。收藏。

    <h3>
       心静似高山流水不动,心清若巫峰雾气不沾。
    </h3>
  • 相关阅读:
    一道题串联lambda表达式、链式编程、函数式接口、Stream流式计算
    JUC-8锁问题
    JUC-Java中的生产者消费者问题
    Jenkins配置
    kubernetes的配置
    容器技术之Docker的网站搭建
    CentOS 使用yum安装ELK环境命令详解
    golang学习笔记——context库
    golang学习笔记——sync库
    golang学习笔记——select
  • 原文地址:https://www.cnblogs.com/McJeremy/p/1760385.html
Copyright © 2011-2022 走看看