Angularjs书写规范

Posted 2020-09-16 黎明之光123

文件命名原则:

1. 遵循以描述组件功能，然后是类型（可选）的方式来给所有的组件提供统一的命名
   • 命名：feature.type.js。
   • 测试文件名（feature.type.spec.js）
2. 大多数文件都有2个名字：
   • 文件名 (avengers.controller.js)
   • 带有Angular的注册组件名 (AvengersController)
   • 测试文件名（avengers.controller.spec.js）

规则

1. 一个文件只定义一个组件
2. 每一个文件都需要使用javascript闭包
3. 使用module的时候，避免直接用一个变量，而是使用getter的链式语法。
   • 设置module，angular.module(‘app‘, []);。
   • 获取module，angular.module(‘app‘);。

4. 回调函数使用命名函数，不要用匿名函数

   // logger.js
   angular
       .module(‘app‘)
       .factory(‘logger‘, logger);
   
   function logger () { }

5. 在controller中需要先把$scope复制给可捕获的变量，选择一个有代表性的名称，例如vm代表ViewModel（方便controller as 语法糖之间的切换）

   function Customer ($scope) {
       var vm = $scope;
       vm.name = {};
       vm.sendMessage = function() { };
   }

6. 可绑定成员放到顶部（注：如果一个函数就是一行，那么只要不影响可读性就把它放到顶部。）

   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() {
         /* */
       }
   }

7. 保持Controller的专一性，一个view定义一个controller，尽量不要在其它view中使用这个controller。把可重用的逻辑放到factory中，保证controller只服务于当前视图
8. 独立的数据调用（Data Services）：
   • 把进行数据操作和数据交互的逻辑放到factory中，数据服务负责XHR请求、本地存储、内存存储和其它任何数据操作
   • 数据服务被调用时（例如controller），隐藏调用的直接行为
   • 数据调用返回一个Promise
9. Directives
   • 一个dirctive一个文件
   • 提供一个唯一的Directive前缀，格式：{namespace}-指令名称
10. 压缩处理（防止压缩导致出错）：

    • 手动添加依赖

      angular
          .module(‘app‘)
          .controller(‘Dashboard‘, Dashboard);
      
      Dashboard.$inject = [‘$location‘, ‘$routeParams‘, ‘common‘, ‘dataservice‘];
      
      function Dashboard($location, $routeParams, common, dataservice) {
      }

11. Controller命名: 使用UpperCamelCase（每个单词首字母大写）的方式；后缀使用Controller；例如：AvengersController
12. Service命名： 对service和factory使用camel-casing（驼峰式，第一个单词首字母小写，后面单词首字母大写）方式。避免使用$前缀。

13. Directive组件命名： 使用camel-case方式，用一个短的前缀来描述directive在哪个区域使用（一些例子中是使用公司前缀或是项目前缀）