Angular 笔记系列(一)项目集体同命名规范

实在以 Angular.js
做项目既颇长远了,也撞了众多问题。其中多问题之起还是盖从没循标准或最佳实践来开,大部分因是模拟的匪足够细致,很多
tips 没 get 到,用到品种被就是会见现出各种题材,我赶上的问题最为多之饶是
directive 这块。很多之 bug都是命令的嵌套引发的。当时友好学的下多小
tip 也未尝在意过,打算再撸一全副文档,夯实一下基础。


Angular 的项目结构,常见的起半点种艺术:

无异于丶 类型优先,业务功能下,当前我们项目即使应用的是这种方法:

├── app
│   ├── app.js
│   ├── controllers
│   │   ├── home
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   └── about
│   │       └── ThirdCtrl.js
│   ├── directives
│   │   ├── home
│   │   │   └── directive1.js
│   │   └── about
│   │       ├── directive2.js
│   │       └── directive3.js
│   ├── filters
│   │   ├── home
│   │   └── about
│   └── services
│       ├── CommonService.js
│       ├── cache
│       │   ├── Cache1.js
│       │   └── Cache2.js
│       └── models
│           ├── Model1.js
│           └── Model2.js
├── partials
├── lib
└── test

 

仲丶业务职能优先,类型从:

.
├── app
│   ├── app.js
│   ├── common
│   │   ├── controllers
│   │   ├── directives
│   │   ├── filters
│   │   └── services
│   ├── home
│   │   ├── controllers
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   ├── directives
│   │   │   └── directive1.js
│   │   ├── filters
│   │   │   ├── filter1.js
│   │   │   └── filter2.js
│   │   └── services
│   │       ├── service1.js
│   │       └── service2.js
│   └── about
│       ├── controllers
│       │   └── ThirdCtrl.js
│       ├── directives
│       │   ├── directive2.js
│       │   └── directive3.js
│       ├── filters
│       │   └── filter3.js
│       └── services
│           └── service3.js
├── partials
├── lib
└── test

命名规范:
  • 当目录里发出多独单词时, 使用 lisp-case
    语法,项目中的变量一般会动用驼峰命名法:

app
 ├── app.js
 └── my-complex-module
     ├── controllers
     ├── directives
     ├── filters
     └── services
  • 在创立指令时,合适的做法是以相关的文书放到同一目录下 (如:模板文件,
    CSS/SASS 文件,
    JavaScript文件)。如果您以任何项目周期且挑这种组织办法,

app
└── directives
    ├── directive1
    │   ├── directive1.html
    │   ├── directive1.js
    │   └── directive1.sass
    └── directive2
        ├── directive2.html
        ├── directive2.js
        └── directive2.sass
标记:

保标签的简单并将AngularJS的竹签放在规范HTML属性后面。这样提高了代码可读性。标准HTML属性和AngularJS的属性没有混到一起,提高了代码的可维护性。

<form class="frm" ng-submit="login.authenticate()">
  <div>
    <input class="ipt" type="text" placeholder="name" require ng-model="user.name">
  </div>
</form>

命名约定:
元素 命名风格 实例 用途
Modules lowerCamelCase angularApp  
Controllers Functionality + ‘Ctrl’ AdminCtrl  
Directives lowerCamelCase userInfo  
Filters lowerCamelCase userFilter  
Services UpperCamelCase User constructor
Services lowerCamelCase dataFactory others

tips:

  • 使用:
    • $timeout 替代 setTimeout
    • $interval instead of setInterval
    • $window 替代 window
    • $document 替代 document
    • $http 替代 $.ajax

      

相关文章