观察者模式在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