Extjs4前端開發代碼規範參考

準則：  一致性， 隔離與統一管理， 螺旋式重構改進， 消除重複， 借鑒現有方案

 1.    保證系統實現的一致性，尋求一致性方案， 相同或相似功能盡量用統一模式處理；

2.    儘可能使用隔離技術，將某一模組（比如許可權管理）的代碼隔離在局部統一管理；

3.    不斷重構改進，一旦發現更好的方式， 馬上替換掉原有方式；

4.    儘可能重用，消除重複；

5.    儘可能先借鑒系統中已有方案並複用之；如果有更好方案可替換之；

 

前端架構： 採用MVC模式

1.     儘可能遵循MVC模式， 做到 “模型-視圖-控制器”相分離；

2.     將整個MVC應用分解為多個小的MVC應用， 模組化管理；

3.    “模型-視圖”分離： 顯示資料集時， 先定義資料模型， 再定義 Store ， 然後關聯到具體的視圖中引用；

4.    “視圖-控制器”分離： 視圖事件邏輯放置於控制器中，控制器負責註冊事件監聽、資料載入及更新視圖； 極少量邏輯可以綁定到視圖中。

 

組件配置： 標識 – 資料配置– 布局 – 顯示 – 樣式– 監聽器

1.    唯一標識性(xtype/itemId/name)最先，資料配置資訊(store)次之，布局資訊(layout, flex)再次之， 顯示性資訊(width,height, text等)再次之，樣式資訊(margin等)再次之，操作/事件監聽器(handler, listeners)最後。

2.    標識性資訊用於定位組件；資料配置資訊用於更快速地瞭解其顯示用途；

3.    事件監聽器最好在控制器中註冊。

 

非同步請求的操作與響應： 統一模式， 響應資訊儘可能明確詳細 ， 正確優先於效率

1.    創造和使用統一模式處理非同步請求: 發送請求、處理響應、給予提示；

2.    每個非同步請求的響應提示必須指明該響應針對什麼請求，完成了什麼操作，產生了什麼影響； 如果成功， 顯示成功導致的結果； 如果失敗，顯示具體原因； 必要的話給予建議操作;

3.    正確性是第一位的， 其次是效率； 錯誤的高效只會導致更災難的結果，而低效的正確毫無意義；

4.    非同步請求可以使用兩種方式： Ext.data.Store.load 方法和 Ext.Ajax.request . 前者用於為綁定store 的組件載入資料， 後者用於請求操作。

 

全域變數管理：

1.    使用單例模式；

2.    所有模組公用的全域變數和函數放在檔案 sharedUtils.js 和 sharedComponents.js 中統一管理； sharedUtils.js 管理工具 + 生產力類， sharedComponents.js 管理組件的常用配置；

3.    特定模組公用的全域變數和函數放在該模組的 XXXUtils.js 檔案中， 例如 VmoperationUtils.js

 

命名規範：

1.     程式中的所有變數一律採用駝峰式寫法；而組件配置中的標識性變數 itemId, name 等值採用底線寫法。比如，

         var vmName =parent.down(‘textfield[name=”vm_name”]’);

2.    模組名帶有 _module 或 Module 尾碼， 以便於區分；

 

檔案位置約定：

1.    自訂樣式放置於webapp/resources/css/moonmm.css 下；

2.    圖片放置於webapp/resources/images/ 下；

3.    特定模組的局部 frame html 檔案放置於 webapp/framehtml/下；

4.    公用JS庫、檔案放置於 webapp/ 下

 

應用目錄結構：

1.    整體MVC 目錄結構： 分解為多個子MVC應用

             

             2.  每個子MVC 應用的目錄結構：