使用angularjs1.x构建前台开发框架（五）——掩膜的实现

冷不防 2022-07-15 06:08 196阅读 0赞

在web应用中，存在用户发起请求但必须等待服务端响应后才允许继续进行交互的情况（最典型的例子就是一个复杂表单的提交，如果在服务端未响应前不禁用用户的操作，一方面可能导致重复提交增加服务端处理压力，另一方面则可能影响web界面的权限控制——比如修改表单的行为应该在创建表单之后），而掩膜可以帮助我们实现让用户在服务端未响应前无法进行其他操作。

那么，什么是掩膜？按笔者的理解，掩膜是一个由前台逻辑控制生命周期且不受用户控制的弹出框。

首先，我们来分析一下掩膜的几个特性：

1.掩膜是全局通用的。通常web应用都会有多处需要禁用用户操作的地方，因此掩膜功能应定义为一个全局通用的服务（而不是一个页面需要使用掩膜就定义一个）。

2.掩膜是全局唯一的。一个显示的掩膜就可以禁用用户操作，在掩膜上再加一个掩膜没有意义，因此掩膜服务应该是单例的。

接下来说明一下如何在之前提供的前台开发框架基础上实现掩膜服务。

/**
     * Created by 李庆 on 2016/11/5.
     */
    define(["jquery"],function($){
        var service = function(){
            this.displayFlag = false;//掩膜当前的显示状态，false表示隐藏，true表示显示
    
            //掩膜div块
            this.background =
                $('<div unselectable="on" style="-moz-user-select: none;-webkit-user-select: none;"></div>')
                    .css({
                        "z-index":10000000000,//图层显示优先级，表示掩膜显示优先级最高
                        "background":"#000 50% 50% repeat-x",//背景色，相对父节点的长宽比以及在x轴方向重复
                        "opacity":".30",//透明度
                        "filter":"Alpha(Opacity=30)",//滤镜
                        "position":"fixed",
                        "top":0,
                        "left":0,
                        "width":"100%",
                        "height":"100%"
                    });
    
            //掩膜显示信息div块
            this.loading = $('<div id="loading"><div id="message"></div></div>')
                .css({
                    "z-index":10000000001
                });
    
            //显示掩膜调用函数，info为掩膜显示的信息，可以为空
            this.show = function(info){
                if(!this.displayFlag){
                    this.displayFlag = true;
                    $("body").append(this.background).append(this.loading);
                    var loading = $("#loading");
                    if(info){
                        loading.find("#message").text(info);
                    }
                    loading.css({
                        "position":"fixed",
                        "top":"50%",
                        "left":"50%",
                        "margin-left":0,
                        "margin-top":0
                    })
                }else{
                    var loading = $("#loading");
                    if(info){
                        loading.find("#message").text(info);
                    }
                }
            };
    
            //隐藏掩膜调用函数
            this.hide = function(){
                this.background.remove();
                this.loading.remove();
                this.displayFlag = false;
            };
        };
        return new service;
    });

新增的掩膜服务（maskService.js），定义了掩膜、掩膜显示和掩膜隐藏功能（支持自定义掩膜显示信息），掩膜service在工程中位置如下（所有的全局通用服务建议都放在该目录下）：

![20161105135630711][]

然后我们让c2路由的request按钮在点击时触发掩膜，当请求结束时隐藏掩膜，变更后的c2.js：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["jquery","../../../framework/service/httpService","../../../framework/service/maskService"],function($,httpService,maskService){
        var c2Controller = function($scope){
            $scope.test = function(){
                console.log("enter controller");
            };
    
            $scope.getData = function(){
                maskService.show("get data");
                $.ajax({
                   "type":"GET",
                    "contentType":"application/json;charset=UTF-8",
                    //修改前为"url":"mock/test.json",
                    "url":httpService.getUrl("GET","/nova/test.json"),
                    "success":function(data){
                        console.log(JSON.stringify(data));
                        maskService.hide();
                    },
                    "error":function(data){
                        console.log("error");
                    }
                });
            }
        };
        return c2Controller;
    });

变更部分代码如下：

![20161105144230684][]

访问c2路由并点击request按钮（注意要把httpService.js的打桩标识置为true）：

![20161105144610826][]

可以看到掩膜一闪而过，下面我们让掩膜的隐藏延迟几秒触发，方便我们来观察掩膜，变更后的c2.js：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["jquery","../../../framework/service/httpService","../../../framework/service/maskService"],function($,httpService,maskService){
        var c2Controller = function($scope){
            $scope.test = function(){
                console.log("enter controller");
            };
    
            $scope.getData = function(){
                maskService.show("get data");
                $.ajax({
                    "type":"GET",
                    "contentType":"application/json;charset=UTF-8",
                    //修改前为"url":"mock/test.json",
                    "url":httpService.getUrl("GET","/nova/test.json"),
                    "success":function(data){
                        console.log(JSON.stringify(data));
                        setTimeout(function(){
                            maskService.hide();
                        },6000);
                    },
                    "error":function(data){
                        console.log("error");
                    }
                });
            }
        };
        return c2Controller;
    });

变更部分代码如下：

![20161105150236211][]

再访问c2路由并点击request按钮：

![20161105150408881][]

在页面中央显示了我们显示掩膜时传入的字符串，且当掩膜显示时，所有的路由和按钮均无法操作，这样就达到了让用户在服务端未响应前无法进行其他操作的目的。

[20161105135630711]: /images/20220715/fc6ce24ba37746b7a1bb6b4795277a8c.png
[20161105144230684]: /images/20220715/e0c2d96b4bbe4195a9a8332f75e71212.png
[20161105144610826]: /images/20220715/f22eac1466c8487c89510415315fc229.png
[20161105150236211]: /images/20220715/7622ce11815e40ba884734af472fe0e2.png
[20161105150408881]: /images/20220715/fcef7c3cb57946f788fba1cd7427ec3b.png