¿Cuáles son algunos ejemplos de implementaciones de patrones de diseño utilizando JavaScript?

StackOverflow https://stackoverflow.com/questions/24642

Pregunta

Soy un programador moderadamente experto que usa JavaScript pero no soy un gurú.Sé que puedes hacer cosas bastante poderosas con él, pero no he visto mucho más que una manipulación DOM bastante básica.Me pregunto si la gente podría proporcionar algunos ejemplos de conceptos de patrones de diseño tradicionales, como Factory Method, Singleton, etc., utilizando JavaScript.¿En qué casos se utilizarían estos patrones en la web?

¿Fue útil?

Solución

Solo quería agregar mi patrón de JavaScript favorito que aprendí de Pro JavaScript Design Patterns que Jonathan Rauch ya recomendó.

Es el patrón singleton del espacio de nombres.Básicamente, crea espacios de nombres a través de singletons que le permiten ocultar métodos y variables del uso externo.Los métodos ocultos/expuestos en realidad están ocultos porque están definidos dentro del cierre.

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

Otros consejos

Nickolay mencionó esto, pero los patrones de diseño no son consistentes entre lenguajes que tienen diferencias drásticas.He leído antes (y estoy de acuerdo) en que un patrón de diseño es a menudo un signo de que faltan funciones en el lenguaje.

Como ejemplo perfecto, el patrón "Factory" es completamente innecesario en algunos lenguajes, Ruby es el ejemplo en el que estoy pensando (porque la construcción de objetos es solo un método en la instancia de Class):

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

Siempre que aplique un patrón de diseño a un lenguaje diferente al que fue desarrollado inicialmente, asegúrese de considerar si es REALMENTE necesario y de qué maneras podría mejorarlo con las nuevas características del lenguaje disponibles.Los patrones de diseño son solo una guía, siempre debes considerar si el uso que pretendes realmente necesita del patrón, o si se puede adoptar de mejor manera en tu caso.

hay una buena gratis Libro en línea de Addy Osmani, que presenta los patrones de diseño de Javascript: Patrones de diseño de JavaScript esenciales para principiantes, volumen 1

@jamting:

El patrón de diseño singleton en JavaScript

Ay dios mío.Estoy sin palabras.

Al OP:Sí, por supuesto que puedes en cierto sentido, pero algunos patrones, como estás acostumbrado, no son tan visibles como en Java.Por ejemplo, singleton sería simplemente un objeto:

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

Wikipedia tiene un ejemplo de Fábrica en JS.

he usado recientemente La mejor clase de animación de Bernie que hace un uso extensivo de la Estrategia Patrón de diseño.Bernie hace un gran trabajo al describir por qué se debe utilizar el patrón de estrategia, pero lamentablemente no explica exactamente cómo funciona el código.Por otra parte, cuando utilice una referencia de patrones de diseño, eche un vistazo al código y los comentarios en animator.js para ver un buen ejemplo de cómo utilizar el patrón de estrategia.

Ejemplo:

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

¿Cómo se llama esta práctica en JavaScript?

Este es el patrón de diseño de autoinvocación.Nunca lo había visto hasta que comencé a utilizar Javascript.

Sospecho que pueden; aquí hay un ejemplo de Singleton:

El patrón de diseño singleton en JavaScript

Seguro que pueden.Aquí hay un libro sobre el tema:
Patrones de diseño de JavaScript profesionales
Aquí hay un ejemplo del patrón Factory:
Patrón de fábrica en Javascript

Me gustaría agregar aquí lo que he estudiado en grupo con discusión sobre patrones de diseño tanto en C# como en JavaScript.Lo que es más interesante para mí durante la reunión es que el chico de C# escribe códigos en JavaScript y lo mismo para el chico de JavaScript.Después de salir de la reunión trato de aprender más en casa y escribir un blog aquí.http://tech.wowkhmer.com/category/Design-Patterns.aspx tanto para C# como para JavaScript.

Escuchar a Justin Diaz hablando sobre patrones de diseño para Javascript.La charla también se basa en su libro Pro Javascript Techniques mencionado anteriormente.La charla dura unos 45 min en el Google I/O

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top