觀察者模式在ng（Angular）中的應用

在這個前端框架滿天飛的天下，angular MVVM 的模式確實火了一把，所以最近一直在學習ng，感悟頗多，填坑無數，今天終靜下心來打算更新自己久未變動的博客，做一做總結。

1、在ng中的觀察者模式：

　　觀察者模式已經有很多大牛的說明，不管從宏觀或微觀上都已概述其思想，這里在簡單說明下，使用觀察者是對外定義統一開放通知接口，當內部數據或對象發生改變時發送通知，發送給對應的觀察者接收，進行業務邏輯的簡單操作。在ng中實現觀察者模式的基礎上是我們建立不同作用域的情況下，總分為父級，子級，兄弟級，強大的ng在不同作用域之間數據傳遞或事件渲染過程中已經為我們定義好了方法：

• $emit只能向parent controller（父級controller）傳遞event與data
• $broadcast只能向child controller（子集controller）傳遞event與data

$scope.$broadcast("classify.change", { data: {} });//$emit與$broadcast用法相同

• $on用於接收event（事件對象，可獲取當前作用域，打log輸出試一試）與data（參數，可傳遞多個）

    $scope.$on('obj.change', function (event, data) {
        //todo excute function
        (function () { console.log('接收參數') }());
    });

 

通過這三個參數我們可以很好的將觀察者模式運用到項目中，以降低代碼耦合度，模塊之間各分職能。

 

2、Demo（基於具體主題觀察者模式）

• HTML部分：

<div class="main" ng-controller="productListCtrl">
　　<div class="r clearfix mt5">
　　　　<a class="r btn-like tc" href="javascript:;" ng-click="search(txtKeywords)">搜索</a>
　　　　<input type="text" class="r search-text" ng-model="txtKeywords" />
　　</div>    
　　<div class="sort">
        <form action="">
            <dl class="l clearfix" ng-init="selectOrder='';">
                <dt>排序：</dt>
                <dd ng-click="changeOrder('');">綜合</dd>
                <dd ng-click="changeOrder('VisitorVolume');">熱門</dd>
                <dd ng-click="changeOrder('CreateDate');">新品</dd>
                <dd ng-click="changeOrder('Price');">價格</dd>
            </dl>
        </form>
    </div>
    <div class="wrapper" ng-controller="productListItemCtrl">
        <div class="product-list ">
            <ul class="clearfix">
                <li ng-repeat="item in productList.DataList">
                    <div class="img-box">
                        <a href="javascript:;"><img ng-src="{{item.DefaultImage}}" alt="{{item.Title}}" /></a>
                    </div>
                    <div class="p-name" title="產品名稱">{{item.Title}}</div>
                    <div class="p-price">{{ item.Price }}</div>
                </li>
            </ul>
        </div>
    </div>
</div>

 

dom結構主要分為兩大塊（數據界面，變更數據界面），productListCtrl 包含 productListItemCtrl 形成子父作用域。

• JS部分：

//嚴格模式，很多同學不知道這句話什么意思O(∩_∩)O~
'use strict';

/**
*這里我將angular.modele注冊到了window.app下可直接調用
 * 事件處理原則，向下廣播，解耦
 */
app.controller('productListCtrl', ['$scope',function ($scope) {
     //搜索
    $scope.search = function (keywords) {
        $scope.$broadcast("data.change", { data: {} });
    };
    //排序
    $scope.changeOrder = function (orderType) {
        $scope.$broadcast("data.change", { 'sortColumn': orderType });
    };
}]).controller('productListItemCtrl', ['$scope', function ($scope) {
    $scope.productList={
　　　　Data:{};

　　}
    $scope.$on('data.change', function (event, data) {
        $scope.productList.Data=data;
        //todo excute function or data
        (function () { console.log('接收參數') }());
    });
}]);

這樣一個很簡單的觀察者模式就這樣形成了，很簡單吧，我們將數據作用域與影響數據作用域分離了出來，這樣在對於ng中的mvvm模式下，如果我們業務邏輯發生改變影響到數據層時，只需進行事件廣播，通知給數據作用域下的data.change事件，輕松就把代碼就行了解耦，代碼之間需要做的只是互相通知而已。

 

3：Last

　　前端的道路漫漫無際，還有很多需要進步，雖然作為一名.NET程序員，但自強不息，生命不止，技術的腳步就不停，長時間不寫博客，也委屈各位看官了。昨天是天津爆炸事故的頭七，祈福逝者安息，生者堅強。

     版權聲明：

 

　　本文由Tom原創並發布於博客園，歡迎轉載，未經本人同意必須保留此段聲明（否則保留追究責任的權利），且在文章頁面明顯位置給出原文鏈接，如有問題，可以通過[e-mail] 聯系我，非常感謝。原文鏈接:http://www.cnblogs.com/donettom