1、  Extjs4 應(yīng)用架構(gòu)設(shè)計(jì)（一）應(yīng)用的可擴(kuò)展性、可維護(hù)性和靈活性取決于應(yīng)用架構(gòu)的質(zhì)量。不幸的是，這往往被視為馬后炮。概念設(shè)計(jì)和原型變成了大規(guī)模的應(yīng)用，許多應(yīng)用的基礎(chǔ)基本就是示例代碼的復(fù)制與粘貼，這很誘人，因?yàn)檫@可以讓你在項(xiàng)目在開(kāi)始階段有一個(gè)快速的進(jìn)度。然而，節(jié)省下來(lái)的時(shí)間相對(duì)于項(xiàng)目后期的維護(hù)、擴(kuò)展甚至重構(gòu)應(yīng)用的時(shí)間來(lái)說(shuō)，算不得什么。比較好的的方式是寫(xiě)一個(gè)可靠的架構(gòu)，在實(shí)施前編寫(xiě)好遵循的約定和定義應(yīng)用的視圖、模型、存儲(chǔ)和控制器等。在這篇文章，我們將會(huì)看到一個(gè)受歡迎的應(yīng)用并討論如何構(gòu)建用戶接口，從而創(chuàng)建可靠的架構(gòu)。1 代碼結(jié)構(gòu)應(yīng)用程序架構(gòu)體系會(huì)為實(shí)際類和框架代碼提供結(jié)構(gòu)和一致性。建立

2、一個(gè)好的架構(gòu)有以下主要好處：每個(gè)應(yīng)用的工作方式是相同的，因而你只需要學(xué)習(xí)一次。在應(yīng)用之間很容易分享代碼，因?yàn)楣ぷ鞣绞绞窍嗤摹Ｄ憧梢允褂肊xtJS的生成工具為你的應(yīng)用程序創(chuàng)建經(jīng)過(guò)優(yōu)化的發(fā)布版本。在ExtJS 4創(chuàng)建你的應(yīng)用時(shí)，應(yīng)該考慮一下我們定義的約定，尤其是統(tǒng)一的目錄結(jié)構(gòu)。這個(gè)結(jié)構(gòu)要求所有類文件都放到app目錄下，在該目錄下，可根據(jù)命名空間建立model、view、controller和store等4個(gè)子目錄。雖然ExtJS 4提供了如何構(gòu)建你的應(yīng)用的最佳做法，但是你也可以根據(jù)自己需要修改我們建議的文件和類的命名約定，例如，你可以為你的控制器在“Controller” 前加上前綴，如“Use

3、rs”修改為“UsersController”。在這種情形下，記得給所有的控制器文件和類加前綴。最重要的一點(diǎn)是，要在開(kāi)始編寫(xiě)應(yīng)用程序前定義好這些約定并遵守它。這樣，你就可以在任何需要的地方調(diào)用這些類。我們強(qiáng)烈建議要遵model、view、controller和store這4個(gè)文件夾的命名約定，這可以確保你可以使用SDK Tools beta對(duì)應(yīng)用進(jìn)行優(yōu)化。2 尋找平衡點(diǎn)2.1 視圖View將應(yīng)用程序的UI分割成視圖是好的開(kāi)始。通常做法是，你提供線框，而設(shè)計(jì)師創(chuàng)建UI實(shí)體模型。嘗試一下使用以下模型，讓我們的設(shè)計(jì)師如何使用ExtJS重建（非常有吸引力）Pandora應(yīng)用。我們需要在視圖粒度與通用性

4、之間尋求一個(gè)平衡。讓我們看看當(dāng)劃分太多視圖的時(shí)候會(huì)發(fā)生什么。將UI劃分成太多小的視圖將會(huì)讓視圖在控制器中變得難以管理、引用和控制。另外，由于每個(gè)視圖都有其自己的文件，創(chuàng)建過(guò)多的視圖會(huì)讓定義UI塊或視圖邏輯時(shí)很難找到視圖文件。另一方面，我們不希望視圖變得太通用，因?yàn)檫@樣在修改時(shí)會(huì)失去靈活性。在這種情況下，每個(gè)視圖已經(jīng)過(guò)于簡(jiǎn)化。當(dāng)視圖的幾個(gè)部件需要自定義視圖邏輯的時(shí)候，視圖類最終會(huì)有太多的負(fù)擔(dān)，產(chǎn)生的視圖類變得很難維護(hù)。另外，當(dāng)設(shè)計(jì)師考慮改變UI時(shí)，我們不得不重構(gòu)視圖定義和視圖邏輯，這是相當(dāng)煩人的事。當(dāng)我們可以輕松的在頁(yè)面上重新排列視圖，而不需要每次都重構(gòu)它們的時(shí)候，說(shuō)明已經(jīng)取得了平衡。例如，我們

