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

我的代码重复如下：

$("#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];
        }
    }
});

$（“#学校名称”）.autocomplete（“/ajax/campus_ajax.php”{
宽度：218，
延误：300，
selectFirst:false，
结果类：“ac\U结果类”，
加载类：“ac_加载”，
formatItem:函数（数据）
{
如果（数据[2]）
{ 
返回数据[0]+''+数据[2]+''；
}
其他的
{
返回数据[0]；
}
}
});
$（“#学校名称可选”）.autocomplete（“/ajax/campus_ajax.php”{
宽度：358，
延误：300，
selectFirst:false，
结果类：“ac_结果书”，
加载类：“ac_加载”，
formatItem:函数（数据）
{
如果（数据[2]）
{ 
返回数据[0]+''+数据[2]+''；
}
其他的
{
返回数据[0]；
}
}
});

---

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

不要使用匿名对象，而是将该对象保存到一个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;
}

---

把它分解成一个函数

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

function myFormatItem(data) {
...
}

schoolname自动完成（$（“#学校名称”），218）；
学校名称自动完成（$（“#学校名称可选”），358；
函数schoolNameAutocomplete（元素、宽度）{
element.autocomplete（“/ajax/campus\u ajax.php”{
宽度：宽度，
延误：300，
selectFirst:false，
结果类：“ac_结果书”，
加载类：“ac_加载”，
formatItem:函数（数据）
{
如果（数据[2]）
{ 
返回数据[0]+''+数据[2]+''；
}
其他的
{
返回数据[0]；
}
}
});
}

为formatItem处理程序创建一个通用函数，然后将其用作参考：

function doSomething(){

}
//...
formatItem: doSomething

这样，您只需要更改基本属性。

试试这个

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

var参数={
延误：300，
selectFirst:false，
加载类：“ac_加载”，
formatItem:函数（数据）
{
如果（数据[2]）
{
返回数据[0]+''+数据[2]+''；
}
其他的
{
返回数据[0]；
}
}
};
$（“#学校名称”）.autocomplete（“/ajax/campus_ajax.php”），$.extend（参数{
宽度：218，
结果类：“ac\U结果类”
}));
$（“#学校名称可选”）.autocomplete（“/ajax/campus_ajax.php”），$.extend（参数{
宽度：358，
结果类：“ac\U结果\U书”
}));

IMO，缩短此代码会降低其可读性，并将其作为DRY（请勿重复）范围之外的配置参数

话虽如此，要回答您的问题，您可以做两件快速的事情

首先，将

formatItem

分解为通用函数，而不是匿名函数

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

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

---

所以你不建议用这些方法来缩短它？我想这要看情况了。我喜欢尽可能坚持干燥的原则。但是，如前所述，当它使代码更难维护时，情况并非如此。如果你想缩短它，我当然支持我的答案。我也认为icktoofay是一个很好的答案。其他的都是相似的方法，或者证明了我的观点，即过于复杂化，IMO.+1好的方法-更好地封装相似性，而不会造成配置混乱。