ToB企服应用市场:ToB评测及商务社交产业平台

标题: Angular 开发编码规约 [打印本页]

---

作者: 花瓣小跑    时间: 2024-7-18 00:58
标题: Angular 开发编码规约
以下是一个更加详细的Angular开发编码规约，涵盖了项目布局、命名约定、代码风格、组件与模板、服务与依赖注入、模块、路由、测试、文档与解释、版本控制等方面的详细引导。
Angular 开发编码规约

一、项目布局

• 顶层目次：
  
  
  
  • src/: 源代码目次
    
  • src/app/: 应用主模块和组件
    
  • src/assets/: 静态资源文件
    
  • src/environments/: 环境设置文件
    
  
  
• 功能模块：
  
  
  
  • 每个功能模块放在单独的文件夹中。
    
  • 使用特性模块（feature modules）来分割应用。
    
  2. src/
  4. ├── app/
  6. │   ├── core/           # 核心模块（单例服务，全局组件）
  8. │   ├── shared/         # 共享模块（可复用的组件、指令、管道）
  10. │   ├── feature1/       # 功能模块1
  12. │   ├── feature2/       # 功能模块2
  14. │   └── app.module.ts   # 根模块
  16. ├── assets/
  18. ├── environments/
  20. └── main.ts

  复制代码
  
  
• 每个模块的子布局：
  
  
  
  • 每个模块应包含components、services、models、pipes和directives等子文件夹。
    
  • 示例：
    
  2. feature1/
  4. ├── components/
  6. │   ├── component1/
  8. │   │   ├── component1.component.ts
  10. │   │   ├── component1.component.html
  12. │   │   ├── component1.component.scss
  14. │   │   └── component1.component.spec.ts
  16. │   └── component2/
  18. ├── services/
  20. │   └── service1.service.ts
  22. ├── models/
  24. │   └── model1.model.ts
  26. ├── pipes/
  28. │   └── pipe1.pipe.ts
  30. └── directives/
  32.     └── directive1.directive.ts

  复制代码
  
  

二、命名约定

• 文件命名：
  
  
  
  • 使用短横线（kebab-case）命名。
    
  • 示例：user-profile.component.ts，user.service.ts。
    
  
  
• 类名和接口名：
  
  
  
  • 使用帕斯卡命名法（PascalCase）。
    
  • 示例：UserProfileComponent，UserService。
    
  
  
• 变量和函数：
  
  
  
  • 使用驼峰命名法（camelCase）。
    
  • 示例：userName，getUserProfile()。
    
  
  
• 组件选择器：
  
  
  
  • 使用短横线命名，且包含应用前缀。
    
  • 示例：app-user-profile。
    
  
  
• 摆列命名：
  
  
  
  • 摆列名称使用帕斯卡命名法，摆列值使用全大写下划线命名法。
    
  • 示例：
    
  2. export enum UserRole {
  4.     ADMIN = 'ADMIN',
  6.     USER = 'USER'
  8. }

  复制代码
  
  

三、代码风格

• 使用单引号：
  
  
  
  • 优先使用单引号，只有在包含单引号的字符串中使用双引号。
    
  • 示例：const title = 'Hello World';。
    
  
  
• 缩进与空格：
  
  
  
  • 使用2个空格缩进。
    
  • 制止使用制表符。
    
  
  
• 分号：
  
  
  
  • 在每个语句竣事时使用分号。
    
  
  
• 箭头函数：
  
  
  
  • 只管使用箭头函数来保持上下文中的this。
    
  
  
• 模板字符串：
  
  
  
  • 使用模板字符串（反引号）拼接长字符串。
    
  
  
• 解释：
  
  
  
  • 在复杂的逻辑或关键部分添加解释。
    
  • 制止冗长或不必要的解释。
    
  • 示例：
    
  2. // 检查用户是否已登录
  4. if (this.authService.isLoggedIn()) {
  6.     ...
  8. }

  复制代码
  
  
• 空行：
  
  
  
  • 在代码块之间和逻辑分段之间添加空行，加强可读性。
    
  
  
• 代码长度：
  
  
  
  • 每行代码的长度不应超过120个字符，制止过长的代码行。
    
  
  

四、组件与模板

