• Angularjs书写规范


    文件命名原则:

    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在哪个区域使用(一些例子中是使用公司前缀或是项目前缀)

  • 相关阅读:
    网络摄像头Androi端显示(mjpeg)源码分析
    STM32F103 MQTT智能配网ESP07S WIFI 手机app控制继电器EMQ温湿度
    安装云服务器 ECS CentOS 7 图形化桌面
    PT100多路分布式LORA无线测温传感器工业设备老化温度监控记录仪
    把qt 程序打包成一个exe可以执行的文件
    STM32L051C8T6 HAL DMA IDLE串口不定长接收遇到的问题
    Project ERROR: Cannot run target compiler '/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang++'. Output:
    更换下平台
    H5单页面应用(SPA)架构总结
    财务系统功能开发要点概述
  • 原文地址:https://www.cnblogs.com/holy-amy/p/6815922.html
Copyright © 2020-2023  润新知