建造优质角1.5组件的指南-js教程-PHP中文网

A Guide to Building Quality Angular 1.5 Components

关键要点

组件隔离：最大限度地减少耦合，增强封装性，保持内部逻辑私有，并控制与其他组件的交互。
组件专注：每个组件专注于单一职责，从而提高可测试性和可重用性，同时保持简单性。
单向绑定：减少摘要周期负载，确保数据流入组件而不会受到外部干扰，从而提高性能和设计清晰度。
单次绑定：通过减少摘要周期中的观察者数量来进一步优化性能，这对于静态或不变的数据特别有用。
生命周期事件：使用$onInit和$onDestroy等生命周期事件有效管理组件的设置和拆卸，确保资源得到适当的初始化和清理。
组件事件：组件应发出事件以与其他组件通信，优先使用自定义事件而不是$scope进行交互，这符合Angular 2的实践，并提高了组件的模块化和可重用性。

本文由Mark Brown和Jurgen Van de Moere共同评审。感谢所有SitePoint的同行评审员，使SitePoint的内容达到最佳状态！

A Guide to Building Quality Angular 1.5 Components

2017年1月10日：文章更新，澄清了关于单向绑定的部分，并添加了关于单次绑定的信息。---

在Angular 1中，组件是创建自定义HTML元素的机制。过去可以使用Angular指令实现这一点，但组件建立在对Angular的各种改进之上，并强制执行构建和设计方面的最佳实践。

在本文中，我们将深入探讨组件的设计以及如何在应用程序中使用它们。如果您尚未开始在Angular 1中使用组件，您可以阅读我们最近的教程中关于它们的语法和设计的介绍。我的目标是概述一些最佳实践，这些实践将提高应用程序的质量。

还应该注意的是，通过新的组件API，Angular 2的许多最佳实践都被引入到Angular 1中，使您可以构建更容易以后重构的应用程序。Angular 2影响了我们思考和设计Angular 1组件的方式，但仍然存在许多明显的差异。Angular 1仍然是构建应用程序的非常强大的工具，因此我相信即使您不打算或尚未准备好迁移到Angular 2，投资使用组件改进您的应用程序也是值得的。

什么是好的组件？

组件的设计应考虑许多关键特性，以使其成为应用程序的强大构建块。我们将更详细地探讨每一个特性，但以下是组件应遵循的主要概念。

隔离：组件的逻辑应封装起来，保持内部和私有。这有助于减少组件之间的耦合。
专注：组件应作为单一单元执行一项主要任务，这使得它们易于理解，并且通常更易于重用。
单向绑定：尽可能使用单向绑定来减少摘要周期的负载。
使用生命周期事件：组件的生命周期从实例化开始，到从页面中移除结束。最好利用这些事件来维护组件。
明确的API：组件应以一致的方式接受配置作为属性，以便易于了解如何使用它们。
发出事件：为了与其他组件通信，它们应该发出具有适当名称和数据的事件。

现在让我们首先了解为什么以及如何将组件与应用程序的其余部分隔离和封装。

组件应隔离

Angular 1功能的演变是为了启用隔离和封装的组件，这是有充分理由的。一些早期的应用程序与$scope和嵌套控制器的使用高度耦合。最初Angular没有提供解决方案，但现在有了。

好的组件不会暴露其内部逻辑。由于它们的设计方式，这很容易实现。但是，除非绝对必要（例如发出/广播事件），否则应避免滥用组件使用$scope。

组件应专注

组件应承担单一角色。这对于可测试性、可重用性和简单性非常重要。最好创建额外的组件，而不是超载单个组件。这并不意味着您不会拥有更大或更复杂的组件，它只是意味着每个组件都应专注于其主要工作。

我根据组件在应用程序中的作用将其分为四个主要组，以帮助您考虑如何设计组件。构建这些不同类型的组件没有不同的语法——只需要考虑组件所承担的特定角色即可。

这些类型基于我5年以上的使用Angular的经验。您可以选择略微不同的组织方式，但根本概念是确保您的组件具有明确的角色。

应用程序组件

只有一个应用程序组件可以充当应用程序的根。您可以将其视为在Web应用程序的主体中只有一个组件，所有其他逻辑都通过它加载。

<code>>
  <app>></app>>
>
</code>

登录后复制

这主要推荐用于Angular 2设计一致性，因此如果您希望迁移，将来会更容易。它还通过将应用程序的所有根内容移动到单个组件中（而不是将其中一些内容放在index.html文件中）来帮助测试。应用程序组件还为您提供了一个进行应用程序实例化的地方，因此您不必在应用程序运行方法中执行此操作，从而增强了可测试性并减少了对$rootScope的依赖。

