基於AngularJS的前端架構（上）

模塊化

怎么分模塊

AngularJS自己有模塊的概念，但只是為controller、direcitive、service等提供一個集合的概念，並沒有文件調度的功能。

官方推薦的模塊分類方法是：

angular.module('app',['app.direcitve','app.controller','app.service'])

簡單應用的話，這樣分很方便。但是當controller、direcitive等都多了，並且互相有關聯的時候（比如某個direcitive需要自己的controller），這樣的分法就顯得臟了。
改良方案很簡單：將相關的directive、controller、service拆到一個同子文件夾中，形成以業務邏輯為關聯的模塊。如：

angular.module('app',['app.user','app.message']

怎么處理第三方模塊

AngularJS的第三方模塊都會有自己的模塊名，如表格控件ngGrid就占用了ngGrid。這些模塊名可能不符合我們的命名規則，但我的建議是不要去改動，免得升級什么的時候出問題。
那在哪里去聲明對這些模塊的依賴呢？我認為即使這個模塊式所有子模塊都要用的，也不要寫成下面這樣：

angular.module('app',['app.user','app.message','ngGrid']

而應該在直接需要這個第三方模塊的模塊里去寫：

angular.module('app.user',['ngGrid'])

原因很簡單，幾乎所有的第三方模塊都是不涉及到系統的業務邏輯的，當你把第三方模塊和某一個業務邏輯模塊混在一起的時候，其他模塊也需要這個第三方模塊時，你會很容易就去通過依賴這個混合的業務模塊來獲取第三方模塊。或者說你的同事很可能會這么做。

目錄結構

說道第三方模塊就不得不說目錄划分了。 大部分時候我們的目錄結構是這樣的：

--app 
   |--javascript
   |   |--*.js
   |--css
   |   |--*.css
   |--lib
   |   |--bootstrap  

簡單應用的話這樣划分足夠了。不過既然說到了模塊化，你應該已經猜到我要說的結構了：

--app 
   |--thirdParty
   |   |--moduleA
   |   |    |--js
   |   |    |--css
   |   |    |--lib
   |   |    |--subModuleC
   |   |
   |   |--moduleB
   |   
   |--system
   |   |--moduleC

不要說蛋疼，不要說“這在頁面上加載腳本的時候還得一個一個去找js和css的位置”。如果你用grunt之類的工具的話應該知道這根本不是問題。這樣划分的好處在於，幾乎任何一個文件夾都是一個完整的模塊，你可以隨便拷貝到任何地方去測試什么，或者在其他簡單環境開發好了再丟到系統目錄下。system和thirdParty這兩個目錄的划分是用來區分通用模塊和業務邏輯模塊的。其實這就是典型的服務器端框架目錄划分。 不過實際應用中，這樣目錄結構還是有問題。特別是當你使用less的時候，如果你的less文件依賴thirdParty中的less庫，那你在測試的時候就不得不保持住這個相同的目錄結構。
解決方法是將thirdPatry放在system里。如果你的模塊不多，也可以把模塊平行放置。

CSS和HTML

less

這里只講less的規划。
首先在大應用里我不推薦直接使用bootstrap。雖然很好用，但是應用復雜了之后，必然會存在大量自己的樣式。這時候html上的class就會亂成糊了。建議頁面上只使用自己的class名，並且最好是有邏輯意義的。bootstrap可以作為底層。
這里值得一說的是命名規則。既然已經有了less，頁面上就不再需要通過組合方式來控制元素的樣式了,如果有class組合的話，應該都是有語言的。打個比方，以前的寫法：

<div class="alert red">you are on fire.</div>

現在的寫法：

<div class="message danger">you are on fire.</div>

less文件：

.message{.alert;} .danger{.red;}

怎么來區分模塊和通用樣式？很簡單。每個模塊占用同名的class名，首字母大寫。當然你可以用其他的方式。在我的系統中，對通用class（如danger）添加具體樣式是嚴格控制的。這樣就能讓樣式的來源變得單一，當發現問題時，我馬上就能知道到哪里去改。實例：

<div class="User"> <div class="User-name">Jason<div> <div class="User-signature important">Hahaha.</div> </div>