Javascript 使jQueryUI元素更加可重用

OOP新手。我目前在注册和登录表单中使用jQueryUI对话框。但是，我每次使用对话框时都会指定属性，从而违反了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');
  });
};

---

创建一个包含

.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);