Extjs的架構設計思考，單頁面應用 or 多頁面？

寫在前面：不要認爲 EXTJS 高版本就是一個界面改良，在項目中，仍然用 N 張頁面，在 N 張頁面部署 EXTJS ．這種方式不用多講，效率問題你們都看得出來， EXTJS 是一個集成開發工具，註定他的開發包很大，一個 600 多 K 的 JS 文件，打算讓它下載多少次呢？應該說， EXTJS 不只是一個 AJAX 開發框架，也是一個富客戶端開發平臺， AJAX 是能夠部署到多個頁面，但不推薦這樣作，Extjs能和 FLEX 同樣，在一張頁面中，完成項目中全部事件。 

1、單頁面 
目前的應用方式：一個 Viewport ，點擊每一個菜單在 Viewport 的 center 區域生成一個 tab ，這個 tab 就是一個 panel ， panel 中用 html 屬性放置一個 iframe ，用 iframe 去加載另一個全新的頁面。 

單頁面方式：仍是一個 Viewport ，點擊每一個菜單在 Viewport 的 center 區域生成一個 tab ，這個 tab 就是一個 panel ，可是 panel 中不使用 iframe ，而是將原來用 iframe 方式加載的內容，直接「畫」在 panel 中。 

目前的應用方式的問題： 
1.  佔用內存超高：每一個 tab 都會用 iframe 加載一個全新的頁面，每一個頁面都會載入一套完整的 ExtJS 的運行環境，因爲瀏覽器的緣由，這些 tab 關閉的時候內存不會徹底釋放，這樣隨着 tab 的開關，內存佔用愈來愈多，佔用幾百 M 都沒問題。 
2.  center 區域內部的寬高，沒法隨瀏覽器寬高變化，沒法自適應 
3.  iframe 內外相互控制，內外溝通很是困難 
4. 須要消耗額外的 js 解析時間，速度慢，從新加載要消耗解析 js 的時間 
5.  用 iframe 有時候會致使一些莫名其妙的變形問題，滾動條問題 



單頁面方式： 
1. 不用 iframe 加載， ExtJS 本身會釋放無用的對象、事件佔用的內存，通常一個應用只佔用幾十 M 內存 
2.  因爲是在一個頁面內， ExtJS 本身能夠掌控寬高自適應 
3. 單一頁面無此問題 
4. 只須要第一次載入頁面的時候加載 ExtJS 運行庫 
5.  很容易控制，無此問題 


2、組件化、模塊化
編寫 ExtJS 程序，應該像搭積木同樣，在 Viewport 這樣一個框架中，咱們添加各類積木塊進去獲得咱們想要的形狀。 Extjs 給咱們提供了不少最小塊的積木，每一塊都是一個組件，咱們能夠將幾個最小的組件組合成一個稍微大一點的組件，咱們不可能每一個功能都從最小的組件從頭搭建，咱們能夠收集一些更大一些的組件，實現這個層面的組件複用，組件是可大可小的，組件的複用也是可大可小的。組件化編程是一個思想，而不是一門技術，這個思想能夠用在任何地方。 

3、 UI 與邏輯分離 
可能你們都已近習慣了將 handler 和 listeners 與一大堆 Config Options 寫在一塊兒了。不能說這是一種錯誤的用法，可是這絕對不是好用法。相似下面這種代碼是否是隨處可見呢？ 
   

這種寫法，再加上全集變量氾濫，就會致使整個 js 文件混亂不堪，一個 js 文件 3000 行代碼，全局變量滿天飛，想要的時候找不到，我想你們都遇到過吧。 
 

再看一下下面這段代碼，不會不感受清爽不少呢  

 


UI 與邏輯分離，就是在設計一個組件的時候，將 UI 寫成一個類，將事件處理和其餘邏輯寫成另一個類，兩個類存放在兩個不一樣的 js 文件中 ( 非必須 ) 。這樣子的好處： 
1.  改動 UI 和邏輯，幾乎不會相互影響 
2.  代碼清晰規範，提升開發速度，下降維護成本 
3.  組件能夠重用，界面能夠重用 
4.  有利於開發規範的統一 
5.  由於使用繼承，內存開銷減小，運行速度加快

轉載自：http://shubangjun.iteye.com/blog/1009094