Javascript跟踪函数数据

Question

I created this function:

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();
}

For some reason when I call this function:

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

The "action" is not defined, therefore is false . If I click on the next button:

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})

Than click back to the first one, action is set to:

tables/deleteCustomer/38

Instead of taking the default{} value (false) it keeps the one of the other button.

Here a fiddle: https://jsfiddle.net/mrweb/x3fLq6o5/1/

Answer 1

Your defaults object is global. To prevent creating global objects (plus other advantages) pay attention to the "use strict" mode.

As I see you are using jQuery then I promote the cloning objects technique by using the jQuery.extend() method.

Also I promote the use of IIFE to create isolated scopes, where you can specify the context in which your methods are linked.

Learn more about 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 */});

Also take into account that every time you invoke the showModal method you are rebinding new handlers to the click event. To prevent that, you can detach existing event handlers by calling the .off() method, eg

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