EXT JS動態(tài)加載機制的研究與實現(xiàn)

李翠平

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

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

中圖分類號：TP391.1

文獻標志碼：A

文章編號：1006-8228（2017）01-41-03

0.引言

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

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

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

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

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

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

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

（4）可以通過設置paths，設置1s文件的位置，如缺省，就是當前路徑。

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

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

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

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

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

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

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

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

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

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

onLoad：function（）

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

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

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

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

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

1.4關于微加載

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

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

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

（3）只有應用程序的當前版本才可保持在本地存儲。

這些改進解決了當前Touch微加載所報告的問題。主要是它會在超出空間的時候積極的刪除本地存儲的內(nèi)容。這個問題時常發(fā)生是因為保留了不必要的舊版本應用程序，這讓完全刪除成為最終選擇。

2.結束語

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