Javascript – Why does Facebook use hash in the URL…sometimes

When a client makes a request to your Web Server requesting a resource -for example, the main Page- your server returns that resource. In case that resource is an HTML file, it is possible -and common- that to show your site you also require additional resources -images, CSS stylesheets, JS files- so the Browser can render your page correctly. That assets can be on the same web server that host your application or can be hosted somewhere else.

With this line of code:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Your HTML file is saying that it requires the file angular.min.js, and that file is locate in the https://ajax.googleapis.com servers. On the other side, this line of code:

 <script src="components.js"></script>

States that your site requires the components.js, and that file is located within your Web Server (for example, in http://www.mysite.com/components.js). So, when a user access to your site his Browser will load some files from your Web Server and some other from external repositories. Every file will be downloaded and stored in the Client's PC to load your site.

It's really a weird example, I've never seen a usage of a constructor to create a module this way. I would higly recommend you using the first solution, it creates just one scope and one object and that's all you need. The second one is used mainly when you need to export some constructor. And then you are allowed to use new Constructor() multiple times. However the first solution can be a little bit altered:

var module = new (function ($, document, window, undefined) {
  this.property = "hello";
})(jQuery, document, window);

console.log(module.property);

This allow you to create an IIFE which itself is a constructor so you get a new object based on this constructor. If you don't like the object literal based solution, this is a way to go.

Also you can take a look at AMD (using RequireJS) or CommonJS (using Node.js or Browserify) specifications which allows you to move every single module to its own file. Lots of libraries use these patterns. I prefer CommonJS and it's very simple. You have a file which represents a module and which has 3 additional predefined variables. They are exports, module and require.

// a.js
exports.property = "hello"; // Basically the same as the example above

// b.js
module.exports = function () { // Something similar to exporting a custom object
  console.log("hello");
};

// c.js
var a = require("./a"), b = require("./b"); // Loading these modules

console.log(a.property); // logs "hello"
b(); // also logs "hello"