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

時間 2019-11-22

原文原文鏈接

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

一、在ng中的觀察者模式：前端

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

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

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

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

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

經過這三個參數咱們能夠很好的將觀察者模式運用到項目中，以下降代碼耦合度，模塊之間各分職能。程序員

二、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事件，輕鬆就把代碼就好了解耦，代碼之間須要作的只是互相通知而已。app

3：Last框架

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

　　本文由Tom原創併發佈於博客園，歡迎轉載，未經本人贊成必須保留此段聲明（不然保留追究責任的權利），且在文章頁面明顯位置給出原文連接，若有問題，能夠經過419187544@qq.com 聯繫我，很是感謝。原文連接:http://www.cnblogs.com/donettom