【Angular架构】成为一名Angular架构师需要掌握的6个概念
每个Angular开发人员都应该深入探索六个概念，以便掌握Angular并设计出架构良好的应用程序。
Angular是最大的框架之一：它提供了很多开箱即用的功能，这意味着从上到下有很多概念可以掌握。
我认为每个Angular开发人员都应该深入探索六个特定的概念，以便掌握Angular并能够熟练地编写架构良好的应用程序。
不，知道它的源代码并不是我所需要的——尽管我个人不得不在少数情况下进行探索。
一种云组件中心架构
像Bit.dev这样的云组件中心通常用于发布、记录和组织Angular组件。我们使用它们来最大限度地重用代码，并构建可扩展的应用程序。
正如您在这篇文章中所看到的，一个好的Angular体系结构可以确保我们的代码库以一种能够在存储库中和跨存储库轻松共享和重用组件的方式构建。
Exploring components published on Bit.dev
1） 模块/库体系结构
Angular的模块体系结构有点独特，可能是初学者最难完全掌握的部分之一。
最令人困惑的概念是，我们已经在它上面使用了一个模块架构：当然，我说的是ES导入。
因为Angular Modules添加了一个额外的逻辑分组层，所以保持它们尽可能多的相关性很重要。
但是，知道如何在定义良好的模块中分离和拆分应用程序的功能是构建Angular应用程序的基本部分。
不同类型的Angular模块
您应该注意不同类型的角度模块：
- 声明/Widget模块（例如：UI组件、指令和管道的集合模块）
- 服务模块（示例：HttpClientModule）
- 路由模块
- 域/功能模块
- 核心/共享模块
我在下面的文章中详细介绍了每种类型：
- Understanding Angular Modules
- A quick but comprehensive guide for understanding the different types of Angular Modules
库还是模块？
我认为，我们可以在图书馆层面上进行这种区分：一个只有服务的图书馆，一个代表一条路线的图书馆，等等。
但是，编写模块还是库在很大程度上取决于您的项目类型，以及您使用的是单回购项目还是多回购项目
编写模块前要问自己的问题
在编写模块之前，有几个问题需要问自己：
- 我在写什么样的模块？如果你不能回答这个问题，你应该熟悉我上面列出的不同类型的模块。
- 你很可能需要一到两种类型的模块，所以答案很可能是两个模块：路由和服务
- 这个模块应该是它自己的库，还是应该只是一个模块？这有点难回答：如果你使用的是monoreo，我的观点是，从长远来看，构建图书馆将是一个更好的选择
2） 组件、服务和指令之间的关注点分离
分离关注点在理论上很简单，但比看起来更难。从Angular.js时代起，我们就被教导要保持组件“精简”和服务“胖”，从根本上讲，最新版本没有什么实质性的差异。
理解什么属于组件，什么属于服务，以及为什么指令可能只是一个被低估的功能，仍然很重要。
状态
放置状态是理解数据是在组件外部访问和共享，还是本地和封装的问题。
- 如果状态在组件之间共享，或者需要从服务访问，则将您的状态放在服务中。在这种情况下使用什么状态管理工具并不重要，只要它在服务中即可
- 如果状态是本地的（例如表单）并且只在组件中使用，那么只需将其存储在组件中即可
DOM操作
大多数DOM操作可能发生在指令中。假设您正在向某个组件添加拖放功能。
当然，您可以创建一个组件并从中绑定事件，但此时，您需要混合两件事：
- 组件的外观
- 某个零部件的特征的行为方式
指令是Angular的终极可重用特性，我发现它们在我参与的几乎每个项目中都没有得到充分利用。指令可以用来减轻组件的很多责任。
练习：在LOC方面找到当前项目中最大的组成部分。它使用Renderer还是ElementRef？这种逻辑可能会被卸载到指令中。
3） 更改检测和渲染
Angular在重新渲染UI方面是一个相当神奇的框架。
不过，这是另一回事，优化它只在应该的时候重新渲染：这需要一些深入的知识和直觉。
作为一名Angular架构师，您可能应该知道：OnPush更改检测是优化性能的方法。但是事情不会总是如您所期望的那样工作，尤其是当您没有在模板中使用Observables和异步管道时。
掌握变化检测
为了掌握更改检测，重要的是从以下几点开始：
- 将所有数据视为不可变的；使用Rx供电的状态管理库对此有很大帮助
- 仅（或大部分）使用Observables来显示模板中的数据。如果您使用的是本地州，请使用BehaviorSubject
掌握更改检测是构建高性能应用程序的强制性步骤：
您不仅需要确保在需要时进行更新，而且还需要确保仅在需要时才进行更新
突破Angular的速度限制
减少重新渲染是保持应用程序快速高效的秘诀之一。不过，有时你可能想超越性能关键应用程序的限制：游戏、高频更新、大型复杂列表等。
你需要突破Angular的速度限制吗？好吧，你也可以这样做：由于Ivy的最新功能，删除Zone并通过手术更新你的UI。
我在下面的文章中描述了如何：
- Quantum Angular: Maximizing Performance by Removing Zone
- Experiment: removing Zone from Angular with minimal effort, to boost runtime performance.
4） 路由
路由不仅允许我们将SPA组织成多个虚拟页面，而且由于Angular的路由延迟加载功能，我们还可以按需加载应用程序的捆绑包。
如果您正在处理一个大型应用程序，并且捆绑包超过1MB，您可能知道为什么这一点如此重要。说真的，没有人想下载这么多数据来与你的应用程序交互。
路由不仅应该用于拆分顶级路由，还应该用于驱动UI的更小和更深的部分。
这允许您将捆绑包的内容拆分为主要路由，但也可以将应用程序的较小部分拆分为不需要在用户设备上下载的部分，直到用户提出请求为止。
示例：选项卡式组件
例如，假设您正在构建一个选项卡式用户界面，并且每个选项卡彼此独立：这是一种理想的情况，可以将每个选项卡拆分为自己的路由，并使用惰性加载只加载选定选项卡的内容。
再举一个例子？弹出菜单和模式！绝对没有必要将它们与初始捆绑包一起加载。如果用户没有请求它们，那么只在需要时加载它们。
如果您需要灵感，Angular Material的选项卡组件支持这种模式。
5） 表格
大多数CRUD应用程序基本上由许多表单组成。你很可能会花很多时间写表单，这就是为什么学好角度表单如此重要的原因。
您的大多数表单可能都应该使用ReactiveFormsModule模块，除非您有一个简单的控件，否则请放弃与ngModel的双向数据绑定。
Angular Forms API相当容易理解，掌握它主要是一个真正研究文档并了解其缺陷的问题。
使用Forms时需要注意的主要缺陷是它基本上是非类型化的。这可能是一个非常棒的功能中最令人讨厌的部分——所以你必须非常努力地确保你的表单符合你的数据结构类型。
6） RxJS
最后但同样重要的是，臭名昭著的RxJS。
我相信Angular最强大的功能之一是它与Rx和Functional Reactive Programming的深度集成。
要真正掌握Angular并解锁一个伟大的架构，您需要首先学习Rx，至少学习它最重要的运算符。如果不花几个小时了解Rx，很难成为一名完全熟练的Angular开发人员。
在编写Angular应用程序时，学习Rx将受益的主要原因有两个：性能和异步处理。
异步处理在现代高度交互式的应用程序中尤其困难：忘记Promise、setTimeout和setInterval，开始用Rx的方式做事。
掌握Rx的另一个重要原因是优化性能：当然，使用Async管道是一个开始，但有时这还不够。您可以通过仅允许通过管道重新渲染需要的事件来控制重新渲染。
Rx提供了多种运算符，有助于缓存和批处理，从而优化应用程序的性能：
- 阅读我下面的文章，了解使用Rx的操作员和技术列表：
- https://blog.bitsrc.io/rxjs-patterns-efficiency-and-performance-10bbf272c3fc
总结
这是一个简短的列表，列出了你需要深入研究的所有主题，以便成为一名精通Angular的开发人员，或者毕业成为一名架构师。
这还有很多，但归根结底，我们不要忘记，要真正掌握任何与网络相关的东西，你需要首先掌握基本知识：Javascript、CSS、设计模式、干净代码、web工具等。
如果你需要任何澄清，或者如果你认为有什么不清楚或错误，请留下评论！
文章链接：【Angular架构】成为一名Angular架构师需要掌握的6个概念 | 程序员云开发,云时代的程序员.
欢迎收藏【架构师酒馆】和【开发者开聊】