x

【Angular】Angular：2023年最佳实践

pgmr.cloud
14 May 2023
SEO Title
Angular: Best Practices for 2023

Angular开发以其健壮性、可扩展性和性能而闻名，因此在web开发公司和开发人员中很受欢迎。因此，在Angular开发中采用最佳实践可以带来一致性、代码可读性、性能、可维护性和可扩展性。

它可以帮助团队成员更有效地合作，减少出现错误的机会，并确保代码库能够支持不断发展的需求。本文的目标是列出Angular开发人员应该遵循的最佳实践，以确保他们的应用程序获得高水平的接受和成功。

Angular CLI的定期使用

Angular CLI是一个非常强大的工具。强烈建议您安装并尽可能多地使用它。使用预定义的命令，而不是手工完成所有操作，非常节省时间。列出一些常用的命令

  • ng new-要创建一个已经工作的应用程序，请开箱即用。
  • ng generate-使用带有测试shell的简单命令生成组件、路由、服务和管道。
  • ng serve-在开发时在本地测试您的应用程序。
  • ng test-运行单元测试或端到端测试
  • ng lint-通过代码运行lint规则集

由trackBy函数与ngFor一起使用

ngFor是一个Angular内置的模板指令。您可以使用“trackBy”而不是“ngFor”来代替显示整个DOM树，后者通过为每个项提供唯一且个性化的标识符来帮助您。

使用“ngFor”时，必须在数组中的每次更改后重新渲染整个DOM树，而使用“trackBy”时，可以指定单独的修改，Angular将帮助您对指定的数组进行DOM更改。

使用异步管道保存内存字节

异步管道是内置属性。当你构建一个成千上万用户经常使用的大型应用程序时，它们会为你节省大量的内存字节。它们订阅可观察性，并返回它忽略的值。

因此，它们在标记组件的发射值并自动取消对可观测值的订阅以限制不必要的内存泄漏时派上了用场。

@Component({
selector: 'async-observable-pipe',
template: '
observable|async: Time: {{ time | async }}
' }) 
export class AsyncObservablePipeComponent 
{   
  time = new Observable((observer: Observer) => {     
    setInterval(() => observer.next(new Date().toString()), 1000); 
}); 
})

这让我进入下一点

防止Angular Observable中的内存泄漏

可观察到的内存泄漏非常常见，在每种编程语言、库或框架中都可以找到。Angular也不例外。Angular中的Observable非常有用，因为它可以优化数据，但如果您不集中注意力，内存泄漏是可能发生的非常严重的问题之一。它可能会在发展过程中造成最糟糕的情况。以下是一些避免泄漏的提示。

  1. Using async pipe
  2. Using take(1)
  3. Using takeUntil()

 

懒惰加载你的模块

延迟加载具有角度特性，允许在调用该路由时加载模块。默认情况下，angular加载所有模块，这会降低初始页面加载时间。要延迟加载Angular模块，请在AppRoutingModule路由配置中使用loadChildren（而不是组件），如下所示。请注意，延迟加载组件的所有组件、服务和资产都应该放在单独的文件夹中。

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./users/users.mdule')
      .then(m => m.UsersModule)
  }
];

遵循单一责任原则

组件是组成应用程序的构建块。根据Angular上下文中的SRP，每个文件应该只有一个组件。从技术上讲，您可以在文件中创建多个类和一个组件，但这应该避免。这使得它更容易阅读、维护和避免隐藏的错误。旨在创建小型且可重复使用的组件。这也避免了代码重复，并符合DRY（不要重复自己）原则。

不在管道中对数据进行排序或筛选（面向性能）

排序和筛选是昂贵的操作。Angular可以多次调用Pipe，因此它可能会大幅降低性能。在将组件/服务中的数据模型绑定到模板之前，我们应该对其进行筛选或排序。

创建可重复使用的组件和指令

从长远来看，在Angular中创建可重用的组件和指令可以节省时间、精力和金钱。它有助于更好地组织代码，促进一致性，促进代码共享，并简化维护。其结果是提高了开发效率、整体组织、设计和功能的标准化以及应用程序的可扩展性。

变化检测优化

  1. 使用NgIf而不是CSS-如果DOM元素不可见，那么最好使用*NgIf将它们从DOM中删除，而不是用CSS隐藏它们。
  2. 将复杂的计算移动到ngDoCheck生命周期挂钩中，使表达式更快。
  3. 尽可能长时间地缓存复杂的计算
  4. 使用OnPush更改检测策略来告诉Angular没有任何更改。这样可以跳过整个更改检测步骤。

然而，这些机制将被称为V16的Angular 信号的更强大的方法改变或搁置。如果你想了解更多关于如何解决更改检测的信息，请查看这篇文章。

How Angular Signals solves an age old problem.

This is a solution discussion on the challenges w.r.t. change detection Angular developers have been facing currently…

priyank-bhardwaj.medium.com

使用Smart-Dumb组件

这种模式有助于使用OnPush更改检测策略来告诉Angular在哑组件中没有任何更改。

智能组件用于操作数据、调用API、更多地关注功能和管理状态。虽然愚蠢的成分都是关于化妆品的，但它们更关注的是它们的外观。

使用索引index.ts

index.ts帮助我们将所有相关的东西放在一起，这样我们就不必为源文件名而烦恼。这有助于减小导入语句的大小。

例如，我们将user/index.ts作为

export * from './user-auth';
export * from './user-config';
export { PaymentComponent }from './user-payment.component';

我们可以使用源文件夹名称导入所有内容。

import {User, UserConfig } from '..user';

结论

这些只是我可以强调的一些做法。坦率地说，这个列表很长，并且根据项目的版本和要求而有所不同。

如果你喜欢这些内容并觉得有用，请鼓掌、分享并关注我，了解更多此类文章。如果你觉得以上任何一个主题都需要一篇详细的文章，请发表评论。我很乐意收到反馈。

标签

↑