Question

我的代码重复如下：

$("#school-name").autocomplete("/ajax/campus_ajax.php", {
    width: 218,
    delay: 300,
    selectFirst: false,
    resultsClass: 'ac_results_class',
    loadingClass: 'ac_loading',
    formatItem: function(data)
    {
        if (data[2]) 
        { 
            return data[0] + '<small>' + data[2] + '</small>'; 
        }
        else
        {
            return data[0];
        }
    }
});

$("#school-name-optional").autocomplete("/ajax/campus_ajax.php", {
    width: 358,
    delay: 300,
    selectFirst: false,
    resultsClass: 'ac_results_book',
    loadingClass: 'ac_loading',
    formatItem: function(data)
    {
        if (data[2]) 
        { 
            return data[0] + '<small>' + data[2] + '</small>'; 
        }
        else
        {
            return data[0];
        }
    }
});

如您所见，两个事件侦听器仅在几个参数上有所不同。我该如何缩短此代码？

Answer 1

将其分解为一个函数。

schoolNameAutocomplete($("#school-name"), 218);
schoolNameAutocomplete($("#school-name-optional"), 358);
function schoolNameAutocomplete(element, width) {
    element.autocomplete("/ajax/campus_ajax.php", {
        width: width,
        delay: 300,
        selectFirst: false,
        resultsClass: 'ac_results_book',
        loadingClass: 'ac_loading',
        formatItem: function(data)
        {
            if (data[2]) 
            { 
                return data[0] + '<small>' + data[2] + '</small>'; 
            }
            else
            {
                return data[0];
            }
        }
    });
}

Answer 2

IMO，缩短此代码会降低其可读性，并使其成为 DRY 范围之外的配置参数（不要重复自己）。

话虽如此，为了回答你的问题，你可以做两件事。

首先，将formatItem分解为通用函数而不是匿名函数。

function myFormatItem(data) {
...
}

然后使用：

formatItem: myFormatItem

其次，您可以创建基本配置选项，然后扩展它们。

var config = {width: 218,
        delay: 300,
        selectFirst: false,
        resultsClass: 'ac_results_book',
        loadingClass: 'ac_loading',
        formatItem: myFormatItem}

$("#school-name").autocomplete("/ajax/campus_ajax.php", config);

var config2 = config;
config2.width = 358;
$("#school-name").autocomplete("/ajax/campus_ajax.php", config2);

Answer 3

不是使用匿名对象，而是将对象保存到var并根据不同的调用进行相应的修改。

我为jQuery UI的对话框功能做了一个外观，我必须做类似的事情：

function createDefaultOptions(type) {
    var 
    options = {
        dialogClass: 'webDialog',
        width: 300,
        callback: function() { },
        modal: true,
        draggable: false,
        resizable: false,
        closeText: '',
        zIndex: 10000,
        hide: { effect: 'slide', duration: 500 }
    },

    okButton = {
        OK: function() {
            options.callback({ button: 'OK' });
            $(this).dialog('close');
        }
    },

    yesNoButtons = {
        Yes: function() {
            options.callback({ button: 'Yes' });
            $(this).dialog('close');
        },
        No: function() {
            options.callback({ button: 'No' });
            $(this).dialog('close');
        }
    };

    switch (type) {
        case 'general':
            options.title = 'Message';
            options.buttons = okButton;
            break;
        case 'error':
            options.title = 'Error';
            options.buttons = okButton;
            options.dialogClass += ' webDialogError';
            break;
        case 'success':
            options.title = 'Success';
            options.buttons = okButton;
            options.dialogClass += ' webDialogSuccess';
            break;
        case 'confirm':
            options.title = 'Confirm';
            options.buttons = yesNoButtons;
            options.dialogClass += ' webDialogConfirm';
            break;
    }

    return options;
}

Answer 4

为formatItem处理程序创建一个泛型函数，然后将其用作引用：

function doSomething(){

}
//...
formatItem: doSomething

这样你唯一需要改变的就是基本属性。

Answer 5

试试这个。

var params = {
    delay: 300,
    selectFirst: false,
    loadingClass: 'ac_loading',
    formatItem: function(data)
    {
        if (data[2])
        {
            return data[0] + '<small>' + data[2] + '</small>';
        }
        else
        {
            return data[0];
        }
    }
};

$("#school-name").autocomplete("/ajax/campus_ajax.php", $.extend(params, {
    width: 218,
    resultsClass: 'ac_results_class'
}));

$("#school-name-optional").autocomplete("/ajax/campus_ajax.php", $.extend(params, {
    width: 358,
    resultsClass: 'ac_results_book'
}));

帮助缩短重复的jQuery事件监听器

5 个答案: