Skip to content

@nathansmith /module_pattern_init.js
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Init + Module Pattern JS
// JS Module Pattern:
// http://j.mp/module-pattern
// Redefine: $, window, document, undefined.
var APP = (function($, window, document, undefined) {
// Automatically calls all functions in APP.init
$(document).ready(function() {
APP.go();
});
// For use only inside APP.
var PRIVATE_CONSTANT_1 = 'foo';
var PRIVATE_CONSTANT_2 = 'bar';
// Expose contents of APP.
return {
// APP.go
go: function() {
var i, j = this.init;
for (i in j) {
// Run everything in APP.init
j.hasOwnProperty(i) && j[i]();
}
},
// APP.init
init: {
call_automatically_one: function() {
// Called on page-load.
// Can still be called individually, via:
// APP.init.call_automatically_one();
},
call_automatically_two: function() {
// Called on page-load.
// Can still be called individually, via:
// APP.init.call_automatically_two();
}
},
util: {
call_specifically_one: function() {
// Must be called individually, via:
// APP.util.call_specifically_one();
},
call_specifically_two: function() {
// Must be called individually, via:
// APP.util.call_specifically_two();
}
}
};
// Parameters: Zepto/jQuery, window, document.
})(typeof Zepto === 'function' ? Zepto : jQuery, this, this.document);
@h3h

Why alias window and document? And what's that undefined for in the argument list?

@SlexAxton

alias them for easy munging, and more clear use of globals. undefined isn't passed in, but is set as a parameter so when the function runs, it is guaranteed to be undefined.

Protects you from: undefined = true

@nathansmith
Owner

Yeah, that way window, document, jQuery, and undefined get shrunk to one-letter variables with it's minified...

var APP=(function(a,b,c,d){/*codez*/})(jQuery,this,this.document)
@h3h

Crazy. Those hacks make me wish JS-in-the-browser provided a more reasonable programming environment. Oh well.

Any specific reason you make all of the methods of the module public (by returning the whole object) instead of only exposing those that require public access?

I also can't think of a case where multiple init methods would be better than just a single setup() method that calls various helper methods to set things up.

Here's the skeleton of what I usually use:

/**
  Description here
  2011-04-25 / (brad@gowalla.com)
**/
if (typeof (Gowalla) === 'undefined') Gowalla = {};

Gowalla.PageOrComponentName = (function ($) {

  // *-* public methods *-*

  var setup = function () {
    $("#header").click(eventHeaderClicked);
  };

  // *-* utility methods *-*

  var doThing = function (x) {
    return x + x;
  };

  // *-* event methods *-*

  var eventHeaderClicked = function () {
    doThing(this.attr('id'));
  };

  // expose public methods
  return {
    setup: setup
  };
})(jQuery);

jQuery(document).ready(Gowalla.PageOrComponentName.setup);
@nathansmith
Owner

@h3h - Agreed. It's insane that window, document, and undefined are mutable in JavaScript :)

@nathansmith
Owner

@h3h - I just realized (coming back to this to show a coworker), that I never answered your question about why making methods public. I do that so that they can be run on page load automatically, but then can be run selectively if need be. Let's say you want to bind something to an element on page load, but then via Ajax insert another set of similar elements. You could be just jQuery's .live(), but maybe there's some other logic that needs to run.

In that case, the functions inside the init could do something along the lines of...

$(/* selector */).unbind('click.namespace').bind('click.namespace', function() {...});

But, it's really a "6-of-one, half-dozen of another" type situation, I agree. :)

@slavent

Thank You for very important pattern.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.