node - patrones de diseño javascript
Ejemplos de patrones de diseño orientados a objetos prácticos de JavaScript (7)
¿Qué patrones de diseño orientados a objetos usas en el JavaScript de tu aplicación y por qué?
No dude en publicar el código, incluso si no hay un patrón de diseño formal asociado.
He escrito muchos javascript, pero no he aplicado muchos patrones orientados a objetos a lo que estoy haciendo, y estoy seguro de que me faltan muchas cosas.
El patrón singleton a menudo es muy útil para ''encapsular'' y cosas de la organización. Incluso puedes cambiar la accesibilidad.
var myInstance = {
method1: function () {
// ...
},
method2: function () {
// ...
}
};
Los siguientes son tres patrones populares de JavaScript. Estos son fácilmente implementables debido a closures :
- El Patrón del Módulo - Ejemplo (y hecho popular) por Eric Miraglia
- Memoization - Ejemplo de Oliver Steele
- Currying - Ejemplo por Dustin Diaz
Es posible que también desee verificar:
La siguiente es una charla de Google I / O de 2008 presentada por Díaz, donde discute algunos temas de su libro:
Me gusta mucho el patrón Decorator con complementos jQuery. En lugar de modificar los complementos para satisfacer sus necesidades, escriba un complemento personalizado que solo reenvía las solicitudes y agrega parámetros adicionales y funcionalidad.
Por ejemplo, si necesita pasar un conjunto de argumentos predeterminados todo el tiempo, y necesita un comportamiento ligeramente diferente que se vincule a la lógica de negocios, escriba un complemento que haga todo lo que sea necesario para satisfacer sus necesidades y que pase su argumentos por defecto si esos argumentos particulares no están especificados.
El principal beneficio de esto es que puede actualizar sus bibliotecas y no preocuparse por portar los cambios de la biblioteca. Su código podría romperse, pero al menos existe la posibilidad de que no lo haga.
Me gusta mucho el patrón de encadenamiento de métodos de jquery, que le permite invocar varios métodos en un objeto. Hace que sea realmente fácil realizar varias operaciones en una sola línea de código.
Ejemplo:
$(''#nav'').click(function() {
$(this).css(''color'',''#f00'').fadeOut();
});
Soy un fanático del Patrón de Módulo . Es una forma de implementar marcos extensibles, no dependientes (la mayoría de las veces).
Ejemplo:
El marco, Q , se define así:
var Q = {};
Para agregar una función:
Q.test = function(){};
Estas dos líneas de código se usan juntas para formar módulos . La idea detrás de los módulos es que todos extienden algunos marcos base, en este caso Q , pero no dependen el uno del otro (si están diseñados correctamente) y pueden incluirse en cualquier orden.
En un módulo, primero crea el objeto marco si no existe (que es un ejemplo del patrón Singleton ):
if (!Q)
var Q = {};
Q.myFunction = function(){};
De esta forma, puede tener múltiples módulos (como el de arriba) en archivos separados, e incluirlos en cualquier orden. Cualquiera de ellos creará el objeto de marco y luego lo extenderá. Ningún manual necesita verificar si el marco existe. Luego, para verificar si existe un módulo / función en un código personalizado:
if (Q.myFunction)
Q.myFunction();
else
// Use a different approach/method
Uno de los patrones útiles en javascript world es el patrón de encadenamiento que LINQ populariza en primer lugar, y también se utiliza en jQuery.
este patrón nos permite llamar a diferentes métodos de una clase de manera encadenada.
la estructura principal de este patrón sería como
var Calaculator = function (init) {
var result = 0;
this.add = function (x) { result += (init + x); return this; };
this.sub = function (x) { result += (init - x); return this; };
this.mul = function (x) { result += (init * x); return this; };
this.div = function (x) { result += (init / x); return this; };
this.equals = function (callback) {
callback(result);
}
return this;
};
new Calaculator(0)
.add(10)
.mul(2)
.sub(5)
.div(3)
.equals(function (result) {
console.log(result);
});
La idea clave de este patrón es this palabra clave, que hace posible el acceso a otro miembro público de la función Calculadora.
Herencia
Utilizo una notación para la herencia que se basa en ExtJS 3 , que encuentro que funciona bastante cerca de emular la herencia clásica en Java. Básicamente se ejecuta de la siguiente manera:
// Create an ''Animal'' class by extending
// the ''Object'' class with our magic method
var Animal = Object.extend(Object, {
move : function() {alert(''moving...'');}
});
// Create a ''Dog'' class that extends ''Animal''
var Dog = Object.extend(Animal, {
bark : function() {alert(''woof'');}
});
// Instantiate Lassie
var lassie = new Dog();
// She can move and bark!
lassie.move();
lassie.bark();
Espacios de nombres
También estoy de acuerdo con Eric Miraglia en apegarse a espacios de nombres para que el código anterior se ejecute dentro de su propio contexto fuera del objeto ventana, esto es crítico si pretendes que tu código se ejecute como uno de muchos marcos / bibliotecas simultáneos que se ejecutan en la ventana del navegador.
Esto significa que la única forma de acceder al objeto de ventana es a través de su propio objeto de espacio de nombres / módulo:
// Create a namespace / module for your project
window.MyModule = {};
// Commence scope to prevent littering
// the window object with unwanted variables
(function() {
var Animal = window.MyModule.Animal = Object.extend(Object, {
move: function() {alert(''moving...'');}
});
// .. more code
})();
Interfaces
También puede utilizar construcciones OOP más avanzadas, como interfaces, para mejorar el diseño de su aplicación. Mi enfoque para esto es mejorar el Function.prototype para obtener una notación en esta línea:
var Dog = Object.extend(Animal, {
bark: function() {
alert(''woof'');
}
// more methods ..
}).implement(Mammal, Carnivore);
Patrones OO
En cuanto a "Patrones" en el sentido de Java, solo he encontrado uso para el patrón Singleton (ideal para el almacenamiento en caché) y el patrón Observer para la funcionalidad basada en eventos como la asignación de algunas acciones cuando un usuario hace clic en un botón.
Un ejemplo de utilizar el patrón de observador sería:
// Instantiate object
var lassie = new Animal(''Lassie'');
// Register listener
lassie.on(''eat'', function(food) {
this.food += food;
});
// Feed lassie by triggering listener
$(''#feeding-button'').click(function() {
var food = prompt(''How many food units should we give lassie?'');
lassie.trigger(''eat'', [food]);
alert(''Lassie has already eaten '' + lassie.food + '' units'');
});
Y eso es solo un par de trucos en mi bolsa de OO JS, espero que te sean útiles.
Te recomiendo que si vas por este camino, leas Douglas Crockfords, Javascript: las buenas partes . Es un libro brillante para esto.