Ext源码分析：Ext.onReady到底做了什么？

注意：这篇文章我是针对FF来写的，看完这篇文章，你能把IE的也写出来，就说明你入门了：）
代码下面有下载， 无 需引入任何js

首先，我们来看下面的代码片段

1.Crab = {};
2.Crab.util = {};//把Namespace模拟出来
3.
4.Crab.EventManager = function(){//仔细看看这个单例模式，以后调用Crab.EventManager其实得到的就是pub对象
5.    var pub = {
6.        onDocumentReady : function(fn){…};
7.    };
8.    return pub;
9.}();
10.
11.Crab.onReady = Crab.EventManager.onDocumentReady;//命名空间的转换
12.
13.Crab.onReady(function(){
14.    alert(‘hello crabone.com‘);
15.});
上面是一个大的架子，我们往里面分析进去。Crab.onReady里的方法其实就是被传入onDocumentReady了。

1.onDocumentReady : function(fn){
2.    if(docReadyState){ // 如果已经调用过Crab.onReady()
3.        docReadyEvent.addListener(fn);
4.        docReadyEvent.fire();
5.        docReadyEvent.clearListeners();
6.        return;
7.    }
8.    if(!docReadyEvent){//如果docReadyEvent还没有创建，我们来初始化
9.        initDocReady();
10.    }
11.    docReadyEvent.addListener(fn);
12.}
看完上面的注释，再仔细分析后，可以看出docReadyEvent是一个重要的家伙，可以说，onReady里的方法就是这家伙通过fire()来执行的。那么我们来看看，创建这个家伙的initDocReady做了些什么？

1.var initDocReady = function(){
2.
3.    docReadyEvent = new Crab.util.Event();//原来这家伙是它
4.
5.    document.addEventListener("DOMContentLoaded", fireDocReady, false);//委托document，当页面载入完成的时候，调用fireDocReady
6.
7.};
看到这里，我们来整理下思路，首先，第一次调用onDocumentReady 的时候 ，做了这么三件事
1、docReadyEvent = new Crab.util.Event();
2、document.addEventListener(”DOMContentLoaded”, fireDocReady, false);
3、docReadyEvent.addListener(fn);
特别是第二件事情，我们要注意，仅仅是委托了而已，并没有执行fireDocReady

OK，做完上面三件事情后，FF又往下面执行下去了，读出所有的DOM后，开始调用fireDocReady了！！
我们来看看fireDocReady干了些什么？

1.var fireDocReady = function(){
2.    if(!docReadyState){
3.        docReadyState = true;//设置为已经调用了onReady了
4.       
5.        document.removeEventListener("DOMContentLoaded", fireDocReady, false);//将先前的委托取消
6.       
7.        if(docReadyEvent){
8.            docReadyEvent.fire();//fire了
9.            docReadyEvent.clearListeners();//清空！
10.        }
11.    }
12.};
可见，最终还是由docReadyEvent这家伙在执行我们的方法。

再回顾下，onDocumentReady 里面，当已经执行过onReady的时候，做了些什么？
docReadyEvent.addListener(fn);
docReadyEvent.fire();
docReadyEvent.clearListeners();
可见，还是它。下面我贴出，docReadyEvent的代码片段，记住，它是docReadyEvent = new Crab.util.Event();代码有点长，耐心看下去

1.(function(){
2.    Crab.util.Event = function(obj){
3.        this.listeners = [];
4.    };
5.
6.    Crab.util.Event.prototype = {
7.        addListener : function(fn){
8.
9.            if(!this.isListening(fn)){
10.                var l = this.createListener(fn);
11.                if(!this.firing){
12.                    this.listeners.push(l);
13.                }else{ // if we are currently firing this event, don’t disturb the listener loop
14.                    this.listeners = this.listeners.slice(0);
15.                    this.listeners.push(l);
16.                }
17.            }
18.        },
19.
20.        createListener : function(fn){
21.            var l = {
22.                fn:fn,
23.                fireFn:fn
24.            };
25.            return l;
26.        },
27.
28.        findListener : function(fn){
29.            var ls = this.listeners;
30.            for(var i = 0, len = ls.length; i < len; i++){
31.                var l = ls[i];
32.                if(l.fn == fn){
33.                    return i;
34.                }
35.            }
36.            return -1;
37.        },
38.
39.        isListening : function(fn){
40.            return this.findListener(fn) != -1;
41.        },
42.
43.        clearListeners : function(){
44.            this.listeners = [];
45.        },
46.
47.        fire : function(){
48.            var ls = this.listeners, len = ls.length;
49.            if(len > 0){
50.                this.firing = true;
51.                var args = Array.prototype.slice.call(arguments, 0);
52.                for(var i = 0; i < len; i++){
53.                    var l = ls[i];
54.                    if(l.fireFn.apply(window, arguments) === false){
55.                        this.firing = false;
56.                        return false;
57.                    }
58.                }
59.                this.firing = false;
60.            }
61.            return true;
62.        }
63.    };
64.})();
上面的代码我已经简单化了，看起来应该不会太累，当然如果您觉得吃不消了，应该去补补javascript的基础了。回到正题，Event其实是一个方法容器，并不应该翻译成监听器容器，因为在这里它根本就没有去监听事件，而是保存很多方法而已，那么fire()的功能就是去循环这个容器，将里面的方法一一执行。这里就引出一个问题了，我们传进去的方法是如何被执行的？要知道
Ext.onReady(function(){});
里面的可是匿名方法啊，不能通过 方法名() 这样的方法来执行，那么怎么办？
通过方法委托来执行！ l.fireFn.apply(window, arguments) 将fireFn委托给window执行，看到这里别迷惑，要知道，我们写如下方法
function aa(){}
aa();
其实aa();就应该等于window.aa();大家应该记得window.alert()=alert()吧？呵呵