使Jquery UI元素更具可重用性

Question

New to OOP. I currently use the jQuery UI Dialog for both signup and login forms. However I violate DRY by assigning properties each time I use the dialog. I'm trying to figure out what the best approach is to reusing this element.

 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

Create an object that holds all of the arguments for the .dialog function and pas the object in.

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

---

Note: you should probably put var in front of signUpDialog and loginDialog like this:

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

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