1. 程式人生 > >AngularJS實際專案應用——命名規範概覽

AngularJS實際專案應用——命名規範概覽

有一條好的軟體設計原則叫CoC(Convention over Configuration),即慣例優於配置原則,詳見:wiki

專案需要一個好的命名規範,這樣可以大大降低學習成本以及查詢成本,通過對檔名以適當的形式命名,可以非常快速的知道這個檔案的型別,作用以及用來實現的功能。在本專案開發的過程中,主要參考了兩個命名規範:一個是github上關於angularjs的規範,一個是google自己的angularjs規範,一般他們都叫style guide:

下面具體說一下,對於angularjs專案主要有兩種:1)如何命名檔名,2)如何命名angularjs各種模組,當然了還有許多更詳細的方面,有興趣的請仔細閱讀上面給出的兩個參考。

(一)檔名

總體原則:英文全部小寫,用‘-’進行單詞分割,這樣比較利於人眼閱讀,比如:disk-creation.html,add-disk-dialog.html。其實最好全用名詞性短語起名,但是英語水平有限,用動賓短語形式也可以接受。

還有就是一個檔案代表一個angularjs模組,儘量不要在一個檔案裡寫多個模組,比如在一個檔案裡寫多個controller,這樣非常不好查詢,不利於後來新人快速學習。

  • controller模組以“.controller”結尾,例如server.controller.js,add-disk.controller.js
  • service模組以“.service”結尾,例如:server.service.js
  • module模組以“.module”結尾,例如app.module.js,app-hardware.module.js
  • 路由檔案以“.routes”結尾,例如hardware.routes.js,這裡看專案對路由是如何處理的,根據自己專案需要
  • directive模組以“.directive”結尾,例如menu-list.directive.js,如果一個檔案裡寫了多個小directive,用複數(directives)形式結尾
  • filter模組以“.filter”結尾,同理多個filter寫在一個檔案的用filters結尾
  • 壓縮過的模板檔案用“.templates”結尾,例如app.templates.js
上面應該覆蓋了主要的angularjs各種模組,還有其它的可以根據這個原則處理。這裡說一下為什麼會把多個directive放在一個檔案裡,因為有的directive比較小,可能就5-6行程式碼,如果一個directive寫一個檔案,會造成檔案數的快速增長,雖然釋出的時候可以都壓縮在一起,但維護起來仍然比較繁瑣。所以可以折中一下,根據自己的專案安排即可。 (二)angularjs模組名 總體原則:駝峰方式命名
  • Controller名稱以Ctrl結尾,開頭單詞大寫,因為angularjs中的Controller是個類概念,在使用的時候會被實體化,所以遵循類的命名正規化。例如ServerCtrl,ServerCreationCtrl
  • Service名稱以Srv結尾,開頭單詞小寫,因為angularjs中的Service是個單例概念,不需要被例項化。例如serverSrv
  • Directive沒有做強制要求,能描述功能就可以,但其實開頭應該加上專案名稱簡寫的字首,這樣在使用的時候非常容易區別到底是自己寫的還是匯入第三方庫的directive,例如專案叫console,應該以cs開頭命名,就像angularjs內建的directive都以ng打頭一樣
  • Filter沒有強制要求,可以參考上面的兩個style裡有啥說法
  • Module的名稱,本專案中都以小寫命名了,並且用點分割父子關係,比如hardware子模組叫app.hardware
  • Utils,這裡所謂的Utils還是Service,就是叫習慣了,所以有些通用的功能需要封裝的,就叫Utils了。比如httpUtils,domUtils。當然了檔名還是以“.service.js”結尾,如果覺得會有困擾,根據自己的需求,可以改成Srv結尾
上面大概介紹了一下本人感覺還可以的命名方式,好不好可以根據自己的專案進行調整,只要專案成員覺得易懂,容易查詢就可以。至於具體的js程式碼怎麼寫,上面的兩個參考style中也都有介紹,比如是用:
module.controller('DiskCreationCtrl', ['$scope','$uibModalInstance',function($scope,$uibModalInstance){}])
還是用$inject形式,就仁者見仁智者見智的問題了。