ExtJs是當今最主流的前端介面開發工具之一

標籤：使用   java   ar   for   檔案   資料   art   問題   sp   

摘要：ExtJs是當今最主流的前端介面開發工具之一，功能強大，外觀絢麗。雖然網上的開發文檔很多，但是在實際應用中仍然會遇到很多問題，本文結合公司資訊化、SAP ERP等實際項目開發經驗，對使用ExtJs開發做了一個梳理和總結，特別對開發中遇到的重點問題進行了詳細闡述，希望能夠為大家提供一些協助。
    關鍵詞：ExtJs  IMS  RIA 範圍 id衝突 風格統一
1 引言
    隨著互連網技術的不斷髮展，網站的互動性越來越強，軟體從C/S到B/S，又到了B/S結構的C/S介面體驗，伴隨著大量的富網際網路架構的出現完成了一個螺旋式的輪迴，目前在項目中使用的主要B端(瀏覽器端)架構中ExtJs、Flex、Jquery應該是使用頻率最高的三個架構。
ExtJs是一種使用Javascript編寫的與後台無關的Ajax架構。主要用於開發具有炫麗外觀的RIA（富用戶端）Web應用。它以其豐富的功能、華美的介面、良好的相容性以及最重要的平台型等優勢成功成為當今最主流的前端開發架構之一。
在投資管理資訊化項目（簡稱IMS）中，項目的前端就採用了ExtJS架構。在實際開發中，ExtJs豐富的組件，極強的代碼可重用性以及絢麗的效果都給我們的開發帶來了很多方便和不錯的體驗。但是由於這是第一次使用ExtJs，大家都缺少經驗，而且處於邊學邊開發的狀態，所以遇到很多問題。現在IMS已經接近尾聲，在此本人對使用ExtJs開發做了一點總結，希望能夠為大家以後的開發提供一點協助。
2. ExtJs開發要點
2.1整體規劃
    所謂整體規劃，個人看來主要是介面、基本資料、公用功能的規劃。
    介面的規劃主要是要對頁面整體布局以及主要業務模組顯示風格的提前確定。由於ExtJs應用系統的特殊性，它更偏向於RIA，幾乎所有的頁面以及操作都是在同一個瀏覽器選項卡中完成，很少牽涉到跳轉頁面的現象。因此如何緊湊、美觀的對頁面進行布局是前期需要規劃好的。另外，提前確定重要頁面的顯示風格是十分必要和重要的。在IMS中，由於種種原因，前期我們沒有花時間對業務頁面顯示風格進行討論和確認，導致後期使用者測試時提出頁面風格不好的問題，以至於花費很大代價來修改頁面顯示問題。
    基本資料以及公用功能的規劃，主要是為了給開發帶來便利。基本資料包括系統啟動之後需要緩衝的資料，全域變數等。公用功能的規劃主要是將一些經常用到的功能以及函數等進行整合，然後提取出來，以便後面開發時能夠方便的調用。
2.2 Id衝突
2.2.1問題來源
    在IMS項目初期，由於缺乏經驗的緣故，代碼中遺留了很多隱患，在項目後期，這些隱患都暴露出來了。其中遇到最嚴重的就是組件ID衝突問題。
    相信熟悉前台開發的程式員都知道，在HTML規範中，在同一個html檔案中，任何元素的id值都應該是唯一的（雖然在重複的情況下，瀏覽器也能解釋，但是當通過js調用getElementById()來擷取元素時，頁面會報錯）。對於採用ExtJs開發的應用來說，基本上整個系統的前台頁面都是由純js編寫的，這些js都由一個jsp（或者html、asp等）來承載（比如index.jsp），這就意味著這個頁面中所有元素的id值都應該是唯一的。並且，對於ExtJs而言，在渲染頁面的時候，它會通過定義的id值來擷取元素做很多的操作，當出現id衝突時，頁面就會出現很多意想不到的情況。
