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]).

• 如果已經被創建則刪除此依賴項，如果某個對象的所有依賴項都已經被創建，則從queue中移除該對象。

• 如果隊列queue為空，則調用Loader.triggerReady()方法

注：我這里有幾個疑問

• Loader的待加載數已經為0了，為什么不直接調用Loader.triggerReady()

• Loader的待加載數已經為0了，就不會再有文件被加載了，也就不會再執行onFileLoaded和refreshQueue方法了，怎么破？

14.?Loader.triggerReady()方法，會調用Loader.require()去加載use關鍵字依賴項。然后執行第3步中的Ext.onReady

序列圖：

創建應用?https://www.websequencediagrams.com/?open=72341

加載文件?https://www.websequencediagrams.com/?open=72348

加載完成回調 https://www.websequencediagrams.com/?open=72453

Ext.onReady?https://www.websequencediagrams.com/?open=72343?

轉載于:https://blog.51cto.com/wangyuelucky/1604815

總結

以上是生活随笔為你收集整理的extjs 文件加载、解析流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。