Question

我正在使用两个函数来打开一个SharePoint模式对话框，但是我发现在将来这种情况越来越多，为多个URL创建多个函数会导致开销。

我不熟悉使用“选项”。有关如何合并这两个函数的最佳实践吗？任何建议将不胜感激。谢谢！

<a href="#" onclick="OpenDashHelpDialog('Dashboard Help Desk Info');"><img src="/PublishingImages/help.png"></a>
<a href="#" onclick="OpenHRHelDeskpDialog('HR Help Desk Info');"><img src="/PublishingImages/help.png" </a>

function OpenHelpDeskDialog() {
  var options = {
    url: "/admin/Pages/IThelp.aspx",
    width: 275,
    height: 90,
    dialogReturnValueCallback: DialogCallback
  };
  SP.UI.ModalDialog.showModalDialog(options);
}

function OpenHRHelpDeskDialog() {
  var options = {
    url: "/admin/Pages/HRDesk.aspx",
    width: 400,
    height: 100,
    dialogReturnValueCallback: DialogCallback
  };
  SP.UI.ModalDialog.showModalDialog(options);
}

Answer 1

如果要整合事件处理程序，则需要将逻辑差异抽象到更高级别。在这种情况下，您可以使用data元素本身的a属性来存储width和height，以及href属性来存储网址。像这样：

<a href="/admin/Pages/IThelp.aspx" class="dialog-trigger" data-width="275" data-height="90">
  <img src="/PublishingImages/help.png" />
</a>
<a href="/admin/Pages/HRDesk.aspx" class="dialog-trigger" data-width="400" data-height="100">
  <img src="/PublishingImages/help.png" />
</a>

$('.dialog-trigger').click(function(e) {
  e.preventDefault();
  var $a = $(this);

  SP.UI.ModalDialog.showModalDialog({
    url: $a.attr('href'),
    width: $a.data('width'),
    height: $a.data('height'),
    dialogReturnValueCallback: DialogCallback
  });
});

请注意，我在jQuery中创建了这个示例，因为它是您问题中标记的内容。使用普通的JS可以轻松实现相同的功能，尽管我强烈建议您使用不显眼的事件处理程序而不是过时的（和丑陋的）on*事件属性。

当具有多个url参数时，将2个函数合并为1

1 个答案: