成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯] Controller間的數(shù)據(jù)共享？最佳實踐：使用Service

Salamander / 3283人閱讀

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

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

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

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

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

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

當(dāng)然不是，最簡單容易的方式就是使用服務(wù)（service）。

問題

假設(shè)有兩個并排的面板，每個面板代表一個指令（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 = [];
    }
  };
});

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

創(chuàng)建一個服務(wù)保持共享狀態(tài)

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

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

  return {
    addItem: addItem,
    getList: getList
  };

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

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

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

在任何需要的地方注入服務(wù)

既然我們已經(jīng)創(chuàng)建好了我們的服務(wù)，我們就需要在任何需要訪問或修改數(shù)據(jù)的地方去注入它了。

先從面板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的控制器，獲取數(shù)據(jù)：

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

從JSBin里看看運行情況。

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

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

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

ng-repeat 給循環(huán)的數(shù)組設(shè)置了觀察器。

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

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

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

概括

創(chuàng)建一個服務(wù)去存放你的數(shù)據(jù)，并給數(shù)據(jù)創(chuàng)建 getter 和 setter 的方法。

在任何需要這個數(shù)據(jù)的地方注入這個服務(wù)。

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

感謝閱讀！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86400.html

相關(guān)文章

  • [譯]Express應(yīng)用結(jié)構(gòu)的最佳實踐

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

    dreamans 評論0 收藏0

  • Yii2.0框架 MVC 最佳實踐

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

    keithxiaoy 評論0 收藏0

  • 【譯】緩存的最佳實踐以及max-age的陷阱

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

    mist14 評論0 收藏0

  • Spring Boot 最流行的 16 條實踐解讀！

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

    Ethan815 評論0 收藏0

  • Kubernetes Deployment 的安全最佳實踐

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

    oysun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<