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等等。

JavaScript函数最小化？

1 个答案: