javascript - 简化多个 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
});

或者当然，如果它只是 宽度:

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

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