此组件应尽可能简单。如果可能，它可能只包含模板，而不包含任何绑定或控制器。但是，它不会替换ng-app或引导应用程序的需要。

路由组件

过去，我们在ui-router状态（或ngRoute路由）中链接控制器和模板。现在可以将路由直接链接到组件，因此组件仍然是控制器和模板配对的地方，但也有可路由的优点。

例如，使用ui-router，这就是我们链接模板和控制器的方式。

<code>>
  <app>></app>>
>
</code>

登录后复制

现在，您可以将URL直接链接到组件。

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

登录后复制

这些组件可以从路由参数（例如项目ID）绑定数据，它们的作用是专注于设置路由以加载所需的其它组件。这种对路由定义的看似微小的更改实际上对于Angular 2迁移能力非常重要，但在Angular 1.5中也同样重要，因为它可以在组件级别更好地封装模板和控制器。

Angular 1实际上有两个路由模块，ngRoute和ngComponentRouter。只有ngComponentRouter支持组件，但它也已弃用。我认为最好的办法是使用ui-router。

有状态组件

您为应用程序构建的大多数唯一组件都是有状态的。在这里，您实际上将放置应用程序业务逻辑、发出HTTP请求、处理表单和其他有状态任务。这些组件可能对您的应用程序来说是独一无二的，它们专注于维护数据而不是视觉呈现。

假设您有一个控制器加载用户配置文件数据以显示，并且还有一个相应的模板（此处未显示）在指令中链接在一起。此代码段可能是完成这项工作的最基本的控制器。

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

登录后复制

使用组件，您可以比以前更好地设计它。理想情况下，您还应该使用服务而不是直接在控制器中使用$http。

<code>.controller('ProfileCtrl', function ($scope, $http) {
  $http.get('/api/profile').then(function (data) {
    $scope.profile = data;
  });
})
.directive('profile', function() {
  return {
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
  }
})
</code>

登录后复制

现在您有一个加载自身数据的组件，因此使其成为有状态的。这些类型的组件类似于路由组件，只是它们可能不用于链接到单个路由。

有状态组件将使用其他（无状态）组件来实际呈现UI。此外，您仍然希望使用服务，而不是将数据访问逻辑直接放在控制器中。

无状态组件

无状态组件专注于渲染而不管理业务逻辑，并且不必对任何特定应用程序都是唯一的。例如，大多数用于UI元素（例如表单控件、卡片等）的组件也不会处理加载数据或保存表单之类的逻辑。它们旨在高度模块化、可重用和隔离。

如果无状态组件只显示数据或控制模板中的所有内容，则可能不需要控制器。它们将接受来自有状态组件的输入。此示例从有状态组件（上面的profile示例）获取值并显示头像。

<code>.component('profile', {
  templateUrl: 'views/profile.html',
  controller: function($http) {
    var vm = this;
    // 当组件准备好时调用，见下文
    vm.$onInit = function() {
      $http.get('/api/profile').then(function (data) {
        vm.profile = data;
      });
    };
  }
})
</code>

登录后复制

要使用它，有状态组件将通过属性传递用户名，如下所示：<avatar username="vm.profile.username">.</avatar>

您使用的许多库都是无状态组件（和可能的服务）的集合。它们当然可以接受配置以修改其行为，但它们并非旨在负责其自身之外的逻辑。

组件应使用单向绑定

这并不是组件的新功能，但在组件中使用它通常很明智。单向绑定的目的是避免将更多工作加载到摘要周期中，这是应用程序性能的主要因素。数据现在流入组件而无需查看其外部（这会导致当今存在的一些耦合问题），并且组件可以简单地根据该输入呈现自身。这种设计也适用于Angular 2，这有助于未来的迁移。

在此示例中，title属性仅根据提供的初始值绑定到组件一次。如果title由某个外部参与者更改，则它不会反映在组件中。表示绑定为单向的语法是使用

<code>>
  <app>></app>>
>
</code>

登录后复制

当title属性更改时，组件仍将更新，我们将介绍如何侦听title属性的更改。建议您尽可能使用单向绑定。

组件应考虑单次绑定

Angular还能够单次绑定数据，因此您可以优化摘要周期。本质上，Angular将等待提供第一个非未定义的值到绑定中，绑定该值，然后（一旦所有绑定都已解析）从摘要周期中删除相关的观察者。这意味着特定绑定不会向未来的摘要循环添加任何处理时间。

这是通过在绑定表达式前面加上::来完成的。如果您知道输入绑定在生命周期中不会更改，则只有这样做才有意义。在此示例中，如果title是单向绑定，它将继续在组件内部更新，但此处的绑定不会更新，因为我们将其指定为单次绑定。

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

登录后复制

组件应使用生命周期事件

您可能已经注意到$onInit函数作为一项新功能。组件具有生命周期和相应的事件，您应该使用这些事件来帮助管理组件的某些方面。

