Question

我创建了这个函数：

window.showModal = function(args){
    var defaults = {
        type: 'success',
        title: 'Informazioni',
        info: 'Testo di informazioni',
        cancel: 'Annulla',
        nocancel: false,
        confirm: 'Ok',
        action: false,
        isAjax: false,
        goTo: false,
    }

    args = args || defaults;
    for (var opt in defaults) {
        if (defaults.hasOwnProperty(opt) && !args.hasOwnProperty(opt)) {
            args[opt] = defaults[opt];
        }
    }

    alert(args['action'])

    $('#modal_generic_cancel').show();

    $('#modal_generic_title').addClass('uk-text-'+args['type']).html(args['title']);
    $('#modal_generic_info').html(args['info']);
    $('#modal_generic_cancel').html(args['cancel']);
    $('#modal_generic_confirm').html(args['confirm']);

    if(args['nocancel']){
        $('#modal_generic_cancel').hide();
    }

    if(args['action'] == false){
        $('#modal_generic_confirm').addClass('uk-modal-close');
        $('#modal_generic_cancel').hide();
    }

    if(args['action'] && !args['isAjax']){
        $('#modal_generic_confirm').click(function(){
            window.location = base_url()+args['goTo'];
        });
    }
    if(args['action'] && args['isAjax']){
        $('#modal_generic_confirm').click(function(){
            alert(args['action'])
        });
    }

    UIkit.modal("#modal_generic").show();
}

出于某种原因，当我调用此函数时：

showModal({type:'danger', title:'Errore', info: "Funzione modifica cliente non ancora implementata."});

未定义“操作”，因此为false。如果我点击下一个按钮：

showModal({type:'danger', title:'Eliminare il cliente?', info:'Siete sicuri di voler eliminare il cliente selezionato?', cancel:'No', confirm:'Si, elimina', action:'tables/deleteCustomer/'+customer_id, isAjax:true, goTo:'main/show/'+customer_id})

点击返回第一个，action设置为：

tables/deleteCustomer/38

不是取default{}值（false）而是保留另一个按钮。

这里有一个小提琴：https://jsfiddle.net/mrweb/x3fLq6o5/1/

Answer 1

您的defaults对象是全局的。要防止创建全局对象（以及其他优势），请注意 "use strict" 模式。

我认为您正在使用 jQuery ，然后使用 jQuery.extend() 方法推广克隆对象技术。

此外，我还推广使用 IIFE 来创建隔离范围，您可以在其中指定方法链接的上下文。

详细了解 MODULE PATTERN

//begin IIFE
(function (context) {

    "use strict";

    var defaults = {
        type: 'success',
        title: 'Informazioni',
        info: 'Testo di informazioni',
        cancel: 'Annulla',
        nocancel: false,
        confirm: 'Ok',
        action: false,
        isAjax: false,
        goTo: false
    };

    context.showModal = function (args) {
        //Merge the contents of two or more objects together into the first object;
        //that is, defaults and args into the options
        var options = $.extend({}, defaults, args);

        //TODO: use options as the new options passed to the function
        //e.g. options.isAjax; options.goTo, ...
    };

}(window));
//window is imported as the context object;
//you can switch the window object to your own namespace object.

//usage
window.showModal({/* options */});

另请注意，每次调用showModal方法时，您都会 重新绑定 新click事件的处理程序。为了防止这种情况，您可以通过调用 .off() 方法来分离现有的事件处理程序，例如

$('#modal_generic_confirm').off("click.myns").on("click.myns", eventHandler);

Javascript跟踪功能数据

1 个答案: