Javascript Analysis and Design

A starting point for organizing and structuring your JavaScript code is module pattern a>. It's about isolating your code in smaller portions (modules). The main advantages of this:

• Keep global scope clean by replacing global variables with object properties;
• Allows to implement something similar to private properties and methods;
• Organize the code by separating it into components with defined responsibilities

The most common way to implement this pattern is with function expressions immediately invoked (IIFE ):

var NomeDoModulo = (function() {
    // corpo do módulo
    var privada = "foo";
    return {};
}());

Of course the above example is useless, but it illustrates the basic structure of this implementation: a single global variable (or the outermost scope) is declared. Any variable declared inside the module is not visible outside of it. An object is returned (usually an entire namespace or a constructor function), exposing only what is needed.

If necessary, you can inject a dependency into the module, passing a parameter to the IIFE. For example:

var NomeDoModulo = (function(html) {
    // corpo do módulo
    var privada = "foo";
    return {};
}(document.body.innerHTML));

A slightly more useful example, creating a "class":

var Cliente = (function(){

    // Variável privada do módulo
    var nomePadrao = "Cliente sem nome";

    // Construtor
    function Cliente(nome) {        
        // Propriedade pública de cada instância 
        this.nome = nome || nomePadrao;
    }

    // Método público
    Cliente.prototype.metodo = function() {
        // ...
    }

    // Expõe o construtor
    return Cliente;

}());

var c1 = new Cliente();
c1.nome; // "Cliente sem nome"
var c2 = new Cliente("Exemplo S.A.");
c2.nome; // "Exemplo S.A."

This type of framework served as the basis for the implementation of the module formats adopted by the most commonly used dependency managers in JavaScript, such as AMD , used by Require.js , and the CommonJS , used by Node.js . After studying the module pattern , I suggest experimenting with how Require and Node manage modules . I personally prefer the AMD format of Require, but either should help you a lot in structuring your code.

You, in addition to using a framework, can use coffeescript to make your life easier.

link

It will compile the code into JS, but the code will be much cleaner and simpler. Including class creation. Here's an example of inheritance:

    class Animal
      constructor: (@nome) ->

      mover: (metros) ->
        console.log @nome + " moveu #{metros}m."

    class Cobra extends Animal
      mover: ->
        console.log "Rastejando..."
        super 5

    class Cavalo extends Animal
      mover: ->
        console.log "Galopando..."
        super 20

    cobrinha = new Cobra "Cobrinha"
    cavalinho = new Cavalo "Cavalinho"

    cobrinha.mover()
    // Rastejando...
    // Cobrinha moveu 5m.
    cavalinho.mover()
    // Galopando...
    // Cavalinho moveu 20m.

But in the end, remember, everything will become js, so it's good that you know the language, the characteristics, and the limitations well.

An organized and easy-to-maintain JS project can be obtained with the help of some MVC frameworks for JS:

• AngularJS
• BackBoneJS
• Ember

Some interesting patterns for using OOP in JS can be found at link and link .