Консолидация 2 функций в 1 при наличии нескольких параметров URL - PullRequest
Новая
       7

Консолидация 2 функций в 1 при наличии нескольких параметров URL

0 голосов
/ 22 мая 2018

Я использую две функции, чтобы открыть модальное диалоговое окно 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);
}

1 Ответ

0 голосов
/ 22 мая 2018

Если вы хотите объединить обработчики событий, вам необходимо абстрагировать логические различия на более высокий уровень.В этом случае вы можете использовать атрибуты data на самих элементах a для хранения width и height, а атрибут href для хранения URL.Примерно так: 

<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* атрибутами событий.

...