简析 Ext.onReady

最新推荐文章于 2021-10-25 10:50:47 发布

原创最新推荐文章于 2021-10-25 10:50:47 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #IE #脚本 #浏览器 #Safari

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文深入解析了ExtJS框架中Ext.onReady函数的工作原理及其在不同浏览器环境下的实现方式，包括利用DOM事件、script标签的defer属性及定时检查DOM状态等。

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使用了它的通用事件模型，从而整合到了一个统一的框架中 。