Mega Boilerplate

Mega Boilerplate is a starter project generator that focuses on simplicity and ease of use, while providing you with flexibility of choices. Inspired by Hackathon Starter, Mega Boilerplate powerfully generates starter projects with an easy to use interface.

Link: http://megaboilerplate.com/

Anuncios

Patrón Modular en Javascript

El patrón modular es algo que todo desarrollador Front-End debe saber. Una de las mejores practicas a la hora de escribir código es usar patrones de diseño y en este post explicaremos el patron modular para Javascript.

En javascript el patron modular emula el concepto de clases, de manera que somos capaces de incluir métodos públicos/privados y propiedades dentro de un único objeto, protegiendo las datos particulares del ámbito global, lo que ayuda a evitar la colisión de nombres de funciones y variables ya definidas a lo largo de nuestro proyecto, o API’s de terceros, a continuación unos conceptos previos para poder entender mejor el patrón modular.

Objeto Literal

EL patron modular se basa en parte en los objetos literales por ende es importante entenderlo.
Un objeto literal es descrito como cero o más pares nombre/valor, separados por comas entre llaves.
Los nombres dentro del objeto pueden ser cadenas o identificadores que son seguidas por 2 puntos, dichos objetos también pueden contener otros objetos y funciones.


var objetoLiteral = {
    /* los objetos literales pueden contener propiedades y métodos */
    saludo : "soy un objeto literal",
    miFuncion : function(){
      // código
    }
};
/* accediendo a una propiedad de nuestro objeto literal persona */
objetoLiteral.saludo

Un ejemplo de un modulo usando un objeto literal.


var persona = {
    /* definiendo propiedades */
    nombre : "adan",
    edad   : 33,
    /* método simple */
    comer  : function(){
        console.log(this.nombre + " esta comiendo.");
    }
};
/* accediendo al método comer de nuestro objeto literal persona */
persona.comer();

Módulo

Un módulo es una unidad independiente funcional que forma parte de la estructura de una aplicación.
Podemos usar funciones y closures(cierres) para crear módulos.


var modulo = (function(){
    ...
});

Un ejemplo más completo:


var automovil = (function(colorDeAuto){
    var color = colorDeAuto;
    return{
        avanzar : function(){
            console.log("el auto "+ color +" esta avanzando");
        },

        retroceder : function(){
            console.log("el auto "+ color +" esta retrocediendo");
        }
    }
})("azul");
/* accediendo los metodos retroceder y avanzar de nuestro módulo */
automovil.retroceder();
automovil.avanzar();

Función Anónima

Las funciónes anónimas son funciónes sin nombre, comúnmente asociados a una variable.


var miFuncionAnonima = function(){
    alert("Hola mundo!");
};
miFuncionAnonima();

Funciones Auto-Ejecutables (IIFE)

Estas funciónes una vez declaradas se llaman a sí mismas para inicializarse, los primeros paréntesis encierran el contenido, los segundos paréntesis asumen que el interior de los primeros paréntesis es una función y la ejecuta inmediatamente.


/* 01 */
(function(){
    alert("Hola mundo!");
})();

/* 02 */
var miFuncionAnonima = function(){
    alert("Hola mundo!");
};

/* 03 */
var miFuncionAnonima = (function(mensaje){
    alert(mensaje);
})("Hola mundo");
// todo lo que le precede a los 2 últimos paréntesis se ejecuta inmediatamente

Closure

Los clousures son funciones definidas dentro de otras funciones, así mismo dicha función interna tiene acceso al ámbito de la función contenedora.


function ejemploClousure(arg1, arg2){
    var localVar = 8;
    function multiplicador(interArg){
        return arg1 * arg2 * interArg * localVar;
    }
    /* retornar una referencia de la función interna definida como:
       multiplicador 
    */
    return multiplicador;
}

/* la función devuelve una función, por lo tanto necesita asignación */
var globalVar = ejemploClousure(2,4);
/* y luego llamar a */
globalVar(8);

Métodos Privados

Los métodos privados son funciones que no pueden ser llamados desde fuera del ámbito donde han sido declarados, dichos métodos podrán ser invocados en nuestros métodos públicos.


var modulo = (function () {
    var privateMethod = function (message1) {
        console.log(message1);
    };
    var publicMethod = function (mensaje2) {
        privateMethod(mensaje2);
    };
    return {
        publicMethod: publicMethod
    };
})();

/* pasando datos a un método privado */
modulo.publicMethod("mi mensaje");

Entendiendo el Retorno

Comúnmente los módulos retornan un objeto, la cual los métodos ligados a dicho objeto serán accesibles desde fuera del módulo.


var module = (function(){
    /* simple método privado */
    var privateMethod = function(){
        console.log("soy un método privado");
    };
  
    /* retornando un objeto literal */
    return{
        publicMethod : function(){
            privateMethod();
            console.log("soy un método publico");
        }
    }
})();
/* accediendo nuestro método publico */
module.publicMethod();

Ventajas del Patron Modular

  • Código limpio , separado y organizado.
  • Soportan datos privados.
  • Código Escalable.

Referencia: Learning JavaScript Design Patterns

How and why to avoid global variables in JavaScript

Global variables and function names are an incredibly bad idea. The reason is that every JavaScript file included in the page runs in the same scope. If you have global variables or functions in your code, scripts included after yours that contain the same variable and function names will overwrite your variables/functions.

Link: http://goo.gl/nOm9S2