2. 程式人生 > >angular中釋出/訂閱模式詳解

angular中釋出/訂閱模式詳解

阿新 • • 發佈：2018-12-05

Angular按照釋出/訂閱模式設計了其事件系統，使用時需要“釋出”事件，並在適當的位置“訂閱”或“退訂”事件，就像郵箱裡面大量的訂閱郵件一樣，當我們不需要時就可以將其退訂了。具體到開發中，對應著 </span>scope和<span> rootScope的$emit</code>、<code>$broadcast和$on</code>方法。本文介紹Angular的事件機制，包括<span>$scope和$</span>rootScope處理事件上的異同，<span>$

broadcast、$</span>emit和<span>$on的使用方式及他們區別等內容。

</span>scope與<span> scope之間的關係， </span>scope與 rootScope之間的關係

要理解Angular的事件機制，首先需要了解$scope</code>與<code>$scope之間的關係以及$scope</code>與<code>$rootScope之間的關係。$rootScope</code>是唯一真神，是萬域起源，是所有<code>$scope

的最終祖先。而$scope</code>與<code>$scope之間可能的關係包括父子關係和兄弟關係。還記得controller之間的關係嗎，Angular為每個controller分配一個獨立的$scope</code>，controller之間的關係也對應著<code>$scope之間的關係：

<div ng-controller="ParentCtrl as parent">
    {{ parent.data }}
    <div ng-controller="SiblingOneCtrl as sib1">
 

        {{ sib1.data }}
    </div>
    <div ng-controller="SiblingTwoCtrl as sib2">
        {{ sib2.data }}
    </div>
</div>
  
    
  
   
  
  
      
   
    • 1
      • 
   
    • 2
      • 
   
    • 3
      • 
   
    • 4
      • 
   
    • 5
      • 
   
    • 6
      • 
   
    • 7
      • 
   
    • 8
      • 
   
    • 9
      •

    釋出、訂閱、退訂

    $broadcast</code>和<code>$emit用於釋出事件，他們將事件名稱和事件內容釋出出去，就像是高考榜單一樣，事件名稱相當於考生的名字，而事件內容相當於考生的成績等資訊：

    $scope.$broadcast('EVENT_NAME', 'Data to send');
$scope.$emit('EVENT_NAME', 'Data to send');
  
      
   
    • 1
      • 
   
    • 2
      • 
  
    
  
   
  
  
      
   
    • 1
      • 
   
    • 2
      •

    $on用於訂閱事件，事件名稱是訂閱的唯一標識，每個考生看榜單時都要尋找自己的名字，然後根據自己的成績等資訊決定下一步應該報考什麼學校：

    $scope.$on('EVENT_NAME', function(event, args) {
    // balabala
});
  
      
   
    • 1
      • 
   
    • 2
      • 
   
    • 3
      • 
  
    
  
   
  
  
      
   
    • 1
      • 
   
    • 2
      • 
   
    • 3
      •

    Angular的退訂事件有些奇怪，並沒有類似於其他語言的$off方法，所以不要想當然的按照如下方式進行事件的退訂操作：

    // 不要這樣做
$scope.$off('EVENT_NAME');
  
      
   
    • 1
      • 
   
    • 2
      • 
  
    
  
   
  
  
      
   
    • 1
      • 
   
    • 2
      •

    事實上，Angular的事件退訂方法隱藏在事件訂閱裡面：使用$on訂閱事件時會返回一個函式，而此函式就是用來退訂事件的方法，就像是考生看到了自己的成績後稟告父母大人，“商量著”選取學校填報志願，而此志願單就是結束整個高考榜單的結束：

    // 訂閱事件返回用於退訂事件的函式
var deregister = $scope.$on('EVENT_NAME', function(event, args) {
    // balabala
});

