Упрощение функции jQuery Dialog

Question

Поскольку я искал через Stackoverflow и Google, я не мог найти решение для упрощения моего кода (или, может быть, я не нашел точного условия поиска). Мне действительно кажется, что я не мог упростить код ниже.

Поскольку я новичок в этом поле, мне пришлось повторить все тот же код снова и снова, когда есть сходства, которые я могу комбинировать.

Ваша помощь очень ценится!

$('.detail-view').dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 600, 
    position: ['top', 150] }); 

$('.forgotpass').dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 400, 
    position: ['top', 150] }); 

$('.user0').load('php/usersetting.php').dialog({ 
    autoOpen: true, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: false, 
    modal: true, 
    height: 'auto', 
    width: 500, 
    position: ['top', 150], 
    open: function(){ 
    $(this).parent().find('.ui-dialog-titlebar-close').hide(); 
    } }); 

$('.user1').load('php/usersetting.php').dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    modal: true, 
    height: 'auto', 
    width: 500, 
    position: ['top', 100] }); 

$('.user2').load('php/usersetting.php').dialog({ 
    autoOpen: true, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 500, 
    position: ['top', 150], 
    open: function(){ 
    $(this).parent().find('.ui-dialog-titlebar-close').hide(); 
    } 
    }); 

Answer 1

Поскольку подавляющее большинство ваших вариантов одинаковы, простой ответ заключается в создании объекта опции по умолчанию:

var defaults = { 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 200, 
    position: ['top', 150] 
}; 

, а затем использовать $.extend с конкретными параметрами, которые вы хотите переопределить:

$('.detail-view').dialog($.extend({}, defaults, { 
    width: 600 
})); 
$('.forgotpass').dialog($.extend({}, defaults, { 
    width: 400 
})); 

Вы можете инкапсулировать это в функции:

function createDialog(selector, options) { 
    $(selector).dialog($.extend({}, defaults, options)); 
} 

createDialog('.detail-view', { 
    width: 600 
}); 
createDialog('.forgotpass', { 
    width: 400 
}); 

Или, конечно, если это простоwidth:

function createDialog(selector, width) { 
    $(selector).dialog($.extend({}, defaults, {width: width})); 
} 

createDialog('.detail-view', 600); 
createDialog('.forgotpass', 400); 

Answer 2

Создать объект, а затем передать его в каждом диалоге() функции: var dialog_properties = {autoOpen:false, drag able: false, ...};

затем использовать его во всех диалоге() функции которые аналогичны: $('.detailView').dialog(dialog_properties); $('.forgotPass').dialog(dialog_properties); ...