使用angularjs1.x构建前台开发框架（九）——弹窗【三】

野性酷女 2022-07-13 11:51 162阅读 0赞

前面两个章节分别介绍了如何在web工程中引入第三方弹出框组件以及组件API中的几个常用功能，接下来本章介绍一下如何对弹出框组件进行二次封装。

先来聊一下二次封装的意义：

通常一个web工程中会多次使用同一个第三方组件（以弹出框组件为例，在实际开发中一般不会只有一处需要使用弹出框），而为了保持web工程中界面风格一致，则会要求使用第三方组件时的视觉效果和交互动作保持统一（弹出框的大小、背景、取消关闭按钮等等都是可以通过API来进行配置，但在同一个项目中，不同页面定义的弹出框往往会要求视觉效果和交互动作保持一致），而要做到这一点最好的方法就是对需要使用的第三方组件进行二次封装（当然也可以强行要求每处使用的弹出框保持一致，不过一旦弹出框的基本属性需要调整，那么统一一把所需的代价是不可想象的）。

先看一下新增的对第三方弹出框组件进行二次封装的服务位置（笔者的自定义服务或二次封装的服务都放在framework的service目录下，意为框架提供的服务能力）：

![20170108160110031][]

下面看一下在新增的modalService.js中是如何对第三方弹出框组件进行二次封装的：

/**
     * Created by 李庆 on 2017/1/8.
     */
    
    define(["jquery"], function($){
        var service = ["$modal",function($modal){
            this.show = function(item){
                var modalCtrl = function($scope,$modalInstance,item){
                    $scope.item = item;
                    $scope.close = function(){
                        $modalInstance.close();
                    }
                };
    
                var modal = $modal.open({
                    templateUrl:"framework/views/modal.html",
                    controller:modalCtrl,
                    resolve:{
                        "item":function(){
                            return item;
                        }
                    }
                });
                return modal;
            }
        }];
        return service;
    });

这部分代码和上一章的弹出框代码基本一致，唯一的区别就是把整个弹出框的定义和创建放在了我们新增service的show方法里，供外部调用。

要注意一点，我们希望传递给弹出框的信息（在弹出框代码里是resolve里的参数item），可以通过show方法的参数item传入。

接下来是在框架module对应的framework.js中注册这个新增的service：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["angular","angular-ui-router","../framework/config/frameworkConfig",
            "../framework/controller/frameworkCtrl","../framework/service/maskService",
            "ui-bootstrap-tpls-0.11.0.min","../framework/service/modalService"],
        function(angular,router,frameworkConfig,frameworkCtrl,maskService,uiBootstarp,modalService){
            var dependency = [
                "ng",
                "ui.router",
                frameworkConfig.name,
                "ui.bootstrap"
            ];
            var framework = angular.module("framework",dependency);
            framework.controller("frameworkCtrl",frameworkCtrl);
            framework.service("maskService",maskService);
            framework.service("modalService",modalService);
            return framework;
        }
    );

变更内容如下：

![20170108210206277][]

然后是在业务模块frameworkCtrl.js中对新增弹出框service的使用：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["language"],function(i18n){
        //var frameworkControl=["$rootScope","$scope","$modal",function($rootScope,$scope,$modal){
        var frameworkControl=["$rootScope","$scope","modalService",function($rootScope,$scope,modalService){
            $rootScope.menus={
                "url":"framework/views/menu.html"
            };
            $scope.i18n = i18n;
            $scope.item = "it is a message";
    
            $scope.change = function(language){
                var expires = new Date(9999,12,31).toUTCString();
                document.cookie = "lan="+language+"; "+expires;
    
                location.reload();
            };
    
            //var modalController = function($scope, $modalInstance, item){
            //    $scope.item = item;
            //};
            //
            //$scope.modal = function(){
            //    $modal.open({
            //        templateUrl:"framework/views/modal.html",
            //        backdrop:"static",
            //        controller:modalController,
            //        resolve:{
            //            "item":function(){
            //                return $scope.item;
            //            }
            //        }
            //    });
            //}
    
            $scope.modal = function() {
                modalService.show("new modal").result.then(function (result) {
                    console.log("enter close");
                });
            }
        }];
        return frameworkControl;
    })

变更内容如下：

![20170108211259579][]

这样看代码就简洁多了，每次调需要生成一个弹出框，几行代码就OK了，还不用担心弹出框样式或者功能调整了需要全局过滤处理的问题。

备注：这里弹出框在关闭时会调用$modal服务的result属性对应的行为（即后面的匿名函数，利用result属性我们可以定义弹出框在关闭时的回调），因为我们在二次封装的时候并没有对原生$modal对象的result属性进行处理，所以可以直接调用。

最后我们来看一下效果，点击弹窗时：

![20170108212129499][]

可以看到我们传给弹出框的信息（即调用modalService服务show方法时传递的new modal字符串）在页面上正常打印了，弹出框功能正常。

然后点击弹出框的关闭按钮：

![20170108212336518][]

可以看到在控制台打印了enter close，即我们在result属性中定义的匿名函数也正常执行了。至此，一个简单的对第三方组件进行二次封装的过程就介绍完毕了。

[20170108160110031]: /images/20220713/08786133420742989a60e73fe69ae48f.png
[20170108210206277]: /images/20220713/3cf22c9e043d49c18b132148f3bd4168.png
[20170108211259579]: /images/20220713/3dfebcca8de843f7a0f10c5ba6f12c54.png
[20170108212129499]: /images/20220713/ef7c2f964fb34abc869be3ce49e9e46d.png
[20170108212336518]: /images/20220713/1e2398905a9b4459bf363686bfef7544.png