用工廠和服務來整理您的角控制器-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 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為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。