使用 JavaScript closure、apply 函数和 Angular Service 实现可重用性

引言

• 任务：在项目中删除每个组件时显示确认弹出框。
• 挑战：所有不同的组件具有不同的删除函数，且参数集不同。

Using the Code

解决方案

步骤 1

创建一个 Angular Service 和通用的确认弹出 HTML，因为我们希望在整个 Angular 应用程序中共享这种相似的确认消息功能。

Angular Service

AngularApplicationModulePointer.service('ConfirmationService', function (ngDialog) {

    //Settings of the Delete Confirmation Popup
    var DeletePopUpConfiguration = {
        template: '/app/views/confirmationPopup.html',
        controller: function ($scope, ConfirmationService) {
                        $scope.confirmationPopupModel = {
                PopUpTitle: ConfirmationService.PopUpTitle, 
                ConfirmationMessage: ConfirmationService.ConfirmationMessage,
                callbackFuncExecute: function () { ConfirmationService.callbackFuncExecute(); }, 
                closeConfirmationPopup: function () { ConfirmationService.closeConfirmationPopup(); },
                ConfirmButtonText: ConfirmationService.ConfirmButtonText, 
                DenyButtonText: ConfirmationService.DenyButtonText
            };
},
        className: 'ngdialog-theme-plain',
        width: 500,
        showClose: true,
        closeByDocument: false,
        closeByEscape: false,
    };

//Variable to choose the popup confirmation message, is in fact the keyword of MessageDictionary object
    this.messageType = '';
    
//Dictionary of all popup confirmation messages
    var MessageDictionary =
    {
        MessageA: "Are you sure you want to delete component A?",
        MessageB: "Are you sure you want to delete component B?",
    };
//To select validation messages based on the keywords
    var getMessage = function (messageType)
    {
        var message = MessageDictionary[messageType];
        return message;
    };

//Open common confirmation Message Pop-up and set/bind all the properties and functions
//parameters : is Array of input parameters that the delete callback function, 
//specific for that module, accepts as input. It should be in the same order 
//as the input parameters of the delete function.
//The callback function comes first and the array of parameters comes second always

    this.openConfirmationPopup = function (callbackFunction, callbackFunctionparameters) {
        this.Message = getMessage(this.messageType);
        this.callbackFunction = callbackFunction;
        this.funcParameters = callbackFunctionparameters;
        this.DeletePopUpPointer = ngDialog.open(DeletePopUpConfiguration);
    };

//To execute the Delete callback function of the module which passed the control here
    this.callbackFuncExecute = function () {
        var callbackFunction = this.callbackFunction;
        var funcParameters = this.funcParameters;
        callbackFunction.apply(this, funcParameters);
       this.DeletePopUpPointer.close();
    };

    //Close the common confirmation Message Pop-up
    this.closeConfirmationPopup = function () {
        this.DeletePopUpPointer.close();
    }; 
});

/app/views/confirmationPopup.html

<div>
<div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <h4>{{confirmationPopupModel.PopUpTitle}}</h4>
                </div>
            </div>
            <div class="row">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <p style="line-height: 20px;">
                            {{confirmationPopupModel.ConfirmationMessage}}<br />
                        </p>
                    </div>
                </div>
            </div>
            <div>
                <button class="btn btn-blue" type="button" 
                ng-click="confirmationPopupModel.callbackFuncExecute()">
                {{confirmationPopupModel.ConfirmButtonText}}</button>
                <button type="button" class="ngdialog-button btn btn-light-grey" 
                ng-click="confirmationPopupModel.closeConfirmationPopup()">
                {{confirmationPopupModel.DenyButtonText}}</button>
            </div>
        </div>

步骤 2：使用创建的 Angular Service

ComponentA.html

<button type="button" title="Delete" class="btn btn-blue" 
ng-click="vm.ComponentAModel.ConfirmDelete(param1,param2)">Delete</button>

ComponentACtrl.js

AngularApplicationModulePointer.Controller('ComponentAController', 
['$scope', '$q', 'ngDialog','ConfirmationService',
function ComponentAController($scope, $q, ngDialog, ConfirmationService) {
var vm= this;
vm.ComponentAModel= {

// Component delete function of this controller.
        DeleteFunction: function (param1,param2) {
// code to delete component
},

// show popup When delete button is clicked .
        ConfirmDelete: function (param1,param2) {
            ConfirmationService.PopUpTitle = "Delete Component A";
            ConfirmationService.messageType = "MessageA";
            ConfirmationService.ConfirmButtonText = "Yes";
            ConfirmationService.DenyButtonText = "No";
            //Array of input parameters that the delete function "vm.ComponentAModel.DeleteFunction" 
            //accepts as input, in the same order as the function definition.
            var paramArray = [param1,param2];
            //Input parameters passed are the delete function to execute and the 
            //array of parameters that delete function accepts. 
            //The function Name comes first and the array of parameters comes second        
 ConfirmationService.openConfirmationPopup(vm.ComponentAModel.DeleteFunction,paramArray);
                   },
}

return vm;
});

代码流程如下：

1. 当点击 ComponentA.html 上的删除按钮时，该函数使用 Angular Service 变量设置弹出框标题、确认消息类型和按钮文本。
2. 然后在 paramArray 中，我们捕获 Delete 函数接受的所有参数，顺序与 Delete 函数的输入参数顺序相同。
3. 然后我们调用函数来打开确认弹出框，并将 delete 函数作为 closure，paramArray 作为第二个输入参数。
4. 现在，打开弹出框函数将设置/绑定所有字段和函数与确认弹出框。然后打开弹出框。
5. 如果用户点击“是”，则会调用 callbackFuncExecute()。
6. callbackFuncExecute() 现在使用 JavaScript apply() 将 callbackFunction（DeleteFunction）与 funcParameters（paramArray）绑定，并执行 DeleteFunction。

注意：ngDialog 是用于弹出框的第三方 js。

关注点

Angular Service、JavaScript closure 和 apply() 的组合使我们能够在它们的作用域之外执行具有不同签名的函数。

历史

• 初次发布