Header Ads Widget

Ticker

6/recent/ticker-posts

Patrón de módulo revelador de JavaScript

 


Ahora que tenemos una buena comprensión del cierre, el patrón del prototipo y el patrón del módulo, echemos un vistazo al patrón del módulo revelador de JavaScript. Sabes que es gracioso, tenemos toda esta verborrea para describir estos patrones, y es posible que te estés rascando la cabeza en cuanto a qué es un patrón de módulo frente a un patrón de módulo revelador. Para ser justos, el patrón de módulo revelador es muy similar al patrón de módulo, pero tiene una forma realmente agradable de exponer la API de un módulo a sus usuarios o consumidores. Creo que encontrará que el patrón de módulo revelador es un muy buen equilibrio de cómo estructurar su código JavaScript para legibilidad.


¿Qué nos proporciona el patrón de módulo revelador?

El patrón de módulo revelador es realmente casi el mismo que el patrón de módulo. La principal diferencia a tener en cuenta es simplemente cómo el patrón de módulo revelador expone su API. En otras palabras, lo que está contenido en la returndeclaración del patrón de módulo revelador es diferente de lo que está en el patrón de módulo. En términos de lo que nos ofrece el patrón de módulo revelador, son las mismas tres cosas que hemos estado discutiendo en nuestro estudio de patrones en JavaScript, como la reutilización de código, la facilidad de mantenimiento y un menor uso del alcance global. Al igual que vimos con el patrón de módulo, el patrón de módulo revelador también permite a los desarrolladores emular los conceptos de variables y funciones públicas y privadas. Como dijimos, elreturnLa declaración difiere entre los dos patrones, muchos encuentran el patrón del módulo revelador más fácil de leer y razonar. Recuerde que con el patrón de módulo, devolvemos un objeto literal. Ese objeto literal está exponiendo su api, o sus métodos, al definir su estructura dentro de ese mismo objeto literal que se está devolviendo. Para mí, esto se siente un poco torpe y no muy amigable. Con el patrón de módulo revelador, puede definir sus variables y métodos directamente en el área que normalmente consideramos privada (Sección 2 de un patrón de módulo). Luego, aún devuelve un objeto, pero ese objeto tendrá referencias simples de pares clave / valor a cualquier cosa que desee hacer pública para un consumidor del módulo.


Tiene los mismos inconvenientes del patrón del módulo.

El patrón del módulo revelador no es perfecto, de hecho, comparte los mismos inconvenientes que se encuentran con el patrón del módulo. Al igual que el patrón del módulo, cualquier función que se defina dentro del contenedor del módulo se duplicará en la memoria cada vez que cree una nueva instancia del módulo. Para ser justos, esto probablemente no sea un gran problema de todos modos. Como Getify afirma tan elocuentemente en su serie You Don't Know JavaScript, el motor de optimización en JavaScript puede manejar esto sin problemas. Además, probablemente nunca notaría problemas de rendimiento hasta que comience a acceder a miles o cientos de miles de instancias de un módulo en una página. ¿Cuándo fue la última vez que se encontró con una situación como esa? Bien, nunca.


Estructura general del patrón del módulo revelador

Este pequeño esquema que tenemos arriba es una estructura de ejemplo del patrón de módulo revelador. A primera vista, de hecho se ve bastante similar al patrón del módulo que ya vimos. ¿Puedes ver qué es diferente? Primero que nada, el nombre del módulo está en minúsculas. Este no es un requisito real, pero es una buena idea desde el punto de vista de las convenciones, ya que da una indicación de que la newpalabra clave no es necesaria con el patrón de módulo revelador. La razón por la que no newse requiere una palabra clave es por esos dos pequeños paréntesis después de la declaración de la función. Esto significa que es una función de auto-llamada . Sin embargo, la mayor diferencia entre el patrón de módulo y el patrón de módulo revelador está en elreturndeclaración. Recuerde que en el patrón del módulo, definimos nuestras funciones públicas directamente en el literal del objeto devuelto. Con el patrón de módulo revelador, ¡no hay necesidad de hacer esto! Simplemente puede definir todas sus variables y funciones en un solo lugar, luego, para cualquiera de las que desee hacer públicas, simplemente déles un alias en un objeto literal y devuélvalo en su lugar. Sigamos adelante y refactoricemos uno de nuestros ejemplos anteriores para hacer uso del patrón de módulo revelador.


El patrón del módulo revelador en acción

Hacer clic Claro

Tenga en cuenta el nombre del módulo en minúsculas y el paréntesis inmediato después de la función que hace que se invoca automáticamente. Este enfoque crea un singleton que es un solo objeto en la memoria. Tenga en cuenta que cuando llamamos métodos en este caso, los llamamos directamente en esa instancia de singleton. Por ejemplo, en tesla.gofast()lugar de instancias separadas como model3.gofast()roadster.gofast()Puede encontrar esto más limitante que cuando pudimos crear nuevas instancias a voluntad cuando proporcionamos una demostración del patrón del módulo. ¡No temáis!


¡Úselo newcon el patrón de módulo revelador si lo desea!

Aún puede hacer uso de la newpalabra clave con el patrón de módulo revelador si lo desea. Simplemente deje el ()paréntesis que se invoca inmediatamente después de la declaración del módulo, cambie el nombre del módulo a minúsculas (opcional) y luego vuelva a subir a voluntad. Probemos ese enfoque ahora.

Hacer clic Claro

Una vez más, ¡esto funciona como un campeón! Encuentro que este enfoque es lo mejor de ambos mundos. Obtenemos los beneficios del contenedor de módulos, una API más fácil de leer y la capacidad de crear tantas instancias como queramos. Tenga en cuenta que en el objeto literal, el nombre de la clave de cada par clave / valor es el nombre del miembro expuesto. En nuestro ejemplo aquí, simplemente devolvimos un mapeo uno a uno de alias para nombrar a los miembros públicos. Este es un patrón agradable ya que evita confusiones. Si desea asignar un nombre a su función en el interior del módulo y exponerlo públicamente como otro nombre a las personas que llaman externas, también puede hacerlo. En nuestro ejemplo tenemos una función gofast () y así es como la llamamos en nuestras instancias. ¿Y si quisiera que la gente llamara a esa función usandoblastoffen lugar de gofastSencillo. Cambie la returndeclaración en el módulo así.

Con ese pequeño cambio, ahora puede llamar a un código como model3.blastoff()roadster.blastoff(), y detrás de escena, en realidad es la gofast()función que le proporciona la implementación. Es un método simple de crear alias para las funciones que desea hacer públicas. Nómbrelos como quiera, siempre que tengan sentido para usted.


Resumen del patrón del módulo revelador de JavaScript

Al concluir este tutorial, descubrimos que el patrón de módulo revelador nos brinda una buena manera de encapsular variables y funciones en un objeto reutilizable. También vimos el gran beneficio de poder declarar todas sus variables y funciones en un área, luego simplemente devolver un objeto que contiene alias por los que le gustaría llamar a sus funciones. Es bastante similar al patrón del módulo en sí, sin embargo, es posible que le guste más el patrón del módulo revelador porque es más fácil de leer. Al igual que otros patrones de software, nos ayuda a facilitar el mantenimiento, fomentar la reutilización del código y minimizar las colisiones de nombres en el espacio de nombres global.


Publicar un comentario

0 Comentarios