lunes, 12 de septiembre de 2011

Patrón módulo en Javascript

Aunque al lado de etnassoft, soy un aficionado, voy a proponer según mis criterios, como pretendo organizar el código javascript a partir de hoy en mis aplicaciones.

Está claro que no queremos spaghetti code, y además ASP.NET MVC nos desaconseja utilizar el framework de javascript ASP.NET AJAX. De este modo, todo el conocimiento atesorado alrededor de la clase de cliente Type de ASP.NET AJAX, ya no me es válido.

De esta forma he querido volver a los orígenes de todo, esto es javascript puro y duro. En este camino no quiero dejar de mencionar a etnassoft que me ha enseñado que hay javascript más allá de las recomendaciones y el MSDN de Microsoft.

Aunque etnassoft está repleto de buenos artículos, hay 4 que me han parecido especialmente útiles, a la par que imprescindibles:

El Patrón Módulo Javascript en Profundidad

El Módulo Revelado (Revealing Module) Javascript

Ampliando el Patrón Módulo Javascript: submódulos

Namespacing en Javascript

Cómo verás todo gira en torno a evitar el famoso y denostado spaghetti code. Por eso, el patrón módulo me ha parecido una muy buena aproximación hacía un código legible, organizado y escalable.

Si quieres conocer perfectamente el patrón visita los enlaces anteriores donde se explica de maravilla. Yo por mi parte lo que quiero es mostrarte un ejemplo del patrón de diseño “módulo”, para poder revisar su estructura más adelante cuando ya no recuerde nada sobre el mismo. Fíjate que el patrón módulo sería, salvando las distancias, una clase con todos sus métodos estáticos en C# o un módulo en VB.

Patrón módulo

var myModule = (function () {

    var myPrivateProperty = "";

    function myPrivateMethod(param1, param2) {

    };

    return {

        myPublicProperty: "",

        myPublicMethod: function (param1, param2) {

        }

    }

})();


Patrón módulo revelado

var myModule = (function () {

    var myPrivateProperty = "";

    function myPrivateMethod(param1, param2) {

    };

    function myPublicMethod(param1, param2) {

    };

    return {

        myPublicProperty: "",

        myPublicMethod: myPublicMethod

    }

})();

 

Este opción me gusta más porque los métodos pueden cambiar de visibilidad (público o privado) sin tener que mover la definición del método (sin esta variación del patrón, si es público tiene que ir en el return, y si no fuera). La palabra “revelado” hace mención al hecho de que tú decides que métodos hacer públicos a través de return.

Ampliando el patrón módulo con submódulos

myModule.mySubModule = (function () {

    var myPrivateProperty = "";

    function myPrivateMethod(param1, param2) {

    }

    return {

        myPublicProperty: "",

        myPublicMethod: function (param1, param2) {

        }

    }

})();

 

Si definimos el submódulo fuera de la definición del módulo (por ejemplo en un fichero miModulo.miSubModulo.js), el submódulo no tiene acceso a las variables y métodos privados de miModulo.

De este modo, también podemos definir el submódulo en la propia definición del módulo y así tendrá acceso a variables y métodos privados del módulo padre.

var myModule = (function () {

    var myPrivateProperty = "";

    function myPrivateMethod(param1, param2) {

    };

    function myPublicMethod(param1, param2) {

    };

    return {

        myPublicProperty: "",

        myPublicMethod: myPublicMethod,

        mySubModule: (function () {

            var myPrivateProperty = "";

            function myPrivateMethod(param1, param2) {

            }

            return {

                myPublicProperty: "",

                myPublicMethod: function (param1, param2) {

                }

            }

        })()

    }

})();

 

Por cierto, si te fijas no se ha utilizado la palabra this en ningún lugar del código. Vía etnassoft de nuevo, te dejo este enlace que explica bastante bien el uso de la palabra this.

Ahora podríamos escribir las siguientes instrucciones:

myModule.myPublicProperty = "panicoenlaxbox";

myModule.myPublicMethod(3, 5);

myModule.mySubModule.myPublicProperty = "sergio";

myModule.mySubModule.myPublicMethod(3, 4);

 

Por otro lado, “mi patrón” de clase para crear instancias de un objeto, sería como el siguiente:

function className() {

    var that = this;

    this.myPublicProperty = "";

    this.myPublicMethod = function () {       

    }

    var myPrivateProperty = "";

    function myPrivateMethod() {

        //that //acceso a instancia

    }

}

 

Un saludo!.

No hay comentarios:

Publicar un comentario