`$onInit()`

组件生命周期的第一步是初始化。此事件在控制器和绑定初始化后运行。您几乎总是应该使用此方法进行组件设置或初始化。它将确保在运行之前所有值都可用于组件。如果您直接在控制器中访问绑定值，则不能保证这些值可用。

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

登录后复制

`$postLink()`

下一步是链接模板中的任何子元素。当组件初始化时，不能保证它也已渲染在模板中使用的任何子元素。如果您需要以任何方式操作DOM，这一点很重要。一个重要的警告是，异步加载的模板在该事件触发时可能尚未加载。您可以始终使用模板缓存解决方案来确保模板始终可用。

<code>>
  <app>></app>>
>
</code>

登录后复制

`$onChanges()`

当组件处于活动状态时，它可能需要对输入值的更改做出反应。单向绑定仍将更新您的组件，但我们有一个新的$onChanges事件绑定来侦听输入何时更改。

对于此示例，假设向组件提供了产品标题和说明。您可以检测到如下所示的更改。您可以查看传递给函数的对象，该对象具有映射到可用绑定的对象，其中包含当前值和先前值。

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

登录后复制

`$onDestroy()`

最后阶段是从页面中移除组件。此事件在控制器及其作用域销毁之前运行。重要的是清理组件可能创建的或持有内存的任何内容，例如事件侦听器、观察者或其他DOM元素。

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

登录后复制

组件应具有明确的API

要使用一组数据配置和初始化组件，组件应使用绑定来接受这些值。这有时被认为是组件API，这只是描述组件接受输入的方式的不同方法。

这里的挑战是为绑定提供简洁但清晰的名称。有时开发人员试图缩短名称以使其非常简洁，但这对于组件的使用来说是危险的。假设我们有一个接受股票代码作为输入的组件，以下哪一个更好？

<code>.controller('ProfileCtrl', function ($scope, $http) {
  $http.get('/api/profile').then(function (data) {
    $scope.profile = data;
  });
})
.directive('profile', function() {
  return {
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
  }
})
</code>

登录后复制

希望您认为symbol更好。有时开发人员也喜欢作为避免名称冲突的一种方式来为组件和绑定添加前缀。为组件添加前缀是明智的，例如md-toolbar是Material工具栏，但为所有绑定添加前缀会变得冗长，应避免。

组件应发出事件

为了与其他组件通信，组件应发出自定义事件。有很多使用服务和双向数据绑定的示例来同步组件之间的数

据，但事件是更好的设计选择。事件作为与页面通信的一种方式效率要高得多（并且是JavaScript语言以及它在Angular 2中的工作方式的基础部分，这并非巧合）。

Angular中的事件可以使用$emit（向上到作用域树）或$broadcast（向下到作用域树）。这是一个快速示例事件的实际应用。

<code>.component('profile', {
  templateUrl: 'views/profile.html',
  controller: function($http) {
    var vm = this;
    // 当组件准备好时调用，见下文
    vm.$onInit = function() {
      $http.get('/api/profile').then(function (data) {
        vm.profile = data;
      });
    };
  }
})
</code>

登录后复制

您需要在组件之间进行通信的主要有两种情况：在您了解的组件之间以及您不了解的组件之间。为了说明这种区别，让我们假设我们有一组组件来帮助管理页面上的选项卡，以及一个具有相应帮助页面链接的工具栏。

<code>.component('avatar', {
  template: '<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975605585460.png" class="lazy" ng- alt="建造优质角1.5组件的指南" >',
  bindings: {
    username: '  },
  controllerAs: 'vm'
})
</code>

登录后复制

在这种情况下，my-tabs和my-tab组件可能彼此了解，因为它们协同工作以创建一组三个不同的选项卡。但是，my-toolbar组件超出了它们的认知范围。

每当选择不同的选项卡（这将是my-tab组件实例上的一个事件）时，my-tabs组件都需要知道，以便它可以调整选项卡的显示以显示该实例。my-tab组件可以向上发出事件到父my-tabs组件。这种类型的通信就像两个协同工作以创建单个功能（选项卡式界面）的组件之间的内部通信。

但是，如果my-toolbar想要知道当前选择了哪个选项卡，以便它可以根据可见内容更改帮助按钮呢？my-tab事件永远不会到达my-toolbar，因为它不是父级。因此，另一个选择是使用$rootScope向下发出整个组件树的事件，这允许任何组件侦听和React。这里潜在的缺点是您的事件现在到达每个控制器，如果另一个组件使用相同的事件名称，您可能会触发意外的影响。

确定哪种方法适合您的用例，但是每当另一个组件可能需要了解事件时，您可能都希望使用第二个选项向整个组件树发出事件。