La importancia de los patrones de diseño con Javascript, NodeJs et al.


36

Con Javascript pareciendo ser el lenguaje de programación ubicuo de la web en los próximos años, aparecen nuevos marcos cada cinco minutos y la programación impulsada por eventos toma la delantera tanto en el lado del servidor como del cliente:

¿Usted, como desarrollador de Javascript, considera que los patrones de diseño tradicionales son importantes o menos importantes de lo que han sido con otros lenguajes / entornos?

Nombra los tres patrones de diseño principales que utilizas regularmente como desarrollador de Javascript y da un ejemplo de cómo te han ayudado en tu desarrollo de Javascript.


55
Algunas personas argumentan que los patrones de diseño (especialmente los de GoF) son signos de deficiencia del lenguaje (vea esta discusión ). Dado que JavaScript es prototípico y de naturaleza funcional, diría que otro conjunto de patrones es aplicable / útil.

muy interesado en las respuestas ... +1 para la pregunta :)
usoban

2
El libro JavaScript Patterns de Stoyan Stefanov es un gran recurso sobre toneladas de patrones que puedes usar en JS. Muchos de ellos existen específicamente para JS, y no para ningún otro idioma.
IgorGanapolsky

Javascript tiene sus propios patrones. Además del libro mencionado por Igor, también hay patrones de diseño de Javascript de aprendizaje de Addy Osmani , que es gratuito.
user16764

Respuestas:


23

¿Usted, como desarrollador de Javascript, considera que los patrones de diseño tradicionales son importantes o menos importantes de lo que han sido con otros lenguajes / entornos?

Los patrones de diseño clásico no se aplican a JavaScript.

Lo que sí aplica es escribir código modular y funcional.

Debe usar una mezcla de Constructores y funciones de primera clase.

Como desarrollador de JavaScript, personalmente presiono para tratar JavaScript como LISP en lugar de Java. Así que trate de emular mónadas y código de estilo funcional de alto nivel en lugar de tratar de emular el código OOP clásico.

Nombra los tres patrones de diseño principales que utilizas regularmente como desarrollador de Javascript y da un ejemplo de cómo te han ayudado en tu desarrollo de Javascript.

Una vez más, los patrones de diseño no se aplican tanto, pero a continuación hay tres construcciones importantes.

  1. Uso de cierres
  2. Uso de funciones de primera clase.
  3. Uso de fábricas de objetos con o sin new

Deje algún tipo de contexto para el que pueda mostrar ejemplos de este tipo de técnicas en comparación con hacer el mismo tipo de código utilizando patrones de diseño tradicionales.

Echemos un vistazo a algunos de los patrones de diseño clásicos y cómo implementarlos en js, así como los patrones alternativos más adecuados para js:

Patrón de observador:

En node.jsesto es simple events.EventEmitter. En jQueryesto es $.fn.bind&& $.fn.trigger. En backboneesto es Backbone.Events.triggery Backbone.Events.bind. Este es un patrón muy común utilizado en el código del día a día.

Nunca me detengo y pienso "¡Hola, estoy usando un patrón de observación aquí!". No, esta es solo una forma de bajo nivel para pasar mensajes o una forma de cambio en cascada.

Por ejemplo, en la red troncal, todas las vistas MVC se unen al onchangeevento de los modelos , por lo que cambiar el modelo en cascada cualquier cambio automáticamente en la vista. Sí, este es un patrón poderoso, pero su uso es tan común en la programación dirigida por eventos que no se daban cuenta de que lo usaban en todas partes.

