[譯] Controller間的數據共享？最佳實踐：使用Service

Salamander 發布于2019-08-21 10:54 / 3276人閱讀

摘要：共享數據的最佳策略是什么呢用一些{{BANNED}}的控制器繼承方案嗎當然不是，最簡單容易的方式就是使用服務。概括創建一個服務去存放你的數據，并給數據創建和的方法。

原文鏈接 : Sharing Data Between Controllers? Best Practice: Use a Service
原文作者 : DAVE CEDDIA
譯者 : 李林璞（web前端領域）
譯者注：翻譯如有疏漏，歡迎指出！感謝！轉載請保留此頭部。

Angular開始起來簡單易用，甚至說神奇。“哇哦！雙向綁定！”

你會迫不及待地去構建你的杰作，直到碰到釘子：你正在像網上每個人建議的那樣去構建一個獨立的組件，但怎么和其他組件共享數據呢？

或許你在不同的路由里有兩個視圖都需要訪問某些狀態變量，又或者你有三個分離的組件需要訪問同樣的一堆數據。

共享數據的最佳策略是什么呢？用一些{{BANNED}}的控制器繼承方案嗎？

當然不是，最簡單容易的方式就是使用服務（service）。

問題

假設有兩個并排的面板，每個面板代表一個指令（directive）：

下面是面板1的代碼：

angular.directive("paneOne", function() {
  return {
    restrict: "E",
    scope: {},
    template: [
      "",
        "",
        "",
      ""
    ].join(""),
    controllerAs: "p1",
    controller: function() {
      var vm = this;
      vm.text = "";
      vm.addToList = function() {
        // TODO: add to the list in Pane 2 somehow
        vm.text = "";
      };
    }
  };
});

面板2的：

angular.directive("paneTwo", function() {
  return {
    restrict: "E",
    scope: {},
    template: [
      "",
        "{{ item }}",
      ""
    ].join(""),
    controllerAs: "p2",
    controller: function() {
      var vm = this;
      // TODO: get this list of items from Pane 1 somehow
      vm.listItems = [];
    }
  };
});

我們想要實現的是在面板1的輸入框中輸入某些東西，然后點擊按鈕 “Add To List”, 這條內容就會在面板2的列表中出現。

創建一個服務保持共享狀態

為了在兩個甚至更多的控制器間共享數據，創建一個服務去扮演中間件的角色。這樣可以使控制器（或組件）保持松散耦合：它們不需要知道其他的控制器（或組件）是怎么樣的，它們只需要知道數據源 - 你創建的中間件服務。

angular.factory("sharedList", function() {
  var list = [];

  return {
    addItem: addItem,
    getList: getList
  };

  function addItem(item) {
    list.push(item);
  }

  function getList() {
    return list;
  }
});

上面這個服務非常簡單，調用 addItem 把數據放到列表里，然后調用 getList 獲取整個列表。這真的很簡單，甚至不需要去移除或者清空列表項，看到這個方法的簡便之處了吧。

在任何需要的地方注入服務

既然我們已經創建好了我們的服務，我們就需要在任何需要訪問或修改數據的地方去注入它了。

先從面板1的控制器開始：

// Inject sharedList
controller: function(sharedList) {
  var vm = this;
  vm.text = "";
  vm.addToList = function() {
    // Stuff the item into the shared list
    sharedList.addItem(vm.text);
    vm.text = "";
  };
}

然后是面板2的控制器，獲取數據：

// Inject sharedList
controller: function(sharedList) {
  var vm = this;
  // Read the data
  vm.listItems = sharedList.getList();
}

從JSBin里看看運行情況。

但不需要觀察器(watchers)嗎？

當我寫到這兒的時候，我非常確定面板2中的列表在我添加一些觀察器前不會自動更新 。

但是接下來當我把代碼放到 JSBin 里的時候...你瞧，它竟然可以更新！為什么呢？

ng-repeat 給循環的數組設置了觀察器。

點擊 “Add To List” 觸發了一個消化周期 (digest cycle)，它就會重新檢測 ng-repeat 的觀察器。

