`
lorry1113
  • 浏览: 262418 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext源码分析:Ext.onReady到底做了什么?

    博客分类:
  • ext
阅读更多
注意:这篇文章我是针对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()吧?呵呵

分享到:
评论

相关推荐

    Ext Js权威指南(.zip.001

    2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 2.6 关于字体 / 42 2.7 ext js 4语法 / 42 2.8 本地化 / 60 2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 ...

    Extjs实用教程

    - 使用`Ext.onReady()`函数确保在DOM完全加载完成之后再执行相应的初始化操作。 ```javascript function fn() { alert("ExtJS库已加载!"); } Ext.onReady(fn); ``` - 或者使用匿名函数的方式简化代码: ```...

    EXT dojochina Ext类静态方法.rar

    EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题,主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架,由Sencha公司开发,它提供了丰富的组件库,用于构建复杂的Web应用程序。在EXT...

    ext培训第二讲.doc

    **总结**:本节通过具体的步骤和示例,详细介绍了如何在EXT中创建一个简单的Hello World程序,并对`Ext.onReady`方法进行了深入解析。这不仅有助于理解EXT的基本使用方式,也为后续更复杂的应用打下了坚实的基础。

    EXT dojochina Ext类实例方法.rar

    EXT dojochina Ext类实例方法.rar 是一个与EXT JS框架相关的压缩文件,EXT JS是一个广泛使用的JavaScript库,用于构建富互联网应用程序(RIA)。这个压缩包可能包含了关于EXT JS中的Ext类的一些实例方法的详细教程或...

    Backbone.Events.onReady:Backbone.Events 的 onReady() 方法

    Backbone.Events.onReady 将onReady和triggerReady方法添加到Backbone.Events 。 行为: 准备好之前- 注册回调。 准备就绪时,运行所有挂起的回调,从triggerReady传入任何数据。 准备就绪后- 立即运行回调,传入...

    ext表格布局小例子

    接下来通过 `Ext.onReady` 函数确保 DOM 完全加载后执行代码。 ```javascript Ext.onReady(function() { //... }); ``` #### 三、数据模型与列模型配置 **数据模型** (`Store`) 负责数据的存储与管理,这里使用了...

    Ext原理.txt

    ### Ext原理知识点详解 #### 一、Ext简介与原理 **Ext** 是一款基于 JavaScript 的开源框架,主要用于 Web 应用程序的开发。它提供了一系列丰富的用户界面组件和功能,帮助开发者快速构建交互性强、用户体验良好的...

    ext实例 ext操作步骤

    3. **启动EXT**:使用`Ext.onReady`函数在DOM加载完成后执行EXT的初始化代码,例如弹出一个消息框。 ```javascript Ext.onReady(function() { Ext.MessageBox.alert("你好", "wayfoon"); }); ``` 4. **创建布局...

    EXT中文手册.pdf

    1. **Ext的基本配置和初始化**:在Ext框架中,`Ext.onReady`是一个非常核心的方法,它用于确保在DOM完全加载后执行指定的函数。通过`Ext.onReady`,可以初始化Ext应用并执行必要的配置。例如:`Ext.onReady(function...

    Jquery+ext

    Ext.onReady(function() { // 在EXT页面加载完成后执行的代码 }); }); ``` 总结,jQuery和EXT的结合使得Web开发更高效,它们互补了JavaScript的不足,提供了丰富的UI组件和强大的交互体验。学习和掌握这两个库,...

    微信小程序源码-小工具类:简易计算器.rar

    了解和分析这个简易计算器源码,可以帮助初学者更好地理解微信小程序的开发流程,掌握WXML、WXSS和JavaScript三者间的协同工作原理,为进一步开发更复杂的小程序打下基础。同时,对于有经验的开发者,这样的实例也能...

    extjs培训2011-12-17

    此外,可以通过`Ext.onReady()`函数确保所有依赖项加载完毕后再执行特定的初始化代码。 ```html Ext.onReady(function() { alert('ExtJS库已加载!'); }); ``` #### 三、ExtJS组件体系 ExtJS的核心是其组件...

    Ext深入浅出 数据传输

    Ext深入浅出 数据传输 第10 章 数据存储与传输.....................................230 10.1 Ext.data简介............................................230 10.2 Ext.data.Connection....................230 ...

    Ext4.0使用指南

    【EXT4.0使用指南】 EXT4.0是Ext JS框架的一个重要版本,它提供了丰富的用户界面组件和强大的数据管理功能,广泛应用于Web应用程序的开发。这篇指南将着重于EXT4.0的基础知识,帮助初学者快速入门EXT JS的开发。 1...

    Ext4 动态加载js例子

    在你的应用中,通常会在 `Ext.application` 或 `Ext.onReady` 中设置 `Ext.Loader` 的配置项,例如设置路径映射、启用动态加载等: ```javascript Ext.application({ name: 'MyApp', requires: ['Ext.Loader'], ...

    ExtJS Ext.MessageBox.alert&#40;&#41;弹出对话框详解

    代码如下: Ext.onReady(function() { Ext.Msg.alert&#40;‘提示’, ‘逗号分隔参数列表’&#41;; //这种方式非常常见的 }); 效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { ...

    Ext JS下载及配置

    ### Ext JS下载及配置知识点详解 #### 一、Ext JS简介 Ext JS 是一款基于 JavaScript 的前端框架,专为构建企业级 Web 应用而设计。它提供了丰富的 UI 组件库,支持各种复杂的用户交互,并且具有良好的跨浏览器兼容...

    Ext.Tree.Panel

    - `Ext.onReady`函数用于在DOM加载完成后执行代码,这里是创建`TreePanel`的合适时机。 - `Ext.BLANK_IMAGE_URL`通常用于设置占位符图片的URL,防止因图片未加载而出现的错误图标。 - `TreeLoader`对象用于从...

Global site tag (gtag.js) - Google Analytics