观察者模式在ng（Angular）中的应用

时间：2021-04-30 08:59:15

在这个前端框架满天飞的天下，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原创并发布于博客园，欢迎转载，未经本人同意必须保留此段声明（否则保留追究责任的权利），且在文章页面明显位置给出原文链接，如有问题，可以通过419187544@qq.com 联系我，非常感谢。原文链接:http://www.cnblogs.com/donettom

相关文章