因為 sharedData.getList() 返回了一個數組的引用，觀察器就會看到 p2.listItems 已經發生了變化。這里是關鍵：如果 getList 返回一個不同于由 addToList 更改的數組，這就不會觸發更新了。

所以：這種通信方式可以在沒有觀察器的情況下完美運行。但如果你發現失敗了的話，檢查一下你是怎么傳遞數據的，或許你需要明確地創建一個觀察器檢測變化。

概括

創建一個服務去存放你的數據，并給數據創建 getter 和 setter 的方法。

在任何需要這個數據的地方注入這個服務。

這幾乎就是全部內容了（除非你需要觀察器 - 這種情況下，你還是添加一個吧）。

感謝閱讀！

云服務器 GPU云服務器數據倉庫最佳實踐最佳實踐 webrtc最佳實踐 cdn最佳實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86400.html

[譯]Express應用結構的最佳實踐

摘要：為應用增加新的特性和處理新的情況可能都會改變文件的結構。寫一個模板的最佳實踐是，不要在模板中處理數據。在上面這四個文件夾中，主要的測試代碼將是單元測試，這意味著你需要將被測試的代碼與應用分離開來。前言 Node和Express并不嚴格要求它的應用的文件結構。你可以以任意的結構來組織你的web應用。這對于小應用來說，通常是不錯的，十分易于學習和實驗。但是，當你的應用在體積和復雜性上都...

dreamans 2019-08-21 10:48 評論0 收藏0
Yii2.0框架 MVC 最佳實踐

摘要：框架最佳實踐最佳實踐在設計良好的應用中，控制器很精練，包含的操作代碼簡短如果你的控制器很復雜，通常意味著需要重構，轉移一些代碼到其他類中。層業務邏輯層框架由，，組成，執行流程一般是在訪問獲取數據，通過渲染頁面。 Yii2.0框架 MVC 最佳實踐 Controller最佳實踐在設計良好的應用中，控制器很精練，包含的操作代碼簡短；如果你的控制器很復雜，通常意味著需要重構，轉移一些代...

keithxiaoy 2019-06-28 18:47 評論0 收藏0
【譯】緩存的最佳實踐以及max-age的陷阱

摘要：可能會延長這些的壽命假設你有以下的這個緩存了和如果命中了緩存，就從緩存中取，否則發起網絡請求如果我們更改了，我們會修改中的版本號，觸發的更新。本文翻譯自：https://jakearchibald.com/201...這是一篇2016年的老文章。作者是Chrome瀏覽器的開發成員。本文首發于公眾號：符合預期的CoyPan 使用正確的緩存可以帶來巨大的頁面性能上的收益，節省帶寬，減...

mist14 2019-08-06 13:40 評論0 收藏0
Spring Boot 最流行的 16 條實踐解讀！

摘要：來源是最流行的用于開發微服務的框架。以下依次列出了最佳實踐，排名不分先后。這非常有助于避免可怕的地獄。推薦使用構造函數注入這一條實踐來自的項目負責人。保持業務邏輯免受代碼侵入的一種方法是使用構造函數注入。 showImg(https://mmbiz.qpic.cn/mmbiz_jpg/R3InYSAIZkHQ40ly9Oztiart2lESCyjCH0JwFRp3oErlYobhibM...

Ethan815 2019-08-16 18:32 評論0 收藏0
Kubernetes Deployment 的安全最佳實踐

摘要：今天的文章由來自的和撰寫，在不同用戶案例中搜集到的數據基礎上，描述了的安全最佳實踐。在谷歌上，我們的用來部署我們的服務。實施連續安全缺陷掃描容器可能包含過時的已知缺陷的程序包。谷歌云平臺的用戶能夠從自動防火墻規則中受益，避免跨集群交流。今天的文章由來自 Aqua Security 的 Amir Jerbl 和 Micheal Chemy 撰寫，在不同用戶案例中搜集到的數據基礎上，描述...

oysun 2019-07-01 16:25 評論0 收藏0