Javascript Module Pattern with jQuery

Question

I'm trying to grasp the concept of pluggable modules, like jQuery does with plugins. My goal is to split my modules into different files and initiliaze them properly after the DOM is ready according to jQuery.

Example

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="my_library.js"></script>
    <script type="text/javascript" src="modules.js"></script>
    <!-- Could be more -->

The way I am doing it right now is by calling MY_LIBRARY.init() inside a jQuery function after I set my modules.

// my_library.js
var MY_LIBRARY = {
    init: function() {
        var _self = this,
            modules = _self.modules;

        if (modules) {
            for (var i in modules){
                modules[i].init();
            }
        }
    },
    modules: {}
}

// modules.js
MY_LIBRARY.modules.MyModule1 = {

    init: function(){
        // initialize stuff
        return this;
    }

};

MY_LIBRARY.modules.MyModule2 = {

    init: function(){
        // initialize stuff
        return this;
    }

};

$(function(){
    MY_LIBRARY.init();
});

The question is how can I self-invoke MY_LIBRARY and the modules when the DIM is ready, without using:

$(function(){
    MY_LIBRARY.init();
});

Update

I've been working on this, trying to replicate the way jQuery does this, so I've written some code that uses 'X$' instead of '$' as my custom global object which allows me to do something like:

X$( 'MyModule1', { init: function(){}, doStuff: function(){} });

or

X$('MyModule1').doStuff();

I think this pattern works for me. At the moment, the only thing I couldn't replicate is using something like:

X$.core.myCoreFunction() { return true; }; // plugin function yay!

X$.myCoreFunction(); // alerts X$.myCoreFunction is not a function

Which is kind of weird since jQuery does this with plugins. Any thoughts on this one?

What's wrong with including one of those DOM ready blocks at the end of each file? — David Tang
– David Tang, Commented Feb 3, 2011 at 13:31
@Box9 You are right, but i was wondering if we have a more sophisticated pattern for doing this. — tsiokos
– tsiokos, Commented Feb 3, 2011 at 14:13

bcherry · Accepted Answer · 2011-02-04 21:00:46Z

2

I'd try to use a function wrapper around your module definitions, especially since you may find that there are a lot of commonalities between your modules, besides the init function.

For instance, here I define a lib function which helps you declare a new library, and will automatically bind up the init function to document.ready:

function lib(module) {
  $(function() {
    if (module.init) {
      module.init();
    }
  });

  return module;
}

var MYLIB = lib(function() {
   return {
     init: function() {
       // ...
     }
   };
}());

You could use another variation on the same pattern, but it will keep you from needing to add a lot of extra code, and allow you to manage all your libraries in the same ways. You could also, for instance, have lib return a dummy a object when it's called initially, and after document.ready it applies the function passed in to generate the real object, which would allow you to avoid an explicit init entirely:

function lib(moduleMaker) {
  var module = {};
  $(function() {
    moduleMaker(module);
  });
  return module;
}

var MYLIB = lib(function(mylib) {
   mylib.foo = function() {/*...*/};
   // other init stuff, we've already waited for document.ready
});

answered Feb 4, 2011 at 21:00

bcherry

7,2482 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tsiokos Over a year ago

I 've updated my code. It seems like the pattern used in jQuery solved my first problem.

Collectives™ on Stack Overflow

Javascript Module Pattern with jQuery

Example

Update

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example

Update

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related