// 退訂事件
deregister();

        </span>broadcast</strong>相當於戰鬥機轟炸，<strong> emit相當於射箭

        $broadcast</code>和<code>$emit都用於釋出事件，但從名字就可以看出他們的不同點：$broadcast</code>是自上而下的廣播，所有能聽到的都可以對其進行反應。而<code>$emit是自下而上的射箭，只有在箭矢的軌跡上才能對其做出反應。

        具體到Angular上，即從一個$scope</code>上通過<code>$broadcast釋出的事件，他的所有後代$scope都可以對此事件做出響應：

        // 父$scope通過$broadcast釋出事件
app.controller('ParentCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$broadcast("parent", 'Data to Send');
}])
//所有子$scope都可以通過$on訂閱事件
.controller('SiblingOneCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$on("parent", function(event, 'Data to Send') {
        // balabala
    });
}])
.controller('SiblingTwoCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$on("parent", function(event, 'Data to Send') {
        // balabala
    });
}]);

            而通過$emit</code>釋出的事件，只有他的祖先<code>$scope可以做出響應，並且其中任一祖先都可以將此事件終結掉，不讓其繼續傳播：

            // 子$scope通過$emit釋出事件
app.controller('SiblingOneCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$emit("sib1", 'Data to Send');
}])
// 父$scope通過$on訂閱事件
.controller('ParentCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$on("sib1", function(event, 'Data to Send') {
        // balabala
    });
}])
// 其兄弟$scope對其$emit的事件一無所知，所以不能訂閱其事件
.controller('SiblingTwoCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    // 不要這樣做
    $scope.$on("sib1", function(event, 'Data to Send') {
        // balabala
    });
}]);

                在$emit釋出事件的響應道路上，其任一祖先如果感覺不再需要此事件了，就可以通過如下方式終結此事件：

                app.controller('ParentCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$on("sib1", function(event, 'Data to Send') {
        // balabala
        event.stopPropagation(); // 終止事件繼續“冒泡”
    });
}])

                    </span>rootScope的<span> broadcast和$emit

                    上面說過$rootScope</code>是所有<code>$scope的最終祖先，所以通過$rootScope</code>的<code>$broadcast釋出的事件可以被所有$scope</code>接收到，包括<code>$rootScope：

                    app.controller('SomeCtrl', ['$rootScope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($rootScope) {
    $rootScope.$broadcast("rootEvent", 'Data to Send');

    // $rootScope也可以通過$on訂閱從$rootScope.$broadcast釋出的事件
    $rootScope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])
// 所有$scope都能夠通過$on訂閱從$rootScope.$broadcast釋出的事件
.controller('ParentCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])
.controller('SiblingOneCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    $scope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])

                        而$rootScope</code>的<code>$emit就有些怪異了，按照上面的描述，$rootScope</code>是沒有祖先的，所以我們可能會想到其<code>$emit會沒有任何作用，但事實並不如此：$rootScope.$emit釋出的事件，只能通過$rootScope.$on訂閱，而其他$scope對此一無所知:

                        app.controller('SomeCtrl', ['$rootScope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($rootScope) {
    $rootScope.$emit("rootEvent", 'Data to Send');

    // 只有$rootScope可以通過$on訂閱從$rootScope.$emit釋出的事件
    $rootScope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])
// $scope不能夠通過$on訂閱從$rootScope.$emit釋出的事件
.controller('ParentCtrl', ['$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
    // 不要這樣做
    $scope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}]);

                          退訂$rootScope上的訂閱事件

                          當使用$rootScope.$on訂閱事件時，需要手動退訂事件，一般在其所處$scope</code>的<code>$destory事件中退訂：

                          app.controller('SomeCtrl', ['$rootScope'</span>, <span class="hljs-string">'$scope', function($rootScope, $scope) {
    var deregister = $rootScope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });

    $scope.$on('$destory', function() {
        deregister(); // 退訂事件
    });
}])

                              那通過$scope.$on訂閱的事件呢？一般不需要手動退訂，因為Angular會幫我們退訂，但是如果需要自己控制何時退訂事件，也可以通過上述方式進行退訂。

                              事件命名的建議

                              在開發中，對於變數的命名、函式的命名、檔案的命名都有一定的規範，既要保證可讀性，也需要保證無混淆性。在Angular的事件機制中，因為事件可能會跨函式，甚至可能跨檔案，所以對於事件名一定要保證唯一性，所以建議事件名都加上特定的字首，以便區分。如下幾個例子：

                              $scope.$emit('trash:delete', data);
