调用在JavaScript/jQuery中传递给函数的配置对象的方法

Calling methods of a configuration object that is passed to a function in JavaScript/jQuery

本文关键字:函数 配置 方法 对象 JavaScript jQuery 调用      更新时间:2023-09-26

我有一个函数,它接受一个配置对象,然后生成一个带有jQuery UI的模式对话框,如下所示:

function modalDialog(settings) {
    var options = $.extend({
        selector: '.dialog',                        // the dialog element selector 
        disabled: false,                            // disables(true) or enables (false) the dialog
        autoOpen: false,                            // dialog opens automatically when called (true), (false) dialog hidden until .dialog(open) method called 
        closeOnEscape: true,                        // dialog closes when focused and ESC key pressed
        closeText: 'close',                         // specifies text for close button
        draggable: false,                           // (true) dialog draggable by the title bar
        resizable: false,                           // dialog is resizable
        height: 'auto',                             // height of dialog in px
        minHeight: false,                           // min-height in px
        maxHeight: false,                           // max-height in px
        width: 300,                                 // width of dialog in px
        minWidth: 150,                              // min-width in px
        maxWidth: false,                            // max-width in px          
        modal: true,                                // disables other items on page
        hide: null,                                 // the effect to be used when dialog is closed
        show: null,                                 // the effect to be used when dialog is opened
        position: 'center',                         // specifies where dialog should be displayed: single string, array of co-ordiantes, array of string values
        title: '',                                  // dialog title.  Any valid HTML may be used
        zIndex: 1000,                               // starting z-index for the dialog
        stack: true                                 // specifies if dialogs will stack on other dialogs
    }, settings || {});
    $(options.selector).dialog({
        disabled: options.disabled,                         
        autoOpen: options.autoOpen,                          
        closeOnEscape: options.closeOnEscape,                       
        closeText: options.closeText,                           
        draggable: options.draggable,                           
        resizable: options.resizable,                           
        height: options.height,                             
        minHeight: options.minHeight,                           
        maxHeight: options.maxHeight,                           
        width: options.width,                                   
        minWidth: options.minWidth,                             
        maxWidth: options.maxWidth,                                 
        modal: options.modal,                               
        hide: options.hide,                                 
        show: options.show,                                 
        position: options.position,                         
        title: options.title,                                   
        zIndex: options.zIndex,                             
        stack: options.stack,
        create: function(event, ui){
            if (typeof options.createCall == 'function') {
                options.createCall.call(this);
            }           
        },
        open: function(event, ui){
            if (typeof options.openCall == 'function') {
                options.openCall.call(this);
            }           
        },
        beforeClose: function(event, ui){
            if (typeof options.beforeCloseCall == 'function') {
                options.beforeCloseCall.call(this);
            }           
        },  
        close: function(event, ui){
            if (typeof options.closeCall == 'function') {
                options.closeCall.call(this);
            }           
        },
        focus: function(event, ui){
            if (typeof options.focusCall == 'function') {
                options.focusCall.call(this);
            }           
        }       
    }); 
}

我正在进行的项目中可能会有很多模式,所以我认为将配置对象存储在对象文字中而不是动态生成它们会很整洁。类似这样的东西:

icisSite.modalStore = {
    tradeFlowGraph: {
        selector: '.rtx-TradeFlowGraphs',
        title: 'Fertilizer Trade Flow graphs',
        width: 800,
        openCall: function(){
            carouselLink
            .eq(0)
            .trigger('click');
        }
    }
}

然后可以通过传递对存储对象的引用来创建模态:

modalDialog(icisSite.modalStore.tradeFlowGraph);

我遇到的问题是,当以这种方式传递给modalDialog函数时,没有调用openCall方法。当配置对象像这样传递时,它确实起作用,我不知道为什么:

modalDialog({
    selector: '.rtx-TradeFlowGraphs',
    title: 'Fertilizer Trade Flow graphs',
    width: 800,
    openCall: function(){
        carouselLink
        .eq(0)
        .trigger('click');
    }   
});

虽然像这样传递参数不是问题,但最好将它们集中存储在始终可用的对象文字中,而不是临时创建和传递对象。

icisSite.modalStore对象文字引入jQuery作用域似乎解决了这个问题。

所以在工厂里包装它的功能是这样的:

$(function(){

icisSite.modalStore={tradeFlowGraph:{
选择器:'.rtx TradeFlowGraphs',
标题:"化肥交易流程图",宽度:800,
openCall:function(){carouselLink.eq(0).trigger('click');}}});