Padrões de design JavaScript

Depois de ler o livro JavaScript design patterns de Addy Osmani , pensei em resumir alguns dos padrões que achei úteis e tenho usado em alguns projetos. É um livro incrível e contém muitas informações úteis para desenvolvedores de frameworks JavaScript.

<b> Padrão de módulo </b>

O padrão de Módulo encapsula “privacidade”, estado e organização usando fechamentos. Ele fornece uma maneira de agrupar uma combinação de métodos e variáveis ​​públicos e privados. Com esse padrão, apenas uma API pública é retornada, mantendo todo o resto dentro do encerramento privado.

var myNamespace = (function () {     
  var myPrivateVar, myPrivateMethod;     
  myPrivateVar = 0;

  myPrivateMethod = function( foo ) {
      console.log( foo );
  };

  return {     
    myPublicVar: "foo",

    myPublicFunction: function( bar ) { 
      myPrivateVar++;
      myPrivateMethod( bar );
    }    
  };

})();

<b> Padrão de módulo revelador </b>

O padrão de módulo revelador é uma versão atualizada do padrão de módulo onde todas as funções e variáveis ​​são declaradas no escopo privado e um objeto anônimo com ponteiros para a funcionalidade privada é retornado.

var myRevealingModule = (function () {
        var privateVar = "this is private",
            publicVar  = "this is public";

        function privateFunction() {
            console.log( privateVar );
        }

        function publicSetName( strName ) {
            privateVar = strName;
        }

        function publicGetName() {
            privateFunction();
        }

        // Reveal public pointers to private functions and properties
        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };     
    })();

<b> Herança de protótipo </b>

JavaScript não suporta o conceito de classes, mas suporta funções construtoras especiais que funcionam com objetos. As funções em JavaScript têm uma propriedade chamada protótipo. Quando chamamos um construtor JavaScript para criar um objeto, todas as propriedades do protótipo do construtor são disponibilizadas para o novo objeto.

function Car(model, year) {
    this.model = model;
    this.year = year;   
}

Car.prototype.toString = function() {
    return this.model + ", " + this.year;
};

var supra = new Car("Toyota Supra", 2006);

<b> Padrão singleton </b>

Em JavaScript, Singletons servem como um namespace de recurso compartilhado. O padrão singleton é usado para restringir a instanciação de uma classe para um objeto. Isso é útil quando exatamente um objeto é necessário para coordenar ações em todo o sistema.

var mySingleton = (function () {

  // Instance stores a reference to the Singleton
  var instance;

  function init() {

    // Private methods and variables
    function privateMethod(){
        console.log( "I am private" );
    }

    var privateVariable = "Im private"; 

    return {     
      // Public methods and variables
      publicMethod: function () {
        console.log( "The public can see me!" );
      },

      publicProperty: "I am public",     
    };     
  };

  return {

    // Get the Singleton instance if one exists
    getInstance: function () {     
      if ( !instance ) {
        instance = init();
      }     
      return instance;
    }     
  };

})();

var singleA = mySingleton.getInstance();
console.log(singleA.publicMethod());

<b> Herança do Mixin </b>

Em JavaScript, podemos ver a herança de Mixins como um meio de coletar funcionalidade por meio de extensão. Cada novo objeto que definimos tem um protótipo do qual pode herdar outras propriedades.

var Person = function( firstName, lastName){ 
    this.firstName = firstName;
    this.lastName = lastname;
}

var clark = new Person("Clark", "Kent");

var Superhero = function(firstName,lastname, powers){ 
    this.powers = powers;
    Person.call(this,firstName,lastName);
};

SuperHero.prototype = Object.create(Person.prototype);           
var superMan = new Superhero( "Clark", "Kent", [ "flight", "strength" ]);

<b> Padrão de fachada </b>

Esse padrão fornece uma interface conveniente de nível superior para um corpo maior de código, ocultando sua verdadeira complexidade subjacente. jQuery usa fachadas para grande parte de sua API para simplificar operações complexas. Um exemplo é o método $ (document) .ready (..) da jQuery que, internamente, é alimentado por um método chamado bindReady () que executa algumas das seguintes ações para simplificar o trabalho para nós.

$(document).ready(function () {
    ...
});