En el WebSocketprototcol tenemos el .onque usamos para unirnos a on("message", ...eventos. Una vez más, esto es muy común, pero es un observador en una secuencia en lugar de su clásico OOP basado while (byte b = Stream.ReadNextByte()).

Todos estos son usos poderosos del patrón Observador. Pero este no es un patrón que uses. Esta es una parte simple del lenguaje. Esto es solo código.

Patrón de recuerdo:

Esto es simplemente JSON. Le permite serializar el estado de un objeto para que pueda deshacer una acción.

function SomeObject() {
    var internalState;

    this.toJSON = function() {
        return internalState;
    }

    this.set = function(data) {
        internalState = data;
    }

    this.restore = function(json) {
        internalState = JSON.parse(json);
    }
}

var o = new SomeObject();
o.set("foo"); // foo
var memento = JSON.stringify(o);
o.set("bar"); // bar
o.restore(memento);

En JavaScript, admitimos de forma nativa una API para recuerdos. Simplemente defina un método llamado toJSONen cualquier objeto. Cuando lo llame JSON.stringify, llamará internamente .toJSONa su objeto para obtener los datos reales que desea serializar a JSON.

Esto le permite hacer instantáneamente instantáneas de su código.

De nuevo, no me doy cuenta de que es un patrón de recuerdo. Esto es simplemente usar la herramienta de serialización que es JSON.

Patrón de estado / Patrón de estrategia:

No necesitas un patrón de estado. Tiene funciones de primera clase y tipos dinámicos. Simplemente inyecte funciones o cambie propiedades sobre la marcha.


Raynos, buena respuesta. En cuanto a los ejemplos, estaba pensando más desde el nivel conceptual. Por ejemplo: "un patrón de observación ayudó en la situación ..."

@Lewis elige algunos patrones de diseño que le gusten e intentaré sugerir alternativas funcionales más apropiadas más adelante.
Raynos

El enfoque de esfuerzo y la respuesta son brillantes Raynos. Gracias.
Lewis

@Lewis Traté de mirar un par más, pero me quedé perplejo, ya que todos están diseñados para estrictos lenguajes clásicos de OO. si hay otros patrones de diseño específicos que desea que mire, hágamelo saber.
Raynos

Se olvidó del patrón de prototipo , es decir, el estúpido javascript ni siquiera tiene una
operación

10

Toma esta respuesta como una opinión subjetiva.

Como desarrollador de Javascript, ¿considera que los patrones de diseño tradicionales son importantes o menos importantes de lo que han sido con otros lenguajes / entornos?

Si te refieres a patrones de diseño tradicionales como Gang of Four , entonces la mayoría de las técnicas son independientes del lenguaje / plataforma como "Programa para una interfaz, no una implementación" o "Favorecer la composición de objetos sobre la herencia de clases" y son igualmente importantes también para los desarrolladores de JavaScript.

Patrones más específicos como el de creación, estructural y de comportamiento pueden o no ser utilizados de la misma manera o con tanta frecuencia como en otros idiomas porque las características del lenguaje pueden afectar su uso en gran medida. Por lo tanto, algunos idiomas (JavaScript incluido) tienen sus propios patrones de diseño basados ​​en la funcionalidad o el azúcar sintáctico que ofrecen.

En general, diría que los patrones de diseño tradicionales son tan importantes como en otros lenguajes, pero los patrones específicos de JavaScript son más importantes que los tradicionales.

Nombra los tres patrones de diseño principales que utilizas regularmente como desarrollador de Javascript y da un ejemplo de cómo te han ayudado en tu desarrollo de Javascript

Entre los patrones de diseño de JavaScript esenciales, utilizo principalmente estos:

1. Patrón de constructor (con prototipos)

Especialmente en el lado del servidor al escribir cosas de node.js, porque es muy adecuado para escribir módulos aunque carece de encapsulación nativa. También es popular para muchos otros desarrolladores si navega por los repositorios en GitHub, por lo que la familiaridad con este patrón puede ayudarlo a comprender mejor otros códigos.

2. Patrón de módulo revelador

Ofrece modularidad con encapsulación.

3. Patrón SECO

Esto es más bien específico del escenario, aunque cada desarrollador debería usarlo tanto como sea posible


¡Gracias! Buena respuesta, y el tipo de respuesta que esperaba. Aunque la pregunta puede ser vista como subjetiva, una buena respuesta como esta sugiere que hay una respuesta apropiada. Esperará más respuestas antes de 'cerrar sesión'.

2

Los patrones de diseño se imparten en clases de diseño para CS. No son esenciales, pero son realmente útiles si puede encontrar situaciones análogas para tener una solución pensada.

También permite a los programadores comunicarse más fácilmente. También puede hablar con su compañero de trabajo en términos de los patrones. Si dice aquí que tengo mi Observador, entonces se entiende bastante bien lo que está sucediendo.

Las personas naturalmente encontrarán soluciones que encajarán en un patrón de diseño por sí mismas, pero los patrones de diseño ayudan a definir la terminología y las ideas estándar que pueden ser útiles.

Los patrones no tienen nada de extraordinario, lo mejor es que son ideas canonizadas y definidas de maneras que son repetidamente útiles.


1

Como desarrollador de Javascript, ¿considera que los patrones de diseño tradicionales son importantes o menos importantes?

Son vitales.

Esto se debe a que los conceptos para soluciones reutilizables pueden trascender el lenguaje. - cambios de sintaxis - cambios de implementación - Todavía existe la noción de patrón.

Los desarrolladores de cualquier idioma pueden aprender JS avanzado aprendiendo patrones, no sintaxis. Los que no saben esto se están perdiendo.

Nombra los tres patrones de diseño principales que utilizas regularmente como desarrollador de Javascript

Hay patrones que se usan con frecuencia contra los cuales algunos "argumentarían". Sin embargo, es bueno saberlos porque son extremadamente comunes y poderosos en JS avanzado.

1- Espacio de nombres: envuelve tu código en un objeto.

var x = (función () {}) ();

2- ObjectConfiguration, patrón tipo Factory. -Pasar un objeto a una función, no un montón de variables.

producto var = fábrica ({});

3- Función de devolución de llamada. - Pase una función como parámetro, que se llamará cuando se complete la tarea.

function longTask (function () {// llámame cuando haya terminado});

Como dije, algunos pueden argumentar que estos no son patrones, pero son muy comunes y muy poderosos, y deben mencionarse porque de hecho son soluciones reutilizables muy útiles para problemas comunes. Cuál es la definición de Patrón de diseño.

Excelente pregunta

Espero que ayude.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.