• 修改prototype使Event支持observe任何对象


    上次对js自定义事件做了一些介绍,这次修改prototype使得Event对象支持observe任何对象,代码如下:
    var Event = {
        observers: 
    false,
        observe: 
    function(element, name, observer, useCapture) {
            
    if(typeof element == 'string')
                element 
    = document.getElementById(element);
            useCapture 
    = useCapture || false;
            
            
    if (name == 'keypress' &&
                (navigator.appVersion.match(
    /Konqueror|Safari|KHTML/)
                
    || element.attachEvent))
              name 
    = 'keydown';
            
            
    this._observeAndCache(element, name, observer, useCapture);
        }
    ,
        _observeAndCache: 
    function(element, name, observer, useCapture) {
            alert(
    this)
            
            
    if (!this.observers) this.observers = [];
            
    if(element.tagName){
                
    this.observers.push([element, name, observer, useCapture]);
                
    if (element.addEventListener) {      
                  element.addEventListener(name, observer, useCapture);
                }
     else if (element.attachEvent) {
                  element.attachEvent('on' 
    + name, observer);
                }

            }
    else if(typeof element[name] == 'function'){
                
    var s = element[name].toString();
                s 
    = s.substring(0, s.lastIndexOf('}
    ')) + 'Event.occor(this,\'' + name + '\')'
                s 
    = s.replace('function(){', '')
                s 
    = s.replace(/return/img,'Event.occor(this, \'' + name + '\');return')
                element[name] 
    = new Function(s)
                
    this.observers.push([element, name, observer, useCapture]);
            }

        }
    ,
        occor:
    function(obj, method){
            
    var arr = [];
            
    for(var i=0; i<Event.observers.length; i++){
                
    if(Event.observers[i][0]==obj && Event.observers[i][1]==method) arr.push(Event.observers[i][2]);
            }

            
    for(var i=0; i<arr.length; i++){
                arr[i]();
            }

        }

    }


    function F(){
        
    this.method = function(){
            alert('f.method is called')
            
    for(i=0; i<10; i++){
            }

            
    return;
        }

    }


    var f = new F()
    Event.observe(f, 'method', 
    function(){alert(1)}false)
    f.method()
    当然如果你不想修改prototype,也可以参考下面的代码:
    var Observer = {
        __list:[],
        observe:
    function(obj, pro, fun, b){
            
    if(typeof obj[pro] != 'function')
                
    return;
            
    this.__list.push({o:obj, p:pro, f:fun})
            
    var s = obj[pro].toString();
            s 
    = s.substring(0, s.lastIndexOf('}
    ')) + 'Observer.__occor(this,\'' + pro + '\')'
            s 
    = s.replace('function(){', '')
            
    if(b)
                s 
    = s.replace(/return/img,'Observer.__occor(this, \'' + pro + '\');return')
            document.write(s)
            obj[pro] 
    = new Function(s)
        }
    ,
        __occor:
    function(obj, method){
            
    var arr = []
            
    for(var i=0; i<this.__list.length; i++){
                
    if(Observe.__list[i].o==obj && Observer.__list[i].p==method) arr.push(Observer.__list[i]);
            }

            
    for(var i=0; i<arr.length; i++){
                arr[i].f();
            }

        }

    }
  • 相关阅读:
    js基础
    装饰模式,代理模式,继承
    Retrofit源码解析
    Android Studio自定义Plugin
    EMV笔记:持卡人认证(CVM)
    阿里代码规范笔记
    文章博客网址收集
    MultiDex解析
    EMV随记(1)
    RSA笔记
  • 原文地址:https://www.cnblogs.com/boolean/p/589113.html
Copyright © 2020-2023  润新知