轉(zhuǎn)載：http://blog.csdn.net/yanwushu/article/details/8296372

?

Ext.Loader 在 ExtJs4+ 中是動(dòng)態(tài)加載的核心。一般通過(guò) Ext.require （）使用。Ext.Loader同時(shí)支持同步和異步加載方式。這里，我們將討論這兩種加載方式的優(yōu)缺點(diǎn)。

?

異步加載

?

?

優(yōu)勢(shì)

?

?

跨域訪(fǎng)問(wèn)

不需要 web 服務(wù)器 : 你能通過(guò)文件系統(tǒng)協(xié)議運(yùn)行程序。比如 file://path/to/your/index.html

????????舒服的調(diào)試體驗(yàn)：錯(cuò)誤信息將返回確切的文件名字和行數(shù)。

?

?

缺點(diǎn)

?

????????依賴(lài)必須事先指定

?

使用方法

?

方法一：明確包含你想要的

?

[javascript] ? view plain copy

1. //?Syntax? ??
2. Ext.require({String/Array}?expressions);???
3. ???
4. //?Example:?Single?alias? ??
5. Ext.require( 'widget.window' );???
6. ???
7. //?Example:?Single?class?name? ??
8. Ext.require( 'Ext.window.Window' );???
9. ???
10. //?Example:?Multiple?aliases?/?class?names?mix? ??
11. Ext.require([ 'widget.window' ,? 'layout.border' ,? 'Ext.data.Connection' ]);???
12. ???
13. //?Wildcards? ??
14. Ext.require([ 'widget.*' ,? 'layout.*' ,? 'Ext.data.*' ]);???

?

方法二，明確排除你不想要的

?

?

[javascript] ? view plain copy

1. //?Syntax:?Note?that?it?must?be?in?this?chaining?format.? ??
2. Ext.exclude({String/Array}?expressions)???
3. ???.require({String/Array}?expressions);???
4. ???
5. //?Include?everything?except?Ext.data.*? ??
6. Ext.exclude( 'Ext.data.*' ).require( '*' );???
7. ???
8. //?Include?all?widgets?except?widget.checkbox*,? ??
9. //?which?will?match?widget.checkbox,?widget.checkboxfield,?widget.checkboxgroup,?etc.? ??
10. Ext.exclude( 'widget.checkbox*' ).require( 'widget.*' );???

?

同步加載

?

?

優(yōu)勢(shì)

????????它不需要事先指明依賴(lài)，事先包含 ext-all.js 是很方便的 。

?

劣勢(shì)

?

?

調(diào)試體驗(yàn)不好，除非用 Firebug 調(diào)試 ，否則出錯(cuò)的文件的名字不會(huì)顯示。

不能跨域請(qǐng)求，因?yàn)? XHR 的限制必須是相同的域名 。并且因?yàn)檫@個(gè)原因，必須有 web 服務(wù) 。

?

?

使用方法

?

?

可以遵守一個(gè)簡(jiǎn)單的法則：用 Ext.create 代替new 關(guān)鍵字來(lái) 實(shí)例化對(duì)象。

?

15? Ext.create('widget.window',?{?...?});?//?Instead?of?new?Ext.window.Window({...});?

16? Ext.create('Ext.window.Window',?{});?//?Same?as?above,?using?full?class?name?instead?of?alias?

17? Ext.widget('window',?{});?//?Same?as?above,?all?you?need?is?the?traditional?`xtype`?

?

在后臺(tái)， Ext.ClassManager 會(huì)自動(dòng)檢查給定的類(lèi)名 或別名是否在頁(yè)面已經(jīng)存在。如果沒(méi)有， Ext.Loader 將會(huì)立即把它調(diào)整為同步模式，自動(dòng)加載給定的類(lèi)和它所有的依賴(lài) 。

?

?

混合加載

混合加載方式可以結(jié)合同步和異步加載的優(yōu)勢(shì)。開(kāi)發(fā)流程非常簡(jiǎn)單：
第一步 : 用同步的方式寫(xiě)你的程序 ，Ext.Loader 將會(huì)自動(dòng)按照需要獲取所有的依賴(lài)，因?yàn)樗鼈冊(cè)谶\(yùn)行時(shí)需要。例如：

?

[javascript] ? view plain copy

1. Ext.onReady( function (){???
2. ???? var ?window?=?Ext.createWidget( 'window' ,?{???
3. ????????width:?500,???
4. ????????height:?300,???
5. ????????layout:?{???
6. ????????????type:? 'border' ,???
7. ????????????padding:?5???
8. ????????},???
9. ????????title:? 'Hello?Dialog' ,???
10. ????????items:?[{???
11. ????????????title:? 'Navigation' ,???
12. ????????????collapsible:? true ,???
13. ????????????region:? 'west' ,???
14. ????????????width:?200,???
15. ????????????html:? 'Hello' ,???
16. ????????????split:? true ???
17. ????????},?{???
18. ????????????title:? 'TabPanel' ,???
19. ????????????region:? 'center' ???
20. ????????}]???
21. ????});???
22. ???
23. ????window.show();???
24. })???

?

第二步：觀(guān)看控制臺(tái)的中如下的警告：

?

[javascript] ? view plain copy

1. [Ext.Loader]?Synchronously?loading? 'Ext.window.Window' ;?consider?adding?Ext.require( 'Ext.window.Window' )?before?your?application's?code??
2. ClassManager.js:432??
3. [Ext.Loader]?Synchronously?loading? 'Ext.layout.container.Border' ;?consider?adding?Ext.require( 'Ext.layout.container.Border' )?before?your?application's?code??

在Ext.onReady上面添加加載依賴(lài)的代碼：

[javascript] ? view plain copy

1. Ext.require( 'Ext.window.Window' );Ext.require( 'Ext.layout.container.Border' );??
2. Ext.onReady(...);??

這樣，所有的東西都將通過(guò)異步的模式加載

?

?

發(fā)布

?

?

有一點(diǎn)很重要，動(dòng)態(tài)加載至能在開(kāi)發(fā)的時(shí)候在本機(jī)上使用。產(chǎn)品發(fā)布的時(shí)候，所有的依賴(lài)最好是組合成一個(gè)獨(dú)一的 JavaScript 文件 。Ext.Loader 使項(xiàng)目從開(kāi)發(fā)維護(hù)發(fā)布之間轉(zhuǎn)換變得很容易 。在內(nèi)部， Ext.Loader.history 控制了你的項(xiàng)目所有依賴(lài)的加載順序的列表 。把這個(gè)列表中的所有依賴(lài)壓縮成一個(gè)，然后把它包含在你項(xiàng)目的最頂部。這個(gè)處理過(guò)程將會(huì)使用SenchCommand 自動(dòng)完成。

?

Ext.Loader