使Jquery UI元素更具可重用性

Question

OOP新手。我目前使用jQuery UI对话框进行注册和登录表单。但是，每次使用对话框时，我都会通过分配属性来违反DRY。我试图找出重用这个元素的最佳方法。

 signUpDialog = $('.js-sign-up-dialog').dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); }
  });

  // dialog for login
   loginDialog = $('.js-login-dialog').dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); }
  });

  // event hunder for click on sign-up button
  $(document).on('click','.js-join-button', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    signUpDialog.dialog('open');
  });

  // event hunder for click on log-in button
  $(document).on('click','.js-login-button', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    loginDialog.dialog('open');
  });
};

Answer 1

创建一个包含.dialog函数的所有参数的对象，并将该对象传入。

var dialogParamObj = {
    autoOpen: false,
    height: 300,
    width: 350,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
};

signUpDialog = $('.js-sign-up-dialog').dialog(dialogParamObj);

loginDialog = $('.js-login-dialog').dialog(dialogParamObj);

---

注意：您应该将var放在signUpDialog和loginDialog之前，如下所示：

var signUpDialog = $('.js-sign-up-dialog').dialog(dialogParamObj);

var loginDialog = $('.js-login-dialog').dialog(dialogParamObj);