基于angularjs項目的編碼風格約定總結
目錄[-]
編碼風格約定
寫在最前面
-
一個統一的好的編碼風格好過一打大牛
-
你怎么看別人的代碼呢？
每個人都有自己的編碼風格，這個受到個人的學習以及工作歷程影響。 多人協同開發，不可避免的會遇到一個功能幾個人一起開發，或者同一個功能，前后由不同的人開發。這個時候問題來了，如果是你，你會怎么看待別人的代碼呢？呵呵，這其實已經不言而喻了。
-
那又怎么樣？
說實話對于個人來說，真不能怎么樣，誰沒有一兩個滿是坑的項目呢，又有誰不是從最開始的垃圾代碼中慢慢提煉出自己的編碼風格呢。 但是對于一個項目，那太可怕的，不會有人會想要遇到這樣的項目，很多人會在項目風險爆發之前溜之大吉，留下滿地狼藉，等待重建。 但是你真的希望你自己的項目，親手寫的代碼，最后會是這樣的結果？或者當你進入一家新公司的時候，竟然拿不出一點可以用來的炫耀的東西。
-
我們要怎么做？
如果每一回看到別人的代碼都痛不欲生，那么我們的人生還有什么快樂。你要相信你不會永遠只關注于你自己的一個小角落。 那么我們要怎么做呢？如果你能看別人的代碼如同你自己的寫的，你寫的代碼每一行都是猶如ISO般的標準，那么是不是會有這樣的感覺：“我靠，我當初怎么這么傻”。 這就是我們現在要做的， ：不同的人寫一樣風格的代碼，對應業務處理有著相同的代碼邏輯。
-
約定大于規范
講了這么多，只是為了闡述 的重要。在這里我需要提出這樣一個概念： 約定大于規范，及凡是在約定范圍里的內容，必須被不折不扣的實行 ，否則我們的這些約定又有什么意義呢。
-
期待以后更多的約定
現在定義的這些肯定不會是全部，在以后的開發中必然會遇到更多的問題，從而提煉出更多的約定，這是好事情，也是正確的方向。讓我們滿懷期待這樣盼望。
編碼風格約定
BB了半天，讓我們進入正題，這篇文檔既是這次代碼重構的指導文檔，也會是前端小組的內部代碼規范定義文檔，用來給每一個新加入的兄弟姐妹們套上一個足夠結實的轡頭，以約束你們過于奔放的想法， 編程畢竟是一個嚴謹的工作。
命名規范及約定
這項本來是不想說的，但是作為未來前端代碼規范文檔，這里還是需要提一下。 rootScope中的變量需要統一在app.js中定義。
- 變量命名
變量的命名，首先是這肯定是一個 名詞 ， 。遵循小駝峰命名，首字符小寫。
``` var isBoolean = true; //布爾值以is開頭 var arrayList = []; //數組以List結尾
$scope.type = 1; / 這種寫法是禁止使用的 / ```
- 函數命名
函數一般是執行一組操作的代碼塊，所以用動名詞結合的方式命名，使用var name = function(agrs)。 函數內部需要用到一些關鍵參數，作為入參傳入，即使在scope中存在，也需要作為入參傳入（好處是提高函數復用的可能）。
``` var getSomting = function(id){} //獲取某個值 var loadSomting = function(agrs[]){} //從后臺加載數據，涉及到restService var postSomting = function(obj{}){} //提交表單操作，新建 var deleteSomting = function(id){} //刪除操作 var putSomting = function(id,obj{}){} //提交表單操作，修改 var initSomting = function(){} //初始化函數，一般是用來獲取某個獲取后臺的某個資源
$scope.views = { showSomting : function(){} chooseSomting : function(){} }
```
全局靜態常量定義約定
這里的全局常量需要定義在單獨的app static.js文件下，方便統一管理以及協同開發。定義一個全局的常量約定如下： 命名：全大寫英文，用下劃線" "分割單詞 定義方法： constant() 或者 value()
```
angular.module('myApp.static', []) .constant("USER_TYPE",{1:"個人",2:"企業"})
```
全局動態變量定義約定
全局的動態變量來自后臺提供的一些業務數據，大部分來自數據庫字典表，這里使用factory的定義service的方式來實現全局動態變量的定義，約定如下： 命名：全大寫英文，用下劃線"_"分割單詞 定義方法： factory
``` angular.module('myApp.somting',[]) .factory("SOME TYPES", function ($resource) { var SOME TYPES= {};
}) ```
注釋約定
注釋是用來解釋當前代碼的功能，一個好的注釋就是能讓人一眼看懂復雜的內部實現邏輯，而一個規范的注釋能夠形成最后的api文檔。當然最重要的是注釋可以你知道究竟該找誰痛扁一頓， 所以凡寫過必留下痕跡。
- 文件注釋
寫在文件的最開頭
`
- controller注釋
寫在controller內部第一行
`
- 函數注釋
寫在函數外面，入參和出參如果沒有就不要寫
`
- 行注釋
單行注釋
``` var obj = "" ; //參數定義注釋
function(){ ... // 對函數內部代碼或者邏輯的特殊說明 ... }
```
代碼順序的約定
代碼順序既是對于controller中的N多行代碼究竟誰先誰后的約定。順序依次是： 1.scope變量定義在最前；2.controller中的局部變量其次（即使實際使用的函數在其他位置）；3.scope底下的function；4.controller內部函數；5.初始化函數定義及調用 注：
``` .controller(function(){ / scope底下的對象最先聲明 / $scope.somting = {}; / controller局部變量 / var somting; / scope底下的function / $scope.doSomting = function(){} / controller局部函數 / var doSomting = function(){}
})
```
基礎數據模型定義的約定
基礎數據模型依賴于后臺接口提供的數據，同時根據前臺具體的業務場景或不變或轉換格式保存在前臺緩存對象下，同時也可以將變化過的數據更新到當前數據模型中。
```
app.factory("userService",function($resource){ var userList = []; //將userList數據本地化 var getList = function(){//來自后臺數據} var get = function(id,callback){//來自后臺數據} var update = function(id,user,callback){//來自后臺數據} var delete= function(id,callback){//來自后臺數據}
})
```
試圖模型定義的約定
controller中的離散變量將通過scope.views（作為試圖模型對象）統一控制，甚至某些復雜頁面視圖模型，可以在views中用單獨的對象處理。
``` //頁面視圖控制數據模型 $scope.views = { somting : "", isSomting : true, chooseSomting : function(){ this.sonting = ""; }, oneObj:{ oneType : "", showOne : fucntion(){ this.one = ""; } } }
//后臺返回數據模型 $scope.somting = somtingService.get();
```
業務數據模型定義的約定
業務數據模型一般是有別于基礎數據模型和視圖數據模型，一般是包含視圖內容的數據對象，例如表單數據對象，或者被選中的某些數據，這些數據一般用于界面控制也會提取出接口參數用于交互。
```
$scope.somtingSelectedList = [{ id : 1, ... selected : true },{ id : 2, ... selected : true },{ id : 3, ... selected : false }...]
```
form表單驗證
```
//TODO
```
來自： http://my.oschina.net/u/924762/blog/602270?fromerr=n9vfH2xH