The module pattern

So, we understand how we must break up the code, but how do we organize it? Until now, we have created a file for each new function. This is a good practice, and we are going to see how we can improve on that.

Let's start by thinking about our NewInvestmentView component. We can follow the pattern we've used until now and create a new file, NewInvestmentView.js, and place it in the src folder, as follows:

(function ($, Investment, Stock) {
  function NewInvestmentView (params) {

  }

  this.NewInvestmentView = NewInvestmentView;
})(jQuery, Investment, Stock);

You can see that this JavaScript file is more robust than the examples shown until now. We have wrapped all the NewInvestmentView code inside an immediately invoked function expression (IIFE).

It is called an IIFE because it declares a function and immediately invokes it, effectively creating new scope to declare local variables in.

A good practice is to use only local variables inside the IIFE. If it needs to use a global...