[Ext源码解读]事件的注册、添加与触发是如何实现的

Ext提供了一套强大的事件处理机制，每个组件都有许多事件，用户可以很方便通过动态的方式为对象添加/删除事件监听函数（在实例化的时候不是必须的），从而动态的改变或添加对象的行为，而这一切又是如何实现的呢？
阅读前请您准备好Javascript基础知识（包括：prototype属性、Functin对象的apply和call方法、函数的作用域等）。
该脚本剥离了许多分支逻辑，修改了大多数函数的实现仅保留最基本逻辑，如需详细了解Ext内部请阅读Ext源代码。Enjoy it！
该脚本脱离了Ext库的依赖，可直接复制在firbug下运行，（推荐chrome的javascript控制台，功能更强大）
预期运行结果：

Js代码

1. /**  
2.  * 观察者模式，也称作订阅发布模式，体现一种一对多关系，一般用在一个对象的改变将影响其它多个对象的情况下。  
3.  *   
4.  *   
5.  */  
6. Observable = function(name) {   
7.     this.name = name;   
8.     this.events = {};   
9.     this.addEvents('before', 'after');   
10.   
11.     this.getName = function() {   
12.         if (this.fireEvent('before', this.name) !== false) {   
13.             console.log('My name is ' + this.name);   
14.             this.fireEvent('after', this.name);   
15.             return this.name;   
16.         }   
17.     }   
18.   
19. }   
20. Observable.prototype = {   
21.        
22.     /**  
23.      * 添加事件名,就是个注册罢了,可以同时注册多个;试想一下如果添加就初始化了Event对象，如果一个组件有很多事件类型，  
24.      * 那么每次组件初始化它所具备的事件时要把每个事件组件都是实例化，那该是一件多么费内存的操作啊！  
25.      */  
26.     addEvents : function() {   
27.         var a = arguments, i = a.length;   
28.         while (i--) {   
29.             this.events[a[i]] = true;// 这里可不是数组，这是变量的形式访问属性   
30.         }   
31.     },   
32.   
33.     addListener : function(eventName, fn, scope) {   
34.         var ce;// 事件对象或者是true   
35.         ce = this.events[eventName] || true;   
36.         if (ce == true) {//事件默认是没有初始化的   
37.             this.events[eventName] = ce = new Event(this, eventName);   
38.         }   
39.         ce.addListener(fn, scope);   
40.     },   
41.     /**  
42.      * @augments 第一个是事件名，之后是监听方法需要的参数  
43.      * @return ret 进一步执行的标实  
44.      */  
45.     fireEvent : function() {   
46.         var a = arguments, ret = true, ce;   
47.         ename = a[0], ce = this.events[ename];   
48.         if (Object.prototype.toString.call(ce) === '[object Object]') {   
49.             ret = ce.fire.apply(ce, Array.prototype.slice.call(a, 1, a.length));   
50.         }   
51.         return ret;   
52.     }   
53. };   
54.   
55. Event = function(obj, name) {   
56.     this.name = name;   
57.     this.obj = obj;   
58.     this.listeners = [];   
59. };   
60.   
61. Event.prototype = {   
62.     addListener : function(fn, scope, options) {   
63.         scope = scope || this.obj;   
64.         if (this.firing) { // 如果正在触发监听事件，则用slice方法创建一个与原对象一样的新对象，这样不会影响正在触发的监听方法链   
65.             this.listeners = this.listeners.slice(0);   
66.         }   
67.         this.listeners.push({   
68.                     fireFn : fn,   
69.                     scope : scope,   
70.                     options : options   
71.                 });   
72.     },   
73.     fire : function() {   
74.         var listeners = this.listeners,    
75.             args = Array.prototype.slice.call(arguments, 0, arguments.length),    
76.             len = listeners.length, i = 0, l;   
77.         if (len > 0) {   
78.             this.firing = true;   
79.             for (; i < len; i++) {   
80.                 l = listeners[i];   
81.                 // 添加监听时设置的作用域具有最高优先级，其次是当前Event对象的目标对象，都没有就是window对象   
82.                 if (l&& l.fireFn.apply(l.scope || this.obj || window, args) === false) {   
83.                     return (this.firing = false);   
84.                 }   
85.             }   
86.         }   
87.         this.firing = false;   
88.         return true;   
89.     }   
90. };   
91.   
92. var obj1 = new Observable('bob');   
93.   
94. obj1.addListener('before', function() {   
95.             console.log('First before listener my name is ' + this.name);   
96.         });   
97.   
98. obj1.addListener('before', function() {   
99.             console.log('Second before listener my name is ' + this.obj1.name);   
100.             return false;   
101.         }, this);   
102. obj1.addListener('after', function() {   
103.             console.log('First after listener my name is ' + this.name);   
104.         });   
105. obj1.addListener('after', function() {   
106.             console.log('Second after listener my name is ' + this.name);   
107.         });   
108. obj1.getName();