• 组件类：
  
  
  
  • 每个组件都应包含一个类。
    
  • 遵循单一职责原则，一个组件只做一件事。
    
  • 示例：
    
  2. import { Component, OnInit } from '@angular/core';
  6. @Component({
  8.   selector: 'app-user-profile',
  10.   templateUrl: './user-profile.component.html',
  12.   styleUrls: ['./user-profile.component.scss']
  14. })
  16. export class UserProfileComponent implements OnInit {
  18.   user: User;
  22.   constructor(private userService: UserService) { }
  26.   ngOnInit(): void {
  28.     this.userService.getUser().subscribe(user => this.user = user);
  30.   }
  32. }

  复制代码
  
  
• 模板文件：
  
  
  
  • 使用内联模板（template）或外部模板文件（templateUrl）。
    
  • 制止在模板中使用复杂的表达式。
    
  • 示例：
    
  2. <div *ngIf="user">
  4.   <h1>{{ user.name }}</h1>
  6.   <p>{{ user.email }}</p>
  8. </div>

  复制代码
  
  
• 样式文件：
  
  
  
  • 使用内联样式（styles）或外部样式文件（styleUrls）。
    
  • 保举使用SCSS。
    
  • 示例：
    
  2. .user-profile {
  4.   h1 {
  6.     color: #333;
  8.   }
  12.   p {
  14.     font-size: 14px;
  16.   }
  18. }

  复制代码
  
  
• 数据绑定：
  
  
  
  • 使用单向数据绑定（[property]），制止双向绑定（[(ngModel)]）带来的复杂性。
    
  • 示例：
    
  2. <input [value]="user.name" (input)="user.name = $event.target.value">

  复制代码
  
  
• 事件绑定：
  
  
  
  • 使用事件绑定（(event)）处理用户交互。
    
  • 示例：
    
  2. <button (click)="onClick()">Click me</button>

  复制代码
  
  
• 指令与管道：
  
  
  
  • 自定义指令和管道应在共享模块中定义和导出。
    
  • 使用Angular内置指令和管道（如*ngIf、*ngFor、| date）。
    
  • 示例：
    
  2. @Pipe({ name: 'capitalize' })
  4. export class CapitalizePipe implements PipeTransform {
  6.   transform(value: string): string {
  8.     return value.charAt(0).toUpperCase() + value.slice(1);
  10.   }
  12. }

  复制代码
  
  

五、服务与依赖注入

• 服务类：
  
  
  
  • 所有服务都应注入到根模块或特性模块中。
    
  • 使用@Injectable装饰器。
    
  • 示例：
    
  2. @Injectable({
  4.   providedIn: 'root'
  6. })
  8. export class UserService {
  10.   constructor(private http: HttpClient) { }
  14.   getUser(): Observable<User> {
  16.     return this.http.get<User>('/api/user');
  18.   }
  20. }

  复制代码
  
  
• 依赖注入：
  
  
  
  • 遵循Angular的依赖注入机制，制止直接实例化服务。
    
  • 使用构造函数参数注入服务。
    
  • 示例：
    
  2. export class UserProfileComponent {
  4.   constructor(private userService: UserService) { }
  6. }

  复制代码
  
  
• 提供商模式：
  
  
  
  • 服务应在模块级别或组件级别提供。
    
  • 使用providedIn属性将服务提供给根模块或特定模块。
    
  
  

六、模块

• 模块文件：
  
  
  
  • 每个模块应包含一个NgModule。
    
  • 制止在同一模块中导入和声明太多组件。
    
  • 示例：
    
  2. @NgModule({
  4.   declarations: [UserProfileComponent, UserListComponent],
  6.   imports: [CommonModule, FormsModule],
  8.   providers: [UserService]
  10. })
  12. export class UserModule { }

  复制代码
  
  
• 共享模块：
  
  
  
  • 创建共享模块以声明和导出公共组件、指令和管道。
    
  • 示例：
    
  2. @NgModule({
  4.   declarations: [CommonComponent, CommonDirective, CommonPipe],
  6.   exports: [CommonComponent, CommonDirective, CommonPipe],
  8.   imports: [CommonModule]
  10. })
  12. export class SharedModule { }

  复制代码
  
  
• 焦点模块：
  
  
  
  • 创建焦点模块用于应用级别的单例服务和全局组件。
    
  • 示例：
    
  2. @NgModule({
  4.   providers: [AuthService, ApiService]
  6. })
  8. export class CoreModule { }

  复制代码
  
  

七、路由

• 路由设置：
  
  
  
  • 将路由设置放在一个独立的模块中。
    
  • 使用惰性加载
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4