今天，我们发布本文翻译的第二部分，其中包含针对Angular开发人员的一系列建议。 在
上一部分中介绍了11个技巧，在此技巧中，我们将考虑相同的数额。
1.适于重复使用的小部件
在可以重用的组件中查找片段，并基于它们创建新的组件。 尽可能使组件无声，因为这将使它们可以在更多情况下使用。 “愚蠢”的组件是不包含任何特定逻辑的组件，其操作仅取决于提供给它的输入数据。
使用组件时，应遵循以下一般规则：组件树中嵌套最深的组件应该是最“愚蠢”的组件。
▍说明
重用组件可以减少代码重复，从而简化项目支持和更改。
愚蠢的组件比其他组件简单，因此不太可能出现错误。 使用此类组件可使开发人员更好地考虑组件的开放API并帮助解决问题。
2.关于组件解决的任务
只要有可能，请避免在逻辑组件中不使用用于可视化数据的逻辑组件。
▍说明
组件被设计为用于显示信息和控制接口应如何工作的工具。 任何业务逻辑都应从组件中删除，并在可能的情况下放在单独的方法或服务中，从而将业务逻辑与信息表示的逻辑分开。
当业务逻辑作为单独的服务提供时，通常更易于进行单元测试。 使用这种方法，可以由需要相同功能的不同组件重用它。
3.关于好方法
如果方法代码很长，则通常表明这种模块解决了太多问题。 这种作为独立实体的方法也许只能解决一个问题，但其中可能存在执行几种不同操作的代码。 可以以单独的方法的形式发出这样的代码，每个方法又必须解决一个问题，此后，您应该使用这些方法，而不是原始方法中的相应代码片段。
▍说明
长代码方法难以阅读，理解和维护。 此外，此类方法容易出错，因为更改其中一种方法可能会影响该方法的许多其他机制。 长代码意味着更复杂的重构，并且此操作在任何应用程序中都非常重要。
在这方面，我们可以提到一个指标，例如
程序的
循环复杂性 。 TSLint
规则用于标识圈复杂度，可在项目中使用这些
规则 ，以避免太复杂的代码中可能出现的错误。 在他们的帮助下，您可以评估代码的质量并防止其支持引起问题。
4.干法原理
DRY（请勿重复自己，请勿重复）是应遵循的原则，以确保在项目的不同位置没有相同代码片段的副本。 例如，此类代码片段应以独立实体，方法的形式制成，并在以前使用重复代码的地方使用它们的调用。
▍说明
如果在应用程序的不同位置使用相同的代码，则会导致以下事实：如果您需要对此代码进行更改，则必须在许多地方执行此操作。 结果，该程序将更加难以维护，并且容易出现与以下错误有关的错误：例如，并非同一代码的所有片段都被正确编辑的事实。 另外，这增加了更改代码和测试代码所需的时间。
如果遇到类似的情况-将重复代码格式化为一个独立的实体，并使用它代替重复的片段。 这将导致以下事实：要进行更改，您只需要在一个位置进行编辑，而在测试过程中，您只需要测试一段代码，而不是几段代码。 此外，应用程序中重复的代码越少，用户将下载得越快。
5.缓存机制
调用各种API时，您会注意到其中一些答案几乎永远不会改变。 在这种情况下，您可以将数据缓存工具添加到程序中，并将类似的API返回的内容存储在缓存中。 执行下一个请求时，您可以转到缓存，如果该缓存已具有所需的数据，则可以使用该数据，如果不需要，则执行实际请求并将响应添加到缓存中。
如果从某些API接收到的数据每隔一段时间更改一次，则可以将其缓存一定时间。 结果，向此类API发出请求，就可以决定从何处获取必要的数据。
▍说明
拥有缓存机制可以避免发出不必要的API请求。 如果仅在绝对必要时才执行应用程序对API的调用，并且不再再次请求应用程序已接收的数据，则解决方案的性能会提高，特别是因为它不必始终等待某些网络服务的答复。 此外，此方法还可以节省流量，因为不会一次又一次下载相同的数据。
6.模式逻辑
如果您的模板至少具有某些逻辑，甚至是简单的
&&表达式，则应提取此逻辑并将其放入适当的组件中。
▍说明
如果模板具有逻辑，则意味着无法对此类模板进行单元测试，因此，更改模板代码时出错的可能性增加。
▍到
// <p *ngIf="role==='developer'"> Status: Developer </p> // public ngOnInit (): void { this.role = 'developer'; }
▍之后
//模板
<p * ngIf =“ showDeveloperStatus”>状态：开发人员
// public ngOnInit (): void { this.role = 'developer'; this.showDeveloperStatus = true; }
7.处理线条
如果您有一个字符串类型的变量，它可以具有有限集合中的值，那么在声明它时，请不要将其声明为常规字符串，而应指定可能值的列表。
▍说明
经过深思熟虑的变量类型描述可以简化错误的检测和消除，因为使用这种方法，它们是在程序编译阶段而不是在运行时进行检测的。
▍到
private myStringValue: string; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Second' }
▍之后
private myStringValue: 'First' | 'Second'; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Other' } // Type '"Other"' is not assignable to type '"First" | "Second"' (property) AppComponent.myValue: "First" | "Second"
8.关于应用程序状态管理
考虑使用
@ ngrx / store控制应用程序的状态，并使用
@ ngrx / effects实现副作用。 状态更改通过动作来描述，并通过称为缩减器的纯函数执行。
▍说明
@ ngrx / store将与应用程序状态相关的逻辑隔离在一个地方，并使其在整个项目中统一。 另外，这里有一种记忆存储机制，可在处理存储时使用，可提高应用程序性能。 @ ngrx / store机制与Angular的变更检测策略相结合，可以加快应用程序的速度。
9.关于申请状态的不变性
使用@ ngrx / store时，请考虑使用
ngrx-store-freeze库使应用程序状态不可变。 该库通过引发异常来防止状态突变。 这样可以避免应用程序状态的意外更改而导致不可预测的后果。
▍说明
更改组件中应用程序的状态会导致以下事实：应用程序的行为会根据组件的加载顺序而改变。 这违反了redux模板的思维模型。 因此，如果存储库的状态发生了更改，并且后续使用该存储库的工作已经在使用新状态，则可以重新定义更改。 在这里，我们采用职责分离的原则，根据该原则，组件处于表示级别，它们不应该知道如何更改应用程序的状态。
10.应用测试工具
使用专用工具测试应用程序。 其中包括
Jest和
Karma 。
▍说明
Jest是Facebook开发的单元测试应用程序框架。 它支持并行测试执行机制，从而加快了工作速度。 由于他能够考虑代码库中的更改，因此在下一个测试会话中，仅执行与更改后的代码相关的测试。 这提高了分析测试结果的能力。 另外，Jest提供了测试覆盖率指标，并由VS Code编辑器和WebStorm IDE支持。
Karma的测试运行程序由AngularJS团队开发。 要运行测试，他需要一个真实的浏览器和DOM。 业力允许您在各种浏览器中运行测试。 相应地，Jest不需要使用没有用户界面或phantom.js的Chrome浏览器，因为仅需使用Node.js平台即可运行此框架。
11.服务器渲染
如果您尚未使用
Angular Universal技术，现在是时候尝试一下。 它允许您组织Angular应用程序的服务器端渲染。 结果，静态的，预渲染的HTML页面被发送给用户。 这使得应用程序变得异常快，因为它们的内容几乎立即显示在浏览器中，这是因为浏览器不必下载和解析JS捆绑包，并且浪费了时间确保Angular机制的运行。
此外，就首席执行官而言，服务器上呈现的Angular应用程序比常规应用程序具有优势。 Angular Universal创建静态页面，这使搜索引擎更容易为此类页面建立索引，因为它们不必执行JavaScript代码即可形成页面。
▍说明
使用Angular Universal可以大大提高应用程序性能。 最近，我们更新了我们的应用程序，为其添加了服务器渲染功能。 这导致站点加载时间从几秒钟减少到几十毫秒。
另外，由于这种方法，页面可以在社交网络上使用的内容预览区域中正确显示。 第一次有意义的页面显示（First Meaningful Paint）的时间很短，这使用户免于不必要的等待。
总结
应用程序开发是程序员不断寻找机会来改进自己创建的产品的途径。 您可以按照此方法充分利用此处提供的技巧来优化Angular应用程序。 我们确信他们一致的应用程序将使任何开发团队受益，并且所产生的结果将吸引用户，因为从他们的角度来看，这将导致他们将与更稳定和生产力更高的应用程序一起工作。
亲爱的读者们！ 如果您可以与Angular开发人员社区分享改进应用程序的有用技巧，请这样做。
