EXT JS動(dòng)態(tài)加載機(jī)制的研究與實(shí)現(xiàn)

李翠平

摘要：為了提供給用戶良好的頁面使用感受，在頁面中使用腳本是常見的做法。用Javascript開發(fā)的Ext Js框架其豐富的界面功能，能帶給用戶良好的體驗(yàn)。為了提高頁面的執(zhí)行效率，Ext Js通過一系列方法實(shí)現(xiàn)了動(dòng)態(tài)加載機(jī)制，具體有參數(shù)設(shè)置方法、Ext部分導(dǎo)入方法以及微加載等。文章Ext Js的動(dòng)態(tài)加載機(jī)制的相關(guān)方法進(jìn)行討論。經(jīng)過比較，其中的參數(shù)設(shè)置方法簡(jiǎn)單、高效。

關(guān)鍵詞：Ext JS；動(dòng)態(tài)加載；執(zhí)行效率；JavaScript；參數(shù)設(shè)置

中圖分類號(hào)：TP391.1

文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：1006-8228（2017）01-41-03

0.引言

隨著Web技術(shù)的廣泛應(yīng)用和發(fā)展，開發(fā)者更希望開發(fā)出吸引用戶同時(shí)能滿足用戶需求的頁面。而為了達(dá)到良好的效果和簡(jiǎn)化開發(fā)，市場(chǎng)出現(xiàn)了許多以JavaScript為基礎(chǔ)的框架，其中Ext Js就是一個(gè)比較綜合的Js框架。其主要應(yīng)用是界面式開發(fā)，方便用戶快捷高效的制作出一個(gè)界面統(tǒng)一的應(yīng)用系統(tǒng)。但是一次性加載完所有的Js文件，對(duì)于一個(gè)較大型的項(xiàng)目來說，效率就會(huì)變得低下。是否可以在需要的時(shí)候才進(jìn)行加載？Ext Js的動(dòng)態(tài)加載機(jī)制，就實(shí)現(xiàn)了按需加載。該功能是從Ext Js 4.0版本開始新增的特性。

1.實(shí)現(xiàn)動(dòng)態(tài)加載的具體方法

1.1使用相關(guān)加載時(shí)的參數(shù)配置規(guī)則

（1）需要加載的外部js文件需要使用Ext.defme的方法定義一個(gè)類。

（2）外部js文件和類文件名要一致。比如創(chuàng)建類App.ux.MusicWin對(duì)應(yīng)的文件名是MusicWin.1s。

（3）要實(shí)現(xiàn)動(dòng)態(tài)加載，必須配置參數(shù)。

Ext.Loader.setConfig（enabled：true），將其中enabled屙性的值設(shè)置為true，該屬性的默認(rèn)值是false。

（4）可以通過設(shè)置paths，設(shè)置1s文件的位置，如缺省，就是當(dāng)前路徑。

例如：Ext.Loader.setConfig（paths：App.ux'："）；，到當(dāng)前路徑尋找App.ux的類定義。

如果不設(shè)置這個(gè)參數(shù)，就是默認(rèn)到App這個(gè)項(xiàng)目的ux路徑下去尋找。

使用chrome的Develop工具可以看到，在執(zhí)行了相關(guān)操作（比如點(diǎn)擊按鈕）后，才會(huì)去加載定義的js文件，測(cè)試成功。圖1和圖2展示了測(cè)試的結(jié)果。

此方式已經(jīng)考慮緩存的狀況。一段時(shí)間更新的話，不會(huì)重復(fù)加載同樣的js文件。

1.2自定義需要的ext-all.is文件，而不是導(dǎo)入整個(gè)文件的實(shí)現(xiàn)規(guī)則

（1）下載Sencha Cmd。Sencha Cmd是一套集打包、部署、壓縮等功能的工具。Sencha Cmd支持Sencha Ext Js的4.1.1a及以上版本并支持SenchaTouch的2.1版本及以上。許多新功能需要在框架的支持下工作。Sencha Cmd需要Java的運(yùn)行環(huán)境，需要1.7及以上版本的java環(huán)境支持，最低要求是javal.6版本。其下載地址：http：//www.sencha.com/products/sencha-cmd/download。安裝完后，進(jìn)入命令行（CMD）執(zhí)行：