5、可以把廣告作為獨(dú)立視圖，這樣，我就可以很容易移動(dòng)它，甚至刪除它。在這一版本，我們根據(jù)視圖的任務(wù)來(lái)劃分UI。一旦你對(duì)使用視圖組合UI有整體思路，那么，你就可以在實(shí)現(xiàn)它們時(shí)對(duì)其粒度做出調(diào)整。有時(shí)候，你會(huì)覺(jué)得兩個(gè)視圖應(yīng)該成為一個(gè)，或是視圖太通用，需要將其劃分成多個(gè)視圖，這是一個(gè)良好的開(kāi)端的基礎(chǔ)。我相信我們已經(jīng)做到了這一點(diǎn)。2.2 模型Model現(xiàn)在我們已經(jīng)有了視圖的基本結(jié)構(gòu)，是時(shí)候考慮模型的問(wèn)題了。通過(guò)考察UI中動(dòng)態(tài)數(shù)據(jù)的類型，我們可以獲得應(yīng)用中所需的不同模型。 我們已經(jīng)決定只使用兩個(gè)模型：Song和Station。我們可以多定義兩個(gè)模型：Artist和Album。然而，與視圖類似，我們并

6、不想定義模型時(shí)也變得太通用。在當(dāng)前情況下，我們并不需要將artist和album信息獨(dú)立出來(lái)，因?yàn)楫?dāng)前應(yīng)用不允許用戶根據(jù)指定的artist選擇song。相反，數(shù)據(jù)是根據(jù)station組織的，song是重點(diǎn)，而artist和album是song的屬性。這意味著我們能將song、artist和album結(jié)合到一個(gè)模型。這可以大大簡(jiǎn)化應(yīng)用的數(shù)據(jù)邊界。這也能簡(jiǎn)化在服務(wù)器端的API，因而我們不需要加載artists和albums。因而，對(duì)于這個(gè)示例，只需要2個(gè)模型：Song和Station。2.3 存儲(chǔ)Store現(xiàn)在我們需要考慮如何在應(yīng)用中使用模型，也就是如何設(shè)計(jì)Store的問(wèn)題。要搞清楚需要使用那些S

7、tore是比較容易的。一個(gè)好的策略是先確定頁(yè)面上所有需要綁定數(shù)據(jù)的組件。在當(dāng)前情況下，我們需要列出用戶收喜愛(ài) stations，一個(gè)顯示近期播放過(guò)的歌曲的scroller，一個(gè)搜索區(qū)域以顯示搜索結(jié)果。每一個(gè)這樣的視圖都需要綁定一個(gè)Store。2.4 控制器Controller有幾種方法可以讓你通過(guò)應(yīng)用控制器發(fā)布應(yīng)用的響應(yīng)。讓我們開(kāi)始考慮當(dāng)前例子需要那些控制器。這里有2個(gè)基本控制器：SongController和StationController。ExtJS4允許你使用一個(gè)控制器同時(shí)其控制幾個(gè)視圖。StationController要處理的事情包括創(chuàng)建新的stations，以及當(dāng)用戶喜愛(ài)的 station加載后，將其應(yīng)用到StationList視圖。SongController負(fù)責(zé)管理SongInfo視圖和根據(jù)用戶的liking、 disliking、暫停和跳過(guò)操作更新RecentSong Store。控制器可通過(guò)應(yīng)用事件的觸發(fā)和監(jiān)聽(tīng)實(shí)現(xiàn)相互之間的交互。當(dāng)我們可以創(chuàng)建余下的控制器，一個(gè)用于管理playback，另外一個(gè)用于搜索 stations，我