AngularJS中介者模式例項

Darren Ji發表於2016-01-27
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   = 'brett.shollenberger@gmail.com';
        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   = 'brett.shollenberger@gmail.com';
            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);
        });
    });

 

相關文章