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

首页

web前端

js教程

用工厂和服务来整理您的角控制器

Jennifer Aniston

Feb 21, 2025 pm 12:28 PM

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" 属性添加到我们的标签中以引导 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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

See all articles