JavaScript重構（九）：自訂的JavaScript產品架構

產品做到一定程度，JavaScript不僅僅需要幾個層面上的重構，而需要將這些合理的、零散的重構整合起來、系統化，最終形成一套適合自己產品的前端架構。
以某套產品的前端架構為例，包含了這麼幾個組件：
1、通用工具組件，提供了UI組件最基礎的通用能力，包括：日誌、緩衝、資料共用、資料非同步載入、原生對象擴充、Ajax產品定製化等等。
2、共用UI組件，包括：通用彈出框、通用按鈕等。
3、產品基礎模組，在所有頁面均載入該JS，包括：評論模組、打分模組、基本資費模組、下載模組、播放模組等等。
4、擴充產品模組，僅在特定頁面載入該JS，包括：播放器組件、直播頻道組件等等。
5、關聯常量預置模組，這部分主要是一些系統常量無法在JavaScript中確定下來，需要外部傳值進去。
（依賴關係：5->1->2->3->4）
上述JS在開發過程中需要細化，並且需要嚴格限定互相之間的依賴關係，但在發布時，使用指令碼或者JS彙總壓縮公用程式整合到特定的一個或幾個JS檔案中。
 
UI模型和業務模型：
這部分可以說是架構的核心，包括模型的定義和模型資料的儲存，所有的介面都是圍繞模型制定的。
 
產品架構實施中遇到的幾個典型問題：
1、頁面JavaScript指令碼對於不同語種下需要保持的差異：
譬如阿拉伯語是從右至左排的，那麼對於操縱DOM的指令碼來說，很可能和英文下有不同的差異，通常語種引起的差異可以用問題抽象和語種歸類的辦法化解：
比如語言文字從右向左排列和從左向右排列是造成某些展示不同的根本原因，那麼在關聯常量預置模組中設定好語種，涉及到的語種和左右排列方向的對應關係應當存放在代碼中，最後在JavaScript代碼中區分對待就可以了。
2、頁面上的一些非通用的DOM操縱密切相關的代碼和頁面展示耦合緊密，這部分代碼是不宜置入架構中的，置入後反而不便於產品定製，需要明確這個架構內外的分界線是什麼。
3、結合Team Dev技能情況制定詳細的產品架構實現方案。
比如Team Dev成員普遍缺乏JavaScript物件導向能力，這時候就不應當把架構做得太厚，應該對架構外的JavaScript使用適當放寬限制，同時做好命名規約。
4、API介面把關。
需要由有經驗的程式員對於架構發布的介面把關，保證介面設計的合理性。

作者“四火的BLOG”