jQuery Dialog Settings

Question

The goal of the code is to

• initialize a Dialog with settings
  • make sure the object is reusable
• Setup the options to reuse the code

I'm not quite sure if this is overkill, or I am going about this problem in the entirely wrong way. Any input would be appreciated.

var myDialog = myDialog || (function() {

  var options = {
    title: 'Attention',
    msg: 'Message Here',
    focusOn: ''
  }

    function show(opts) {

      options = $.extend({}, options, opts);

      $('<p>' + options.msg + '</p>').dialog({
        title: options.title,
        modal: true,
        draggable: false,
        show: {
          effect: "fade",
          duration: 500
        },
        hide: {
          effect: "fade",
          duration: 200
        },
        buttons: {
          'Close': function() {
            $(this).dialog("close");
          }
        },
        close: function() {
          if (options.focusOn.length !== 0) {
            $(options.focusOn).focus()
          }
          $(this).dialog("destroy");
        }
      });
    }

    function updateOptions(opts) {
      options = $.extend({}, options, opts);
    }

  return {
    fire: show,
    options: updateOptions
  };

}());

myDialog.fire({
  msg: 'Hello there',
  focusOn: '#test'
});

Answer 1

It is already a good attempt at making better-looking code. Just a few improvement:

1. Declare all private functions one-by-one with declaring that individual just like you declare your variable (see jQuery code).

2. There is no need for the updateOptions() method; we don't need it.

var myDialog = myDialog || (function () {

    var options = {
        title: 'Attention',
        msg: 'Message Here',
        focusOn: ''
    }

    var show = function(opts) {
            options = $.extend({}, options, opts);
            $('<p>' + options.msg + '</p>').dialog({
                title: options.title,
                modal: true,
                draggable: false,
                show: {
                    effect: "fade",
                    duration: 500
                },
                hide: {
                    effect: "fade",
                    duration: 200
                },
                buttons: {
                    'Close': function() {
                        $(this).dialog("close");
                    }
                },
                close: function() {
                    if (options.focusOn.length !== 0) {
                        $(options.focusOn).focus();
                    }
                    $(this).dialog("destroy");
                }
            });
        },

        updateOptions = function(opts) {
            options = $.extend({}, options, opts);
        };

    return {
        fire: show,
        options: updateOptions
    };

}());