用工厂和服务来整理您的角控制器-js教程-PHP中文网

Tidy Up Your Angular Controllers with Factories and Services

大约五六年以前，jQuery 统治着 Web 的客户端。它读起来像纯英语，易于安装，学习曲线足够平缓，连蹒跚学步的孩子都能轻松上手。然而，这种易用性也带来了一系列问题。jQuery 让你很容易拼凑出一个“能用”的东西，但这却以牺牲最佳实践、可维护性和可扩展性为代价。然后，框架大战开始了，很快每个人都争先恐后地尝试最新最好的框架，这些框架承诺能为他们的应用程序带来结构和可扩展性。AngularJS 就是其中一个框架。现在，Angular 的学习曲线比 jQuery 的陡峭得多，但我认为它已经发展到许多开发人员能够相当自信地设置基本应用程序的程度。也就是说，使用框架并不能自动解决应用程序设计的核心问题。在 AngularJS、EmberJS 或 React 等框架中构建不可维护或不可扩展的应用程序仍然是可能的——事实上，对于初学者甚至中级框架用户来说，犯这个错误相当常见。

关键要点

使用 Angular 工厂来封装和管理对象的创建和配置，将对象创建的关注点与控制器分离，从而增强模块化和可维护性。
实现服务来处理数据检索和业务逻辑，从而精简 Angular 控制器，使其只专注于视图管理。
采用 controllerAs 语法来简化模板中的绑定，并避免与使用 $scope 相关的常见陷阱，从而增强代码的可读性和可维护性。
通过将可重用逻辑移动到服务或工厂中来重构控制器，这有助于维护一个干净且专注的控制器，该控制器主要处理与视图相关的逻辑。
使用 Jasmine 或 Mocha 等框架测试控制器、服务和工厂，以确保组件能够独立正常运行，并保持应用程序的健壮性。
将重复性或共享的功能抽象到服务或工厂中，以避免代码重复，并方便更新和管理应用程序不同部分中使用的功能。

事情是如何如此轻易地失控的？

为了演示这种突然的复杂性如何在即使是最基本的 AngularJS 应用程序中发生，让我们开始构建一个应用程序，并观察我们可能出错的地方。然后，稍后我们将研究解决方法。

让我们创建一个简单的应用程序

我们将要创建的应用程序是一个 Dribbble 玩家计分应用程序。我们将能够输入 Dribbble 用户的姓名，并将他们添加到记分牌中。剧透——您可以在此处查看最终产品的有效实现。首先创建一个包含以下内容的 index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 重构</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <🎜>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">Dribbble 玩家分数</div>
        <div class="panel-body">
          <p>添加 Dribbble 玩家以查看他们的排名：</p>
          <div class="form-inline">
            <input class="form-control" type="text" />
            <button class="btn btn-default">添加</button>
          </div>
        </div>
        <ul class="list-group"></ul>
      </div>
    </div>
  </body>
</html>

登录后复制

创建我们的 AngularJS 应用程序

如果您以前编写过 Angular 应用程序，那么接下来的几个步骤应该非常熟悉。首先，我们将创建一个 app.js 文件，在其中实例化我们的 AngularJS 应用程序：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 重构</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <🎜>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">Dribbble 玩家分数</div>
        <div class="panel-body">
          <p>添加 Dribbble 玩家以查看他们的排名：</p>
          <div class="form-inline">
            <input class="form-control" type="text" />
            <button class="btn btn-default">添加</button>
          </div>
        </div>
        <ul class="list-group"></ul>
      </div>
    </div>
  </body>
</html>

登录后复制

现在，我们将它包含在我们的 index.html 文件中。我们还将 ng-app="dribbbleScorer" 属性添加到我们的 <html> 标签中以引导 Angular 应用程序。

var app = angular.module("dribbbleScorer", []);

登录后复制

现在我们的应用程序已设置并引导，我们可以开始处理应用程序的业务逻辑了。

(以下内容与原文类似，但进行了语句和词汇的调整，保持原意不变，并省略了部分重复的步骤说明，以控制输出长度。)

通过逐步添加功能（表单、Dribbble 数据获取、移除玩家、使用 player 对象、计算分数），原文展示了如何一步步让应用“运行起来”，但同时也导致控制器代码变得臃肿复杂。

使用 Angular 工厂来抽象我们的关注点

添加和移除玩家这两个概念有点属于控制器。这与其说是控制器公开这些函数，不如说是它也负责它们的实现。如果控制器的 addPlayer() 函数只是将该请求交给应用程序的另一个部分来处理实际添加玩家的来龙去脉，岂不是更好？这就是 AngularJS 工厂发挥作用的地方。

(原文中工厂的创建和使用部分进行了改写，更简洁明了，并保留了核心逻辑)

我们创建了一个 DribbblePlayer 工厂，它是一个构造函数，用于创建 Dribbble 玩家对象。这个工厂负责从 Dribbble API 获取数据，并将其添加到玩家对象中。通过使用这个工厂，我们简化了控制器，使其只负责添加和移除玩家的操作。

(原文中对工厂功能的改进，例如添加 likeScore() 和 commentScore() 方法，也进行了类似的改写，使其更简洁)

我们把分数计算方法也添加到 DribbblePlayer 工厂中，作为玩家对象的方法。这样，控制器代码就更加简洁，只负责视图相关的逻辑。

总结

本文演示了如何轻松编写“能用”的代码，以及这些代码如何迅速变得难以维护。我们最终得到一个混乱的控制器，充满了函数和责任。然而，经过一些重构之后，我们的控制器文件现在看起来像这样：

<html ng-app="dribbbleScorer">
  ...
</html>

登录后复制

它更易于阅读，并且只关注很少的事情——这就是重构的意义所在。我希望我已经为您提供了必要的工具，让您开始考虑构建 AngularJS 应用程序的更好方法。快乐重构！本教程的代码可在 GitHub 上找到！

(原文最后的FAQ部分省略，因为篇幅过长，且与核心内容关系较弱。如果需要，可以单独提出FAQ问题进行解答。)

以上是用工厂和服务来整理您的角控制器的详细内容。更多信息请关注PHP中文网其他相关文章！