Javascript 跟踪函数数据

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

它不采用默认{}值 (false)，而是保留另一个按钮。

这里有一个 fiddle :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 方法时，您都会重新绑定(bind)新处理程序到 click 事件。为了防止这种情况，您可以通过调用 .off() 来分离现有的事件处理程序。 方法，例如

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