What are these patterns in this Backbone TodoMVC example

Question

Looking into the todomvc backbone codes example. The structure in the js/ fold:

├── app.js
├── collections
│   └── todos.js
├── models
│   └── todo.js
├── ro         


        

Answer 1

1. app variable is global and encapsulates entire Backbone application to minimize global namespace pollution. Here you can find more details about Namespacing Patterns.

   var app = app || {} initializes global app variable with new empty object if it is not initialized yet. Otherwise it will be untouched.

2. The functions:

   • $(function(){}) is a shortcut for jQuery's $(document).ready(function(){}). Docs
   • (function(){})() is an Immediately-invoked function expression (IIFE) without parameters
   • (function($){ /* here $ is safe jQuery object */ })(jQuery) is IIFE with parameter - jQuery object will be passed as $ into that anonymous function

$(function() {
  console.log("Document ready event");
});

$(document).ready(function() {
  console.log("Document ready event");
});

(function() {
  console.log("Immediately-invoked function expression without parameters");
})();

(function($) {
  console.log("Immediately-invoked function expression with parameter. $ is a jQuery object here:");
  console.log($.fn.jquery);
})(jQuery);