Understanding require.js for implementing backbone.js

Question

I am learning require.js to organizing backbone.js templates. I got several tutorial when I search on internet. I found different implementations there. That's why I could not understand those codes of main.js file.

    //file name main.js

   require.config({
   paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone'
  }
});

require([
  'app',
], function(App)
{
  App.initialize();
});

Specially I could not understand the second portion. That is

require([ 'app', ], function(App) { App.initialize(); });

What does it mean by App.initialize();?

Many apps you load with require will need to fire an init() method or some such, once loaded. If you don't need it, leave it out. — wwwmarty
– wwwmarty, Commented Sep 26, 2014 at 13:12
Thanks @MartyMcKeever for your reply. What does it mean by App.initialize(); ?? Is there any function named initialize() ?? — Foysal Vai
– Foysal Vai, Commented Sep 26, 2014 at 13:14
Not a backbone guy, but this example assumes that whatever you're requiring (locally named App, in the function) has an initialize() method that needs to be called immediately on startup. Your required app may or may not have such a startup method, and it could be named anything. Usually it's called init(); — wwwmarty
– wwwmarty, Commented Sep 26, 2014 at 15:49

laruiss · Accepted Answer · 2014-09-26 13:15:44Z

2

require([ 'app', ], // this means you have a file called app.js,
                    // which is a require module
], function(App) // This means after loadind, App will be an alias
                 // for the module.exports object
{
  App.initialize(); // This means the module exposes an initialize function
                    // (some will call it method), that is invoked
});

answered Sep 26, 2014 at 13:15

laruiss

3,8161 gold badge21 silver badges29 bronze badges

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

1 Comment

Foysal Vai Over a year ago

Thanks @laruiss. initialize() is a backbone function (backbonejs.org/#Model-constructor), am I right ??

sma · Accepted Answer · 2014-09-26 13:42:40Z

That structure is the format for Asynchronous Module Definition, or AMD. It is basically an API for loading modules (essentially Javascript files) in your application in an asynchronous manner.

In the past, this was usually done using <script> tags at the bottom of your page. The problem with that is those are loaded synchronously (one after another) and dealing with dependencies between the files can be onerous. AMD is one proposed standard for the ability to load your Javascript files asynchronously.

The basics are this (using your code as an example):

You invoke a function require, which accepts two arguments:

an array of strings which represents paths to files (or aliases to paths). These would be the dependencies the file needs (think of imports in Java)
A callback function that will be called by Require after the dependencies you specified in your first argument are loaded. Require will pass in the actual files you specified in the first argument. So in your example, you are telling Require 'go and load the app.js file' and when its loaded, pass that file into my callback function

So in this code (which is your callback function) :

 function(App) {
  App.initialize();                    
}

App represents the exposed API of the Javascript file app.js. So when you see stuff like App.initialize(), all that means is that the file app.js is exposing a function called initialize that this file is invoking.

Collectives™ on Stack Overflow

Understanding require.js for implementing backbone.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related