Angularjs書寫規範
阿新 • • 發佈:2017-05-06
rip rom arc 可讀性 ring {} 依賴 公司 model
文件命名原則:
- 遵循以描述組件功能,然後是類型(可選)的方式來給所有的組件提供統一的命名
- 命名:feature.type.js。
- 測試文件名(feature.type.spec.js)
- 大多數文件都有2個名字:
- 文件名 (avengers.controller.js)
- 帶有Angular的註冊組件名 (AvengersController)
- 測試文件名(avengers.controller.spec.js)
規則
- 一個文件只定義一個組件
- 每一個文件都需要使用JavaScript閉包
- 使用module的時候,避免直接用一個變量,而是使用getter的鏈式語法。
- 設置module,
angular.module(‘app‘, []);
- 獲取module,
angular.module(‘app‘);
。
- 設置module,
-
回調函數使用命名函數,不要用匿名函數
// logger.js angular .module(‘app‘) .factory(‘logger‘, logger); function logger () { }
-
在controller中需要先把$scope復制給可捕獲的變量,選擇一個有代表性的名稱,例如vm代表ViewModel(方便controller as 語法糖之間的切換)
function Customer ($scope) { var vm = $scope; vm.name = {}; vm.sendMessage = function() { }; }
-
可綁定成員放到頂部(註:如果一個函數就是一行,那麽只要不影響可讀性就把它放到頂部。)
function Sessions() { var vm = this; vm.gotoSession = gotoSession; vm.refresh = refresh; vm.search = search; vm.sessions = []; vm.title = ‘Sessions‘; //////////// function gotoSession() { /* */ } function refresh() { /* */ } function search() { /* */ } }
- 保持Controller的專一性,一個view定義一個controller,盡量不要在其它view中使用這個controller。把可重用的邏輯放到factory中,保證controller只服務於當前視圖
- 獨立的數據調用(Data Services):
- 把進行數據操作和數據交互的邏輯放到factory中,數據服務負責XHR請求、本地存儲、內存存儲和其它任何數據操作
- 數據服務被調用時(例如controller),隱藏調用的直接行為
- 數據調用返回一個Promise
- Directives
- 一個dirctive一個文件
- 提供一個唯一的Directive前綴,格式:{namespace}-指令名稱
- 壓縮處理(防止壓縮導致出錯):
-
手動添加依賴
angular .module(‘app‘) .controller(‘Dashboard‘, Dashboard); Dashboard.$inject = [‘$location‘, ‘$routeParams‘, ‘common‘, ‘dataservice‘]; function Dashboard($location, $routeParams, common, dataservice) { }
-
- Controller命名: 使用UpperCamelCase(每個單詞首字母大寫)的方式;後綴使用Controller;例如:AvengersController
- Service命名: 對service和factory使用camel-casing(駝峰式,第一個單詞首字母小寫,後面單詞首字母大寫)方式。避免使用$前綴。
-
Directive組件命名: 使用camel-case方式,用一個短的前綴來描述directive在哪個區域使用(一些例子中是使用公司前綴或是項目前綴)
Angularjs書寫規範