JavaScript 函数最小化？

Question

有没有办法在函数/调用过程相同的情况下最小化 JavaScript 函数编码？我不完全确定解释它的好方法，但这是下面的代码......

JavaScript:

$(function() {
$( '#CartDialog' ).dialog( {
    autoOpen:false,
    title:"Shopping Cart",
    width:600,
    minWidth:600,
    maxWidth:600,
    minHeight:300,
    maxHeight:600,
    modal:true,
    show:{effect: "blind"},
    hide:{effect: "fade"}
    });
$('#CartLink').on( 'click', function() {
    $( '#CartDialog' ).dialog('open');
});
});
$(function() {
$( '#LoginDialog' ).dialog({
    autoOpen:false,
    title:"Login / Register",
    width:650,
    maxWidth:650,
    height:250,
    maxHeight:600,
    resizable:false,
    modal:true,
    show:{effect: "blind"},
    hide:{effect: "fade"}
});
$('#LoginLink').on( 'click', function() {
    $( '#LoginDialog' ).dialog('open');
});
});
$(function() {
$( '#LogoutDialog' ).dialog( {
    autoOpen:false,
    title:"Logout Confirmation",
    width:250,
    height:250,
    resizable:false,
    modal:true,
    show:{effect: "blind"},
    hide:{effect: "fade"}
    });
$('#LogoutDialog').on( 'click', function() {
    $( '#LogoutDialog' ).dialog('open');
});
});
$(function() {
$( '#MyAccountDialog' ).dialog( {
    autoOpen:false,
    title:"Login / Register",
    width:600,
    minWidth:600,
    maxWidth:600,
    minHeight:300,
    maxHeight:600,
    modal:true
    });
$('#MyAccountDialog').on( 'click', function() {
    $( '#MyAccountDialog' ).dialog('open');
});
});

主要文档思路:

<div class="TopShortLinks" id"CartDialog"></div>
<div class="TopShortLinks" id"LoginDialog"></div>
<div class="TopShortLinks" id"LogoutDialog"></div>
<div class="TopShortLinks" id"MyAccountDialog"></div>

我一直在尝试修改调用类的想法，然后使用 div id 向中央 javascript 函数提出建议(如果可能)以确定要显示的正确数据，因为目前它看起来非常重复.

希望它很容易理解。

Answer 1

我建议做的是定义一个将用于启动所有对话窗口的函数:

function show_dialog( selector, settings ){
  var default_settings = {
    modal: true,
    autoOpen: false,
    minWidth:600,
    minHeight:30,
    ...
  }
  $.extend( default_settings, settings );
  $( selector ).dialog( default_settings );
}

您将传递相关 DOM 元素的选择器和一个包含每个对话框的所有唯一设置的对象。在该函数中，定义了一个 default_settings 对象 - 它包含在所有调用中都相同的所有设置，但传递给该函数的设置对象可以使用 $.extend() function 覆盖这些默认值。 “合并”对象。

示例用法:

show_dialog( "#CartDialog", {
    minWidth:700,
    maxWidth:500,
    minHeight:100,
    maxHeight:800
} );

此函数调用将使用 #CartDialog 作为其选择器，并使用传递的值覆盖默认的 minWidth 和 minHeight。 show_dialog 中定义的所有其他设置将保持不变，modal、autoOpen 等...