Ext 源码学习之 Observal:类

　　Observable故明思义，就是观察者的意思，主要是事件的处理，在java设计模式中，有观察者这一设计模式．观察者的主要思路是，对于某一事件发生变化，能对该事件的变化
做出相应的处理．用代码来来说就是增加事件侦听，和侦听的处理机制.
Observable类在定义时，代码如下:

if(this.listeners){
        this.on(this.listeners);
        delete this.listeners;
    }

只是做了一个增加侦听的处理. on 是对方法　addListener 的定义.可以看一下 addListener方法做的事情:

    addListener : function(eventName, fn, scope, o){
        if(typeof eventName == "object"){
            o = eventName;
            for(var e in o){
                if(this.filterOptRe.test(e)){
                    continue;
                }
                if(typeof o[e] == "function"){
                    // shared options
                    this.addListener(e, o[e], o.scope,  o);
                }else{
                    // individual options
                    this.addListener(e, o[e].fn, o[e].scope, o[e]);
                }
            }
            return;
        }
        o = (!o || typeof o == "boolean") ? {} : o;
        eventName = eventName.toLowerCase();
        var ce = this.events[eventName] || true;
        if(typeof ce == "boolean"){
            ce = new Ext.util.Event(this, eventName);
            this.events[eventName] = ce;
        }
        ce.addListener(fn, scope, o);
    }

该方法主要定义事件，并增加侦听到对应的事件中.其中涉及到Event类.Event类如下:

   Ext.util.Event = function(obj, name){
        this.name = name;
        this.obj = obj;
        this.listeners = [];
    };

先定义事件的名称，对象，侦听列表，对原型重载:

    Ext.util.Event.prototype = {
        addListener : function(fn, scope, options){
            scope = scope || this.obj;
            if(!this.isListening(fn, scope)){
                var l = this.createListener(fn, scope, options);
                if(!this.firing){
                    this.listeners.push(l);
                }else{ // if we are currently firing this event, don't disturb the listener loop
                    this.listeners = this.listeners.slice(0);
                    this.listeners.push(l);
                }
            }
        },

        createListener : function(fn, scope, o){
            o = o || {};
            scope = scope || this.obj;
            var l = {fn: fn, scope: scope, options: o};
            var h = fn;
            if(o.delay){
                h = createDelayed(h, o, scope);
            }
            if(o.single){
                h = createSingle(h, this, fn, scope);
            }
            if(o.buffer){
                h = createBuffered(h, o, scope);
            }
            l.fireFn = h;
            return l;
        },

        findListener : function(fn, scope){
            scope = scope || this.obj;
            var ls = this.listeners;
            for(var i = 0, len = ls.length; i < len; i++){
                var l = ls[i];
                if(l.fn == fn && l.scope == scope){
                    return i;
                }
            }
            return -1;
        },

        isListening : function(fn, scope){
            return this.findListener(fn, scope) != -1;
        },

        removeListener : function(fn, scope){
            var index;
            if((index = this.findListener(fn, scope)) != -1){
                if(!this.firing){
                    this.listeners.splice(index, 1);
                }else{
                    this.listeners = this.listeners.slice(0);
                    this.listeners.splice(index, 1);
                }
                return true;
            }
            return false;
        },

        clearListeners : function(){
            this.listeners = [];
        },

        fire : function(){
            var ls = this.listeners, scope, len = ls.length;
            if(len > 0){
                this.firing = true;
                var args = Array.prototype.slice.call(arguments, 0);
                for(var i = 0; i < len; i++){
                    var l = ls[i];
                    if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
                        this.firing = false;
                        return false;
                    }
                }
                this.firing = false;
            }
            return true;
        }
    };

对原型重载:主要有增加侦听，创建侦听，查找侦听，判断侦听是否存在，删除侦听，清除所有侦听，触发侦听七个主要方法．
　　增加侦听：先判断侦听是否存在，如果已存在则不处理，如果不存在，则创建侦听，如果末触发则增加，如果正在触发则取触发队列进行增加．

对于增加完侦听后，可以对事件侦听的触发，触发方法　fireEvent,其方法如下:

    fireEvent : function(){
        if(this.eventsSuspended !== true){
            var ce = this.events[arguments[0].toLowerCase()];
            if(typeof ce == "object"){
                return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
            }
        }
        return true;
    }

传递两个参数，事件名称和数据.
现在有了事件和侦听，还可以触发事件，可以写个例子应用一下．一个给一个员工修改姓名时，这时将触发一个事件，通知已经修改员工姓名，并把员工新旧名列出．
//定义一个人类

person = function(name) {
        person.superclass.constructor.call(arguments);
        this.name = name;
        this.addEvents("update");//增加侦听，可以放在外面处理
};

//扩展人类，让它继承Observable类

Ext.extend(person,Ext.util.Observable,{
    setName:function(name){
       this.name = name;
    },
    update : function(name){
            if(this.hasListener("update")){
                        this.fireEvent("update",{newName:name,oldName:this.name});//更新时处理
            }
        this.name = name;
    }
});

测试:

                    var p = new person("Jacky");

                    p.on("update", function(args) {
                                alert(JSON.stringify(args));
                        });

                        p.update("Andy");

这里可以看出触发了update的事件，而且可以针对一个事件，增加多个侦听．如可以再增加侦中：

                        p.on("update", function(args) {
                                alert("SHIT");
                        });

这样设置后，在触发完事件后执行第一个侦听后，会再执行另一个侦听．如果这里修改第一个侦听返回return false时，则不再往下执行其它侦听.可看源码中event事件的fire方法:

                    if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
                        this.firing = false;
                        return false;
                    }

对于一个简单的Observable类的继承设计的总结：首先是先注册一个事件，会把这个事件写入到Observable里的全局event来增加ext.util.event实例．完成后要进行实例的侦听．这个可以放在实例对象后进行处理．增加侦听时，只是对应的把这些函数，入参等信息增加到方法中．最后进行fire事件，在fire时把原来保存在event中（event只是一个{}）.里面保存了fn,scope,option这些信息，在fire时找到对应的listener后，进行调用．


其它Observable相关方法：

Ext.util.Observable.capture　对原有事件的catch
                        Ext.util.Observable.capture(p,function(fn,option){
                                alert(JSON.stringify(option));
                        }) ;

在触发前调用该事件．