Question

I follow this pattern to organize my js application.

As that example says our application should has the single entry point. File application.js doing that work.

// Filename: application.js

var chat = {
  // Create this closure to contain the cached modules
  module: function() {
    // Internal module cache.
    var modules = {};

    // Create a new module reference scaffold or load an
    // existing module.
    return function(name) {
      // If this module has already been created, return it.
      if (modules[name]) {
        return modules[name];
      }

      // Create a module and save it under this name
      return modules[name] = { Views: {} };
    };
  }()
};

// Using the jQuery ready event is excellent for ensuring all 
// code has been downloaded and evaluated and is ready to be 
// initialized. Treat this as your single entry point into the 
// application.
jQuery(function($) {

  $(document).ready(function(){
    var foo = new Application.module('Chat').Collection();
 }); 
});


// Filename: chat-module.js

(function(chat){
  chat.Model = Backbone.Model.extend({ ... }),
  chat.Collection = Backbone.Collection.extend({ ... }),
})(Application.module('Chat'));

It seems well but if try to define chat module for example and invoke it later I have the following error:

Uncaught TypeError: Property 'Collection' of object #<Object> is not a function

I think that error due jQuery ready invokes when chat-module.js not available yet.
How can I resolve that problem?

Answer 1

Your code creates an object and assigns it to the global variable chat, which has a module function as a property:

var chat = {
    module: function...
};

…but then when you use it, you use Application.module rather than chat.module.

Application.module('Chat')

and

var foo = new Application.module('Chat').Collection();

It seems to me that your chat variable should be called Application.

Also note that you’re using module in two different ways, both with new and without. Without would be the correct use based on your code. It will work both ways because module returns a function (which is an object), and so that will override the normal new behavior, but it means that using new serves no purpose and is misleading to someone reading the code.