CODEWITHSUNDEEP
backbone.js
BrainLikeADullPencil
BrainLikeADullPencil

Reputation: 11663

declaring with and without the namespace

I'm playing around with the backbone Todo MVC app http://addyosmani.github.com/todomvc/ and noticed something, which I'm not sure was done by design (it was necessary) or it's just random. The author, who seems rather experienced with Backbone and js, uses 'var' when declaring the Router (var Workspace) and the Collection (var TodoList) and then brings them in the app namespace on instantiation, for example,

app.TodoRouter = new Workspace();

However, when, for example, he declares the view, he does so without var, using instead the namespace directly. He does this also with the model. For example, 

app.TodoView = Backbone.View.extend({

});

Without having to examine all the code, is there a higher level reason for that decision that I'm missing, or is it just arbitrary

Code

View

app.TodoView = Backbone.View.extend({

});

Router

var Workspace = Backbone.Router.extend({

});

app.TodoRouter = new Workspace();

Collection

var TodoList = Backbone.Collection.extend({

});

// Create our global collection of **Todos**.
app.Todos = new TodoList();

Upvotes: 0

Views: 127

Answers (2)

Dennis Rongo
Dennis Rongo

Reputation: 4611

The code is using namespacing which he's using app as the only variable tied to the global namespace. Most of the time, you'll see something along:

var app = {};  /** local */
window.app = app;  /** assign variable to global scope */

app is now where you can define variables and anything you define in it will be accessible anywhere within the app namespace.

So now, you can define various sub namespaces to keep your code tidy and easier to find things. Most likely for organizational purposes, avoid variables collision and not to get your variables mixed up. You can do something like this where it provides structure for the entire app.

app = {
    Utilities: {},
    Views: {},
    Collections: {}
};

You can also define variables in it anytime such as.

app.Models = {};

Instead of having variables all over the place within the window (or global namespace), they're now defined in the app and is accessible via app.Utilities.doSomething();

Anything else defined outside of that app namespace such as var router = new AppRouter( {}) as a local variable is defined and only can be used within the scope of the function it's declared in. They're meant to be used once and they're intended not to be used anywhere else in the code (outside of the current scope).

Upvotes: 1

Paul Hoenecke
Paul Hoenecke

Reputation: 5060

I believe he is essentially only attaching what is needed to the namespace object.

So in this case, TodoView is a constructor function which is needed to create a new view each time a todo item is added. While the router constructor function is only used to create the one single router instance, so it is created only in the local scope and used once to create app.TodoRouter. Same for the collection, the constructor is used once to create the single instance app.Todos and then goes out of scope. If there was a situation where you needed multiple TodoList instances, you would want to attach the constructor function to the app object as well (app.TodoList).

One common naming convention in javascript is to use pascal case for constructor functions (capital first letter) and camel case for instances. That would make it a little more readable, but that is just a convention and completely open to opinion. In that case you would have app.TodoView and app.todoRouter.

Upvotes: 0

Related Questions