简析 Ext.onReady

Ext.onReady 这个函数我想是最常用的函数了吧,毕竟没有 ready 前什么也不可以做的。
onReady的参数是一个函数 。 其实真正的调用是

 

Ext.onReady = Ext.EventManager.onDocumentReady;

 
而 Ext.EventManager 则是一个管理事件的对象,而且是单例的,为啥不做成静态呢,应该是为了不暴露里面的 private 函数喽,这也是对 传统语言private函数的一个实现 。

 

Ext.EventManager = funtion() {

	//private or privileged
	function xx(){
	
	};

  var pub ={

	//可以调用xx
	
	};

	//.....

	return pub;
}();

   

而 onDocumentReady 则是将他的参数加入到一个自定义事件的 listener 列表中去了,关于自定义事件以及事件监听器如何排队,如何触发监听器暂时不分析了。可这个 event 怎么来的呢,正是在 onDocumentReady 初始的

 

onDocumentReady:function(f){
	//页面加载好就直接触犯事件处理函数返回
	//..
	
	//页面没有加载好且自定义事件没有初始化，就初始化自定义事件
	if(!docReadyEvent){
	   initDocReady();
	}
	
	
	//自定义事件有了，把事件处理函数添加到自定义事件的 listeners 列表，等待事件触发后批处理
}

 
在初始这个事件过程中,终于看到了我们熟悉的 onload

 

var initDocReady = function(){
        
        //自定义事件，建立监听器队列
        docReadyEvent = new Ext.util.Event();
        
        
        //gecko内核，和opera利用那个DOMContentLoaded事件
        if(Ext.isGecko || Ext.isOpera) {
            document.addEventListener("DOMContentLoaded", fireDocReady, false);
        }
        
        //ie利用script的defer属性
        else if(Ext.isIE){
            document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
            var defer = document.getElementById("ie-deferred-loader");
            defer.onreadystatechange = function(){
                if(this.readyState == "complete"){
                    fireDocReady();
                }
            };
        }
        
        //safari没有办法？只能定时判断document，dom树的状态
        else if(Ext.isSafari){
            docReadyProcId = setInterval(function(){
                var rs = document.readyState;
                if(rs == "complete") {
                    fireDocReady();
                 }
            }, 10);
        }
        
        //最坏情况，新浏览器？？load 比上述事件先触发？？
        //fireDocReady 会判断如果已经触发过一次就不再处理了。
        // no matter what, make sure it fires on load
        E.on(window, "load", fireDocReady);
    };

 

这样的话就实现了多个操作附加到了ext ready上面. ( 09年再读:ie 利用script defer属性 ,firefox监控domready事件,dom树加载完毕比window load事件要早得多,image标签加载需要时间的 )

 

 

    页面加载判断与onload 研究

 

     Defer And IE

 

      javascript : defer execution

这样ext 屏蔽了浏览器差异 ,关键是ext使用了它的通用事件模型，从而整合到了一个统一的框架中 。

评论

5 楼 yiminghe 2009-08-22  

need_faith 写道

在用一个js文件中写了两个onReady(),每个onReady()中调用的方法不同,例如:
Ext.onReady(function(){
aaa();
});
Ext.onReady(function(){
bbb();
});
function aaa() {
.....
}
function bbb() {
.....
}
请问这样写,执行顺序是怎样的?

内部是一个队列，在前面的先执行 ，你这种情况就是 先 aaa(),再bbb()

一般一个ext.onready 就行了，为什么要两个。。。。。

4 楼 need_faith 2009-08-22  

在用一个js文件中写了两个onReady(),每个onReady()中调用的方法不同,例如:
Ext.onReady(function(){
aaa();
});
Ext.onReady(function(){
bbb();
});
function aaa() {
.....
}
function bbb() {
.....
}
请问这样写,执行顺序是怎样的?

3 楼 yiminghe 2008-10-08  

sp42 写道

如果脚本在前 标签在后， 脚本又要引用标签的话，不用onReady会出现错误的

谢谢 ，大侠 不吝时间 前来 指导 呵

2 楼 yiminghe 2008-10-08  

sp42 写道

如果脚本在前 标签在后， 脚本又要引用标签的话，不用onReady会出现错误的

我觉得 用 window.addListener('load',function(){xxxx})也行啊

不过好像 Ext.onready 比 load 响应跟快 ，可以不等 图片等资源 下载完 就执行 ，

利用了 onDocumentReady 好像  ，这个我没用过

以前 只用 onload ....土

1 楼 sp42 2008-10-07  

如果脚本在前 标签在后， 脚本又要引用标签的话，不用onReady会出现错误的