《Ext JS权威指南》——2.4节关于Ext.onReady

简介: 本节书摘来自华章社区《Ext JS权威指南》一书中的第2章,第2.4节关于Ext.onReady,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.4 关于Ext.onReady
代码为什么写在Ext.onReady中,而不是在body中添加一个onload事件并在onload事件中运行呢?主要原因是Ext.onReady在DOM模型加载完毕后即可进行操作,而无需像onload事件那样,等待页面的所有资源都加载完毕后才进行操作,尤其是在页面有大图片这类资源的时候。下面我们来看看Ext.onReady是如何做到这点的。
在Loader.js文件可以找到Ext.onReady的定义:

Ext.onReady = function(fn, scope, options) {
    Loader.onReady(fn, scope, true, options);
};
在这里调用了Loader对象的onReady方法,在Loader.js中可找到如下定义:
onReady: function(fn, scope, withDomReady, options) {
    var oldFn;

    if (withDomReady !== false && Ext.onDocumentReady) {
        oldFn = fn;

        fn = function() {
            Ext.onDocumentReady(oldFn, scope, options);
        };
    }

    fn.call(scope);
},

在上面的代码中,因为调用时withDomReady为true,所以只需判断Ext.onDocumentReady是否存在,如果存在,就建立一个匿名函数fn,准备执行Ext.onDocumentReady方法。最后是调用函数fn,执行Ext.onDocumentReady。
在EventManger.js中可找到Ext.onDocumentReady的定义:

onDocumentReady: function(fn, scope, options){
  options = options || {};
  var me = Ext.EventManager,
      readyEvent = me.readyEvent;

  options.single = true;
  readyEvent.addListener(fn, scope, options);
  if (Ext.isReady) {
      readyEvent.fire();
  } else if (document.readyState == 'complete') {
      me.fireDocReady();
  } else {
      me.bindReadyEvent();
  }
},

在上面的代码中,readyEvent是Ext.util.Event的实例,options.single的作用是规定ready-Event事件只执行一次。接着将函数添加到Event实例内的监听事件列表中,最后判断DOM模型是否已加载完成。如果已加载完成,则调用fire方法依次执行监听事件列表中的函数。这样做的目的是:当存在多个onReady方法时,能保证所有的函数都能执行。如果还没有加载完成,而document对象的readyState属性为“complete”,表示文档其实已经加载完成了,但是没有设置isReady属性为true,那么可调用fireDocReady方法,其代码如下:

fireDocReady: function(){
    var me = Ext.EventManager;

    if (!Ext.isReady) {
        Ext.isReady = true;

        if (document.addEventListener) {
            document.removeEventListener('DOMContentLoaded', me.fireDocReady, false);
            window.removeEventListener('load', me.fireDocReady, false);
        } else {
            if (me.readyTimeout !== null) {
                clearTimeout(me.readyTimeout);
            }
            if (me.hasOnReadyStateChange) {
                document.detachEvent('onreadystatechange', me.checkReadyState);
            }
            window.detachEvent('onload', me.fireDocReady);
        }

        Ext.supports.init();
        me.onWindowUnload();
        me.readyEvent.fire();
    }
},

在上面的代码中,如果isReady不是true,则将其设置为true,然后移除文档的监听事件。首先调用Ext.supports的init方法检测当前运行环境的信息;然后调用onWindowUnload方法为文档绑定unload事件,触发后会删除页面的所有元素;最后再调用readyEvent的fire方法,开始执行我们定义的代码。
如果文档还没有加载完成,则执行bindReadyEvent方法,其代码如下:

bindReadyEvent: function(){
    var me = Ext.EventManager;
    if (me.hasBoundOnReady) {
        return;
    }

    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', me.fireDocReady, false);
        window.addEventListener('load', me.fireDocReady, false);
    } else {
        if (!me.checkReadyState()) {
            document.attachEvent('onreadystatechange', me.checkReadyState);
            me.hasOnReadyStateChange = true;
        }
        window.attachEvent('onload', me.fireDocReady, false);
    }
    me.hasBoundOnReady = true;
},

看懂以上代码就应该很清楚整个执行过程了。在代码中,如果没有在页面中绑定监听事件,则绑定事件,非IE浏览器是绑定“DOMContentLoaded”事件,IE是绑定onload事件。对于旧版本的IE,会调用checkReadyState方法检查页面是否准备好,因为旧版本IE只能使用替代办法检查DOMContentLoaded事件。事件触发后执行fireDocReady方法。

相关文章
|
12天前
|
前端开发 JavaScript 安全
JavaScript 权威指南第七版(GPT 重译)(七)(4)
JavaScript 权威指南第七版(GPT 重译)(七)
29 0
|
12天前
|
前端开发 JavaScript 算法
JavaScript 权威指南第七版(GPT 重译)(七)(3)
JavaScript 权威指南第七版(GPT 重译)(七)
43 0
|
12天前
|
前端开发 JavaScript Unix
JavaScript 权威指南第七版(GPT 重译)(七)(2)
JavaScript 权威指南第七版(GPT 重译)(七)
43 0
|
12天前
|
前端开发 JavaScript 算法
JavaScript 权威指南第七版(GPT 重译)(七)(1)
JavaScript 权威指南第七版(GPT 重译)(七)
70 0
|
12天前
|
存储 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(4)
JavaScript 权威指南第七版(GPT 重译)(六)
139 3
JavaScript 权威指南第七版(GPT 重译)(六)(4)
|
12天前
|
前端开发 JavaScript API
JavaScript 权威指南第七版(GPT 重译)(六)(3)
JavaScript 权威指南第七版(GPT 重译)(六)
73 4
|
12天前
|
XML 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(2)
JavaScript 权威指南第七版(GPT 重译)(六)
69 4
JavaScript 权威指南第七版(GPT 重译)(六)(2)
|
12天前
|
前端开发 JavaScript 安全
JavaScript 权威指南第七版(GPT 重译)(六)(1)
JavaScript 权威指南第七版(GPT 重译)(六)
34 3
JavaScript 权威指南第七版(GPT 重译)(六)(1)
|
12天前
|
存储 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(五)(4)
JavaScript 权威指南第七版(GPT 重译)(五)
43 9
|
12天前
|
前端开发 JavaScript 程序员
JavaScript 权威指南第七版(GPT 重译)(五)(3)
JavaScript 权威指南第七版(GPT 重译)(五)
40 8