extjs 文件加载、解析流程

浏览数：35 / 时间：2015年06月09日

extjs版本：4.2.1

在html中添加应用的启动脚本，如下：

<script src="app.js"></script>

2. 用户访问html的时候，会去加载app.js文件，app中定义了应用的名字，根路径等信息，并且调用Ext.application()方法，如下：

Ext.application({
    name: ‘Seed‘,
    extend: ‘Seed.Application‘,
    autoCreateViewport: true
});

3. Ext.application的详解见 http://wangyuelucky.blog.51cto.com/

主要做如下三件事：

设置loader的path
调用Ext.define（）
当Ext.onReady的时候，实例化app，代码如下

Ext.onReady(function() {
        // this won‘t be called until App has been created and its requires have been
        // met...
        Ext.app.Application.instance = new App();
    });

4. Ext.define()的详解见 http://wangyuelucky.blog.51cto.com/1011508/1594628

主要是调用Manager.create()，实例化生成新的对象new Class(ctor, data, fn);

其中，var ctor = makeCtor();代码如下：

// Creates a constructor that has nothing extra in its scope chain.
    function makeCtor () { // 什么作用？ 工厂模式？
        function constructor () {
            // Opera has some problems returning from a constructor when Dragonfly isn‘t running. The || null seems to
            // be sufficient to stop it misbehaving. Known to be required against 10.53, 11.51 and 11.61.
            return this.constructor.apply(this, arguments) || null;
        }
        return constructor;
    }

另外，这里的Class就是Ext.Class，代码如下：

(function(Class, alias, arraySlice, arrayFrom, global) {

    var Manager = Ext.ClassManager = {
		create: function(className, data, createdFn) {
		
			// 略
			
            return new Class(ctor, data, /** fn略 */);
        }
	};

}(Ext.Class, Ext.Function.alias, Array.prototype.slice, Ext.Array.from, Ext.global));

5. Ext.Class源码详解http://wangyuelucky.blog.51cto.com/1011508/1594638

Ext.Class相当于是构造函数，主要做两件事：

根据构造器ctor和类的配置信息data，调用ExtClass.create()方法，实例化对象并返回
调用ExtClass.process()方法，执行拦截器

6. ExtClass.create(ctor,data)方法非常简单，就是把基类Ext.Base中的静态属性和方法，都复制到ctor上，并返回ctor

7. ExtClass.process(Class, data, onCreated)，会执行三类拦截器className,extend,loader，详解见http://wangyuelucky.blog.51cto.com/1011508/1603157，然后执行ExtClass.onBeforeCreated(ctor,data,hooks) // 这里的hook其实就是拦截器 + 4步中的回调函数fn

这里会处理两件事：

Class.addMembers(data);
hooks.onCreated.call(Class, Class); // 执行4中的回调函数fn

8. 这三类拦截器中，比较复杂的是loader拦截器，详解见http://wangyuelucky.blog.51cto.com/1011508/1603255

主要作用如下：

按关键字查找当前类的所有直接依赖
检查循环依赖
调用Loader.require(dependencies,fn);加载依赖文件

9. Loader.require()方法详解见http://wangyuelucky.blog.51cto.com/1011508/1594617

检查依赖文件是否在例外列表中
如果第8步中的回调方法fn，定义了参数，需要把相关对象的引用传递回去
以dependencies数组的形式，把所有的待加载的依赖信息，放入到队列queue中
调用Loader.loadScriptFile(filePath,onFileLoaded); 加载每一个依赖文件，并且标记待加载的文件数+1

Loader.numPendingFiles++;

10. loadScriptFile()方法，就是对同步/异步加载，做一个判断，如果是异步加载，则调用Loader.injectScriptElement()方法

11. Loader.injectScriptElement()方法,会向html中添加<script>标签，并设置回调文件加载、解析成功的函数为第9步中的onFileLoaded，这样每当加载成功一个文件，就执行onFileLoaded()方法

12. onFileLoaded(className, filePath)方法，其实就是标记文件在Loader中的信息

标记类className已经被加载 isClassFileLoaded[className] = true;
标记文件filePath已经被加载 isFileLoaded[filePath] = true;
待加载文件数-1 Loader.numPendingFiles--;
处理missingClasses
当待加载文件数等于0，也就是说loader没有待加载的文件的时候，调用Loader.refreshQueue();

13. Loader.refreshQueue(),详解见http://wangyuelucky.blog.51cto.com/1011508/1604695，该方法会检查queue中的每一个对象的每一个依赖项dependence，是否已经被加载、创建Manager.isCreated(requires[j]).