2.2.2產生衝突的情況
    在ExtJs中，任何組件都有一個屬性id，程式員可以自由定義這個id的值，如果不定義，那麼ExtJs會自動為這些組件定義一個唯一的id值。由於Ext自動定義的id值是唯一的，因此不會出現任何問題。但是對於程式員定義的id值來說，這個值卻不一定是唯一的。
    一方面，一個項目中牽涉到很多的頁面，這些頁面是由多個程式員共同編寫的，因此很可能在不同的頁面中定義相同的id值，甚至是同一個程式員也有可能出現定義相同id值的情況。
    另一方面，即使在編寫的頁面中沒有出現相同的id值，在如下情境中，也會出現id衝突的問題。以IMS項目中的一個實際情況舉例，我們有一個年度投資計劃列表（），當點擊查看按鈕時，建立一個選項卡，進入這一條記錄的詳細資料頁面，在這個頁面中，我們確保沒有定義重複的id，這種情況下沒有任何問題。但是當我們再查看一條記錄時，新開啟的頁面中所有的id都與前一個頁面中的id相衝突，導致兩個頁面都變為空白。
 
2.2.3解決辦法
    針對第一種情況，我們可以通過簡單的約定來解決。比如在IMS系統中，我們約定，在不同的業務介面中，使用類名首碼來標識每個組件的id，比如年度投資計劃（InvPlan）列表頁面，我們約定其id為InvPlanView，同樣，對其建立編輯頁面，我們約定其id為InvPlanForm，這樣，通過簡單的約定，不僅增加了代碼的可讀性，也解決了id衝突的問題。
    對於第二種情況，有兩種解決方案。
    方案一：使用視窗（window）組件。其實對於第二種情況，問題的癥結主要在於同一個組件會出現多個不同的執行個體，針對這一點，我們可以控制一次只能new一個相同的組件，實現的方式就是使用window。window有modal屬性，當將屬性為true時，window會對其後面的一切內容進行遮罩。這樣，其他頁面將不能操作，防止了同時new兩個相同組件的可能。效果如下：
 
    缺點：系統中可能有些頁面比較複雜，需要完成的功能很多，使用者在操作此頁面時，可能需要查看系統中的其他資料，這時使用window遮罩不能滿足這種情況。
    方案二：添加唯一性標識。對於方案一使用window不能滿足的情況，我們提出添加唯一標識的解決方案。具體實現就是，當new一個組件時，我們傳遞一個唯一的標誌（這裡使用uniqID來表示），然後在所有自訂id值裡加上這個uniqID。這樣，所有的id值都是唯一的，成功避免了id衝突的問題。
接下來通過兩個實際例子來闡述uniqID的選取問題。(詳見www.7wangzhanjianshe.com)
    例1：還是前面提到過的年度投資計劃頁面，當點擊某一條記錄的查看按鈕時，我們為InvPlanForm裡的所有自訂id加上uniqID，按照方案二，當查看其他記錄時，不會出現id衝突的問題。但是當我們多次點擊同一條記錄時，如果傳遞的都是唯一的uniqID，這樣就會出現同一條記錄的多個查看頁面，顯然這樣的結果不是我們想要的。我們期望中的結果應該是，當多次點擊同一條記錄時，都只有唯一的查看頁面。這就要求同一條記錄的uniqID必須相同，為了達到這個效果，使用這一條記錄（也就是資料庫中某一條資料）的id來作為uniqID是最合適的。
    例2：待辦任務頁面，當點擊進入某一條代辦任務時，頁面會動態載入此業務（例子中是年度投資計劃）的資料表單，。在這個情況下，如果我們再回到年度投資計劃的頁面裡面，去點擊查看這一條資料，由於uniqID使用的是資料的id，在這種情況下，頁面的id也衝突了（還有其他幾種衝突的情況，在此不作詳細說明）。所以在這種情況下uniqID不能選取資料的id，最好的方式是直接使用絕對唯一的時間戳記。
 
    缺點：通過以上兩個例子可以看出，這種添加uniqID的方式需要考慮各種可能出現的情況，然後對不同的情況選取不同的uniqID，這對整個系統的掌握度要求較高......(part1)

ExtJs是當今最主流的前端介面開發工具之一