不知不覺2008已經走到了盡頭,在這近一年中,一直不斷的嘗試用ExtJS做項目,從1.1到現在的2.2,吃了不少苦頭,也有不少收穫,總結一下,一起分享!
1. ExtJS的定位是RIA,和Prototype、jQuery等類庫的定位不同。使用ExtJS做開發,就是意味著以用戶端開發為主,不然就不叫RIA架構了,而Prototype、jQuery等只是輔助性的用戶端架構,和ExtJS不在同一條起跑先上。如果一定要和其它的架構做比較的話,應該和Isomorphic SmartClient、Backbase Enterprise Ajax之類的架構做比較,當然,和他們相比,ExtJS還是有很大的優勢的。
2. 使用ExtJS時需要解決如何服務端通訊的問題。由於ExtJS只是一個用戶端的架構,和服務端技術沒有關係,也就沒有相應的服務端的適配層,因此用戶端如果要用ExtJS,則必須提供它需要的資料結構。ExtJS主要通過這幾種方式和服務端進行通訊:
- Ext.Ajax.request 做普通的非同步請求,服務端可以根據實際情況返回JSON形式資料或者HTML片段;
- Ext.tree.TreeLoader 載入樹形結構,服務端必須返回JSON形式資料,而且要符合Ext.tree.TreeNode的配置要求,否則自己做轉換;
- Ext.data.Store及其衍生類別 載入表格形式的資料,服務端可以根據實際情況返回JSON形式資料或者XML形式資料,如果沒有特殊要求,推薦返回JSON格式的資料;
- Ext.Element.update 局部更新,這個方法最總還是要調用Ext.Ajax.request方法,之所以把它單獨列出來,是因為這種方式比較容易被忽視,但是在某些情況下還是挺有用的,比如調用Ext.Panel.body.update()對某個Ext.Panel的內容進行局部更新,如果使用這種方式,那麼服務端只能相應的返回HTML片段了;
3. 使用ExtJS時的注意事項。ExtJS和其它的輔助性類庫(Prototype、jQuery等)相比顯得非常龐大,讓很多很多初學者望而卻步。經過近一年的學和用,對於ExtJS的使用,我總結了一下幾個注意事項:
- 盡量使用ExtJS的方言。 ExtJS提供了很多有用的方法,解決用戶端JavaScript常見的開發工作單位,常見的有查詢HTMLDom,建立HTML元素,為HTML元素註冊事件響應函數等,這些大可以全部使用ExtJS提供的方法,使自己代碼構建與ExtJS之上,舉幾個例子:
- 查詢ID為container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);
- 在ID為container的DIV內建立一個按鈕,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
- 為ID為container的DIV的click事件註冊處理函數,使用:Ext.fly(‘container’).on(‘click’, handlerFn, scope);
- ExtJS的自訂事件很好用,可以實現一對多的通知,而且任何自訂事件都可以中途停止,只要有一個處理函數返回false。
- Store合并成一個檔案 用ExtJS顯示資料,自然就需要用到Ext.data.Store及其派生出來的類,可以考慮所有的Store合并到一個檔案,這樣對重用有很大的協助。
- 指令檔管理 儘可能的每個模組做成一個類,一個類一個檔案,類似與Java或C# 的檔案處理方法,每個檔案註明其作用,依賴的檔案等,如果太多的話可以考慮寫一個設定檔,通過讀設定檔來輸出指令碼到用戶端。
- 調試和部署分別載入Debug和Release版本的指令碼 ExtJS附帶的例子中沒有使用完整Debug版本的例子,所以很多人找不到完整的Debug版本的引用順序,通過對Source檔案夾下的ext.jsb檔案進行分析,就可以得到正確的載入順序,如下:
- Debug
- /ext-path/source/core/ext.js
- /ext-path/source/adapter/ext-base.js
- /ext-path/ext-all-debug.js
- Release
- /ext-path/adapter/ext/ext-base.js
- /ext-path/ext-all.js
- 對Script進行壓縮 對項目中有大量的JavaScript的話,對其進行壓縮是很有必要的,這裡我推薦的是ExtJS的論壇提供的JS Builder,可以通過設定檔來對Script和CSS進行壓縮,據說ExtJS就是用這個工具進行壓縮的,不過有一個缺點,就是不支援UTF-8編碼。
4. ExtJS的優點和缺點總結。經過近一年的嘗試,ExtJS的優缺點總結如下:
- 優點
- 一致的類庫 這點在1.1版本時還不是很完善,但是到了2.0以後,ExtJS內部經過了翻天覆地的變化,特別是UI組件,有統一的基類,給人的感覺很像是一個運行在瀏覽器上的運行時架構,這一點只有在對ExtJS熟練了之後才能體會到。
- 託管頁面呈現 ExtJS在發展到2.0之後,不僅UI類庫一致了,而且渲染方式也是統一的,用官方的話說,是Managed Rendering,這一點使得UI的擴充也比較一致,有利於以後的維護與發展。
- 相對豐富的文檔和樣本 毫無疑問,剛剛接觸到ExtJS的人多數都是被它附帶的例子和開發文檔吸引過去的,它的文檔做的確實不錯。
- 華麗而成熟的介面 ExtJS在2.0之後的介面真的是沒得說,不僅華麗,而且相對很成熟。
- 缺點
- 沒有合適的開發利器 毫無疑問,一個好的開發工具可以大大的提高編碼的速度,但是對於ExtJS,始終沒有一個完美的開發工具,可以推薦的有Aptana Studio, Spket IDE,和Spket 提供的提示檔案,但是都是各有優缺點,都不完美,只能一邊看SDK一邊寫代碼。
- 沒有介面設計工具 雖然有人提供了一個線上的介面設計工具,但是和Visual Studio提供的ASP.Net設計工具來說,真的可以說是天壤之別。因此,只能一邊預覽,一邊寫代碼。
- 文檔不全 雖然ExtJS提供的文檔很豐富,但是還是跟不上原始碼的更新速度,所以,經常要通過看原始碼,調試才能真正解決問題。
- 不能編譯 這一點可以說是JavaScript的缺點(如果能編譯,就不叫JavaScript了),在實際的開發中,經常會敲錯一些代碼,比如大小寫錯誤等,不能通過編譯得到反饋,只能在運行時排錯,導致開發的效率比較低下。
5. 使用ExtJS做應用的一些建議。多數人認為ExtJS的指令碼體積很大,不適合放到互連網上,對於這一點,有如下建議:
- 部署到互連網上的Web應用一定要載入Release版本的ExtJS
- 可以考慮只載入必須的組件,build目錄下指令檔都是壓縮過的,如果項目中用到的ExtJS的組件不是很多,可以只載入用到的
- 考慮使用IIS的檔案壓縮功能
- 使用Google的Gears,把所有的靜態檔案做用戶端緩衝
- 使用ADOBE的AIR,把指令碼打包到用戶端運行
總的來說,ExtJS是一個不錯的架構,它陪伴我走過了精彩的2008,也許在未來的2009,我會轉向其它的RIA技術,但是我至少會繼續關注ExtJS,同時也希望這個架構能夠頑強的生存下去。
PS,共用一些學習資料:
- ExtJS 2.0 簡介 (推薦反覆閱讀,細細體會)
- ExtJS的使用者擴充合集 (推薦常去看看)
- 如何用ExtJS構建大型應用 (可以說是做ExtJS開發的指導思想)
- ExtJS 2.0 類庫的腦圖 (可以加深對ExtJS類庫的繼承關係的理解)
from:http://www.cnblogs.com/beginor/archive/2008/12/14/1354922.html