螃哈哈一只——语义网研究语义网资料 JAVA技术 AJAX技术 » Ext源码分析：Ext.onReady到底做了什么？

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

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

Crab = {};
Crab.util = {};//把Namespace模拟出来
Crab.EventManager = function(){//仔细看看这个单例模式，以后调用Crab.EventManager其实得到的就是pub对象
var pub = {
onDocumentReady : function(fn){...};
};
return pub;
}();
Crab.onReady = Crab.EventManager.onDocumentReady;//命名空间的转换
Crab.onReady(function(){
alert('hello crabone.com');
});

上面是一个大的架子，我们往里面分析进去。Crab.onReady里的方法其实就是被传入onDocumentReady了。

onDocumentReady : function(fn){
if(docReadyState){ // 如果已经调用过Crab.onReady()
docReadyEvent.addListener(fn);
docReadyEvent.fire();
docReadyEvent.clearListeners();
return;
}
if(!docReadyEvent){//如果docReadyEvent还没有创建，我们来初始化
initDocReady();
}
docReadyEvent.addListener(fn);
}

看完上面的注释，再仔细分析后，可以看出docReadyEvent是一个重要的家伙，可以说，onReady里的方法就是这家伙通过fire()来执行的。那么我们来看看，创建这个家伙的initDocReady做了些什么？

var initDocReady = function(){
docReadyEvent = new Crab.util.Event();//原来这家伙是它
document.addEventListener("DOMContentLoaded", fireDocReady, false);//委托document，当页面载入完成的时候，调用fireDocReady
};

看到这里，我们来整理下思路，首先，第一次调用onDocumentReady 的时候，做了这么三件事
1、docReadyEvent = new Crab.util.Event();
2、document.addEventListener(”DOMContentLoaded”, fireDocReady, false);
3、docReadyEvent.addListener(fn);
特别是第二件事情，我们要注意，仅仅是委托了而已，并没有执行fireDocReady

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

var fireDocReady = function(){
if(!docReadyState){
docReadyState = true;//设置为已经调用了onReady了
document.removeEventListener("DOMContentLoaded", fireDocReady, false);//将先前的委托取消
if(docReadyEvent){
docReadyEvent.fire();//fire了
docReadyEvent.clearListeners();//清空！
}
}
};

可见，最终还是由docReadyEvent这家伙在执行我们的方法。

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

(function(){
Crab.util.Event = function(obj){
this.listeners = [];
};
Crab.util.Event.prototype = {
addListener : function(fn){
if(!this.isListening(fn)){
var l = this.createListener(fn);
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){
var l = {
fn:fn,
fireFn:fn
};
return l;
},
findListener : function(fn){
var ls = this.listeners;
for(var i = 0, len = ls.length; i < len; i++){
var l = ls[i];
if(l.fn == fn){
return i;
}
}
return -1;
},
isListening : function(fn){
return this.findListener(fn) != -1;
},
clearListeners : function(){
this.listeners = [];
},
fire : function(){
var ls = this.listeners, 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(window, arguments) === false){
this.firing = false;
return false;
}
}
this.firing = false;
}
return true;
}
};
})();

上面的代码我已经简单化了，看起来应该不会太累，当然如果您觉得吃不消了，应该去补补javascript的基础了。回到正题，Event其实是一个方法容器，并不应该翻译成监听器容器，因为在这里它根本就没有去监听事件，而是保存很多方法而已，那么fire()的功能就是去循环这个容器，将里面的方法一一执行。这里就引出一个问题了，我们传进去的方法是如何被执行的？要知道
Ext.onReady(function(){});
里面的可是匿名方法啊，不能通过方法名() 这样的方法来执行，那么怎么办？
通过方法委托来执行！ l.fireFn.apply(window, arguments) 将fireFn委托给window执行，看到这里别迷惑，要知道，我们写如下方法
function aa(){}
aa();
其实aa();就应该等于window.aa();大家应该记得window.alert()=alert()吧？呵呵
如果还不懂就发邮件或者留言问我吧~~~

代码下载(记住，这个程序只支持FF哦)

Download: onReady.html onReady.html (3.3 KiB, 342 hits)

IE支持在这里

Download: ie_onReady.html ie_onReady.html (3.8 KiB, 384 hits)

Trackback url | Rss 2.0

已经有11个留言

Mily Says @ 08-05-3 5:44 am
你分析的很详细呀。你应该是个高手了吧。有IE和FF同时兼容的么发个给我呀 QQ Email ：79501973@qq.com。感谢了。
crab Says @ 08-05-4 12:57 am
ie环境下的写法已经放上来了，你要同时兼容，自己加点if else吧
Jlinshu Says @ 08-05-28 8:10 am
非常感谢，受益非浅
Jlinshu Says @ 08-05-28 8:16 am
Event.fire 中
var args = Array.prototype.slice.call(arguments, 0);
这一句有什么用？
还望指点
crab Says @ 08-05-28 2:31 pm
将fire这个方法的参数复制一份出来，免得arguments被修改，这是一种老道的写法。Array.prototype.slice.call，你可以这样理解，系统内置了一个slice方法，Array.prototype是这个方法的命名空间，我免费调用这个功能而已，关于call，你可以仔细查下资料。
Jlinshu Says @ 08-05-29 10:16 am
如果为了防止arguments被修改,为什么不写成var args = arguments?
而且Array.prototype.slice.call(arguments, 0),我想是相当于arguments.slice(0),这样的话不是只保留了arguments的第一个参数吗?不太明白
Jlinshu Says @ 08-05-29 10:34 am
args = Array.prototype.slice.call(arguments, 0)还真复制了一份arguments,我错了,call这个东西真让人头晕
Jlinshu Says @ 08-05-29 10:48 am
以前老为dom还没ready好,JS出错头痛,还想过用setInterval来不厌其烦的检测,效果总是不理想.
我将你的代码加上浏览器判断做成了Crab.js,真的很好用,再次谢谢你.越来越喜欢JS,写法天马行空,但是博大精深,有机会也想学学EXTJS.
www Says @ 08-08-27 9:00 am
document.addEventListener(”DOMContentLoaded”, fireDocReady, false);//委托document，当页面载入完成的时候，调用fireDocReady

在IE里的写法
document.onreadystatechange = function(){
　　if(document.readyState == “complete”){
　　　　fireDocReady();
　　}
}
匿名 Says @ 08-10-20 5:21 am
文章题目是Ext.onReady到底做了什么？看了通篇文章，没有得到一个结论。。。不知所云
匿名 Says @ 08-10-20 6:22 pm
呵呵，只要你耐心将上面读懂了，就会明白做了什么，研究性质的东西不存在正确的结论，而在于各种方法和思维过程

螃哈哈一只

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

相关日志

已经有11个留言

留言

最近发表文章

最新留言

分类

每月文章