sencha-sdk extjs compile exclude-namespace Ext.

chart and concat ext-all-nocharts-debug-w-comments，js

（2）使用sencha cmd可以產(chǎn)生指定模塊的js.（不需要的模塊就不會(huì)包括進(jìn)來）。

（3）sdk后面是extjs的目錄，sencha cmd依賴下面的src目錄的源代碼產(chǎn)生匯總的is。

（4）包和第三方包并不是使用Ext.define方式來定義的，使用以下方法導(dǎo)入自己定義的is文件：Ext.Loader.IoadScript（url：scriptpath，scope：this）：

需要注意兩點(diǎn)：①這種方式是沒有緩存機(jī)制的，只要執(zhí)行這個(gè)，都會(huì)從服務(wù)器端重新下載代碼；②這種方式是異步的，如果導(dǎo)入兩份有前后依賴關(guān)系的js，則有可能出問題。可以用祥光方法解決這個(gè)問題。定義is的全局變量，或在Ext對(duì)象中設(shè)置相應(yīng)的屬性。對(duì)有依賴關(guān)系的文件，可以在第一份加載成功后再加載第二份。

Ext.LoadeLIoadScript（{url：scriptl path，scope：this.

onLoad：function（）

Ext.Loader.10adScript（url：script2path，scope：this）：

1.3使用controller方式具體實(shí)現(xiàn)規(guī)則

（1）獲取加載文件的路徑：對(duì)controHer而言，它的加載路徑總是有兩個(gè)備選路徑，一個(gè)是Ext框架級(jí)別的備選路徑，它的默認(rèn)值是當(dāng)前目錄，另外一個(gè)是項(xiàng)目級(jí)別的路徑，其優(yōu)先級(jí)高于框架級(jí)別。只有項(xiàng)目級(jí)別路徑加載不到is資源文件時(shí)，才會(huì)從框架級(jí)別的路徑中加載is文件。

（2）要計(jì)算出項(xiàng)目級(jí)別的路徑，不得不獲取很多相關(guān)信息，比如前綴，controller的類名，路徑名。其中Ext.application的項(xiàng)目名（name）的作用是提供項(xiàng)目級(jí)別路徑的key，Ext.application的（appFolder）提供了項(xiàng)目級(jí)別路徑的value，前綴是通過類的全名解析出來的。一般類的全名的前綴部分最好和Ext.application的項(xiàng)目名（name）一致，其原因是，資源文件最終路徑path是通過path=paths[prefix]計(jì)算出來的。如果不一致，則轉(zhuǎn)else分支。所有的資源文件最終路徑都是用.分割的路徑最終替換成的，分割的路徑并且尾部追加擴(kuò)展名來形成的，項(xiàng)目中任何地方不會(huì)涉及裸露的路徑字符串。

（3）在任何情況下controller總能被正確的加載，只要appFolder設(shè)置正確。

1.4關(guān)于微加載

在最新的Sencha Cmd6包含了本地存儲(chǔ)緩存，這類似于Sencha Touch的產(chǎn)品的微加載。它有一些重要的改進(jìn)：

（1）緩存能在app.json中禁用；

（2）只有通過徽加載方式加載的內(nèi)容才不會(huì)被刪除；

（3）只有應(yīng)用程序的當(dāng)前版本才可保持在本地存儲(chǔ)。

這些改進(jìn)解決了當(dāng)前Touch微加載所報(bào)告的問題。主要是它會(huì)在超出空間的時(shí)候積極的刪除本地存儲(chǔ)的內(nèi)容。這個(gè)問題時(shí)常發(fā)生是因?yàn)楸Ａ袅瞬槐匾呐f版本應(yīng)用程序，這讓完全刪除成為最終選擇。

2.結(jié)束語

本文從幾種途徑討論了ExT的按需加載問題。這幾種解決方法都各自有優(yōu)點(diǎn)和不足之處。從這幾種方法比較來看，個(gè)人更喜歡第一種方式，即：通過參數(shù)配置問題，這種方式簡(jiǎn)單有效。本文探討的幾種方法，只是工作中發(fā)現(xiàn)的，相信還有其他更好的解決方法等待我們?nèi)グl(fā)現(xiàn)，去挖掘。