AngularJS中介者模式實例

在任何應用程式中，中介者模式隨處可見。

→ 有一個事件源，觸發事件，傳遞參數
→ 中介者記下這個事件，向外界廣播，並帶上參賽
→ 有一個地方偵聽中介者事件，一旦事件源觸發事件，就從中介者手裡獲取事件相關參數

本篇，要體驗的是在AngularJS中的中介者模式。

場景是：當創建一個訂單，需要引發一些動作，比如給用戶發郵件等。

AngularJS中有沒有相關的方法呢？

--有，$emit方法用來向上級Scope廣播事件，$on方法用來偵聽事件。

首先在$rootScope層面封裝一個中介者。

.factory('$emit', function($rootScope) {
    return function() { $rootScope.$emit.apply($rootScope, arguments); };
})

有一個定單，把創建定單看作是事件源，創建定單的時候，讓中介者記下事件名稱，並帶上參數。

//創建一個Order實例，也是事件源
.factory('Order', function($emit) {
    function Order() {
        this.email   = '[email protected]';
        this.product = 'Macbook Pro';
        $emit('order:created', this);
    }
    return Order;
})

讓$rootScope偵聽中介者的事件名稱。

.run(function($rootScope, Email) {
    //讓$rootScope偵聽事件
    $rootScope.$on('order:created', function(event, order) {
        new Email('Email sent to ' + order.email + ' for ' + order.product);
    });
});

以上，Email在$rootScope偵聽到order:created事件調用回調函數後使用到，這裡用來彈出視窗。

//創建一個Email實例，彈出視窗顯示信息
.factory('Email', function($window) {
    function Email(text) {
        $window.alert(text);
    }
    return Email;
})

controller中提供一個函數用來創建定單實例。

.controller('MainCtrl', function($scope, Order) {
    //產生一個新訂單
    $scope.newOrder = function() { new Order(); };
})

前端就是調用：

<a class="btn btn-lg btn-primary" role="button" ng-click="newOrder()">Place new order</a>


完整代碼如下：

angular
    .module('app', [])
    .controller('MainCtrl', function($scope, Order) {
        //產生一個新訂單
        $scope.newOrder = function() { new Order(); };
    })
    .factory('$emit', function($rootScope) {
        return function() { $rootScope.$emit.apply($rootScope, arguments); };
    })
    //創建一個Order實例，也是事件源
    .factory('Order', function($emit) {
        function Order() {
            this.email   = '[email protected]';
            this.product = 'Macbook Pro';
            $emit('order:created', this);
        }
        return Order;
    })
    //創建一個Email實例，彈出視窗顯示信息
    .factory('Email', function($window) {
        function Email(text) {
            $window.alert(text);
        }
        return Email;
    })
    .run(function($rootScope, Email) {
        //讓$rootScope偵聽事件
        $rootScope.$on('order:created', function(event, order) {
            new Email('Email sent to ' + order.email + ' for ' + order.product);
        });
    });