$scope.$on('trash:delete', function (event, data) {...});

$scope.$broadcast('trash:clear', data);
$scope.$on('trash:clear', function (event, data) {...});
  
                                
   
                              • 1
                                • 
   
                              • 2
                                • 
   
                              • 3
                                • 
   
                              • 4
                                • 
   
                              • 5
                                •

                                結語

                                Angular的事件機制很智慧，而且一般來說總能符合我們的預期，但是如果不能深入理解其背後的機制，可能會踏入某些深坑，本文嘗試說明Angular的事件機制，如果有理解不正確的地方，請留言告知。

                                相關推薦

                                angular中釋出/訂閱模式詳解

                                Angular按照釋出/訂閱模式設計了其事件系統，使用時需要“釋出”事件，並在適當的位置“訂閱”或“退訂”事件，就像郵箱裡面大量的訂閱郵件一樣，當我們不需要時就可以將其退訂了。具體到開發中，對應著 </span>scope和<span> s

                                【轉】VirtualBox與VMware中的網路模式詳解

                                VirtualBox中有4中網路連線方式： NAT Bridged Adapter Internal Host-only Adapter VMWare中有三種，其實他跟VMWare 的網路連線方式都是一樣概念，只是比VMWare多了Internal方式。

                                angular中$emit與$broadcast詳解

                                angularjs 中 broadcast與emit $on的處理思想 對於Angular的controll之間的通訊方式，我們可以常見有有幾種方式，如可以通過rootScope，還有通過scop

                                設計模式中的多型——策略模式詳解

                                1. 關於策略模式 策略模式和java語言的多型特性有些像。java的多型特性允許我們面向介面程式設計,不用關心介面的具體實現。介面所指向的實現類,以及通過介面呼叫的方法的具體行為可以到執行時才繫結。這麼做最大的好處是在儘可能實現程式碼複用的前提下更好地應對具體實現類的變化。比如我想增加一種介面

                                Guava - EventBus(事件匯流排) - 事件釋出訂閱模式（一對多、同一個JVM下解耦）

                                原文：https://www.cnblogs.com/whitewolf/p/4132840.html Guava在guava-libraries中為我們提供了事件匯流排EventBus庫，它是事件釋出訂閱模式的實現，讓我們能在領域驅動設計(DDD)中以事件的弱引用本質對我們的模組和領域邊界很好

                                Java中的volatile關鍵字詳解及單例模式雙檢鎖問題分析

                                【參考文獻】http://www.cnblogs.com/dolphin0520/p/3920373.html 看了好多關於volatile關鍵字的文章，這篇應該是講得最清楚的了吧，從Java記憶體模型出發，結合併發程式設計中的原子性、可見性、有序性三個角度分析了volatile所起的作用，並從

                                Java開發中的23種設計模式詳解(轉)

                                資源：http://download.csdn.net/detail/zhangerqing/4835830 原文連結：http://blog.csdn.net/zhangerqing 設計模式（Design Patterns）                   

                                Java開發中的23種設計模式詳解

                                一、設計模式的分類 總體來說設計模式分為三大類： 建立型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。 結構型模式，共七種：介面卡模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。 行為型模式，共十一種：策

                                Java中常用的10種設計模式詳解

                                1. 觀察者模式 定義了物件之間的一對多的依賴，這樣一來，當一個物件改變時，它的所有的依賴者都會收到通知並自動更新。 對於JDK或者Andorid中都有很多地方實現了觀察者模式，比如XXXVi

                                Java中的設計模式 - 觀察者模式【又叫：釋出/訂閱模式】

                                文章目錄 Java中的設計模式 - 觀察者模式【又叫：釋出/訂閱模式】 1、觀察者模式是為了解決什麼問題 2、核心邏輯 3、優點 4、缺點 5、應用場景

                                java中工廠模式和單例模式詳解

                                如何將例項化具體類的程式碼從應用中抽離或者封裝起來，使它們不會干擾應用的其他部分? 1：簡單工廠模式：其作用是例項化物件而不需要客戶瞭解這個物件屬於那個具體的子類。 using System; using System.Collections; public class MyClass {  

                                java中的監聽機制——觀察者設計模式詳解

                                好久沒有做筆記了，我發現研究過一個東西后忘的很快，等下次遇到後還得重新查資料學，倒不如寫篇筆記記錄一下下次遇到相同的問題後查查筆記瞬間就知道了，從而節省了好多時間，今天心血來潮哈哈，寫一篇簡單的筆記

                                javascript中設計模式之橋接模式詳解(Bridge design)

                                一、橋接模式 1、橋接模式是一種既能把倆個物件連線在一起，又能避免二者間的強耦合的方法。通過“橋”把彼此聯絡起來，同時又允許他們各自獨立變化 2、橋接模式主要作用就是將抽象與其實現隔離開來，以便二者獨

                                RabbitMQ學習總結（5）——釋出和訂閱例項詳解

                                一、Publish/Subscribe（釋出/訂閱）（using the Java Client） 在前面的教程中,我們建立了一個work Queue（工作佇列）。工作佇列背後的假設是每個任務是交付

                                32中設計模式詳解

                                    訪問者模式的目的是封裝一些施加於某種資料結構元素之上的操作。一旦操作需要做修改，接受設個操作的資料結構可以保持不變。適用於資料結構相對未定的系統，將資料結構和作用於結構上的操作耦合解脫開使得操作可以相對自由的演化。訪問者模式使得增加新的操作變得更為容易。訪問者模式將有關的行為集中到一個訪問者物件中，

                                Java開發中的23種設計模式詳解(三)

                                 本章是關於設計模式的最後一講，會講到第三種設計模式——行為型模式，共11種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模式、直譯器模式。 先來張圖，看看這11中模式的關係： 第一類：通過父類與子類的關

                                設計模式 - 模板方法模式詳解及其在Spring中的應用

                                基本介紹 模板方法模式（Template Method Pattern）也叫模板模式，它在一個抽象類中公開定義了執行它的方法的模板，它的字類可以按需重寫方法實現，但呼叫將以抽象類中定義的方式進行。 簡單來說，模板方法模式定義一個操作中的演算法的骨架，將一些步驟延遲到子類中，使得子類可以不改變一個演算法的結構，

                                設計模式 - 命令模式詳解及其在JdbcTemplate中的應用

                                # 基本介紹 > 在軟體設計中，我們經常需要向某些物件傳送一些請求，但是並不知道請求的接收者是誰，也不知道被請求的操作是哪個，我們只需要在程式執行時指定具體的請求接收者即可，此時，可以使用命令模式來設計，使得請求傳送者與請求接收者消除彼此之間的耦合，讓物件之間的呼叫關係更加靈活。 命令模式（Command

                                搞懂：MVVM模型以及VUE中的資料繫結資料劫持釋出訂閱模式

                                ## 搞懂：MVVM模式和Vue中的MVVM模式 ### MVVM * MVVM ： `model - view - viewmodel`的縮寫，說都能直接說出來 `model`：模型，`view`：檢視，`view-Model`：檢視模型 * V：檢視，即瀏覽器最前端渲染的頁面 * M：模型，資

                                JavaScript中return的用法詳解

                                style 返回 www log tle blog 意思 charset fun 1、定義：return 從字面上的看就是返回，官方定義return語句將終止當前函數並返回當前函數的值，可以看下下面的示例代碼： <!DOCTYPE html><html l