7 formas de crear Singleton en Javascript

Jan 23 2023

Hola, mis amantes de los bits favoritos. Hoy hablaremos sobre lo más común que puede usar en su proyecto: Patrón Singleton.

Hola, mis amantes de los bits favoritos . Hoy hablaremos sobre lo más común que puede usar en su proyecto: Patrón Singleton .

Para aquellos que ya conocen lo que es singleton, sigan leyendo, seguro que este artículo les sorprenderá.

Para otros…

Patrón Singleton : se usa con mayor frecuencia y es una de las cosas que se preguntan en casi todas las entrevistas. Se puede describir como un patrón que restringe el uso de una clase a un solo uso. En otras palabras, en su aplicación, solo se permite tener una instancia de su clase.

Ya que esto está resuelto, pasemos a los ejemplos.

Este artículo incluirá ejemplos de Javascript y Typescript .

Singleton clásico

La forma más icónica y clásica de implementar un singleton. Ejemplo de ello se puede encontrar en cada tutorial, y cada libro de programación.

Ejemplo de JavaScript :

Ejemplo de mecanografiado :

Y aquí está cómo usarlo:

ClassicSingleton.instance.invoke();

ventajas

Solución simple, directa y limpia.
Enfoque más común

Inicializado en el inicio de la aplicación, lo que puede conducir a la lentitud en el inicio de la aplicación
No se puede heredar correctamente, lo que significa que debe duplicar este código en cada clase en la que desee usar singleton

Lazy Singleton se usa principalmente cuando no desea inicializar su singleton de inmediato y desea usarlo, solo cuando es necesario. Una buena forma de microoptimizar tu aplicación. En lo demás se acerca al Classic Singleton .

Ejemplo de JavaScript :

Ejemplo de mecanografiado :

Y aquí está cómo usarlo:

LazySingleton.instance().invoke();

ventajas

Inicializado cuando se usa y no ocupa memoria cuando no fue llamado
Solución simple y limpia

Inicializado cuando se usa, lo que puede provocar retrasos menores en el uso por primera vez
No se puede heredar, lo que significa que debe duplicar este código en cada clase en la que desee usar singleton

Casi lo mismo que Lazy Singleton pero usamos un captador en lugar de una función simple, lo que nos permite evitar el uso de corchetes desagradables ().

Ejemplo de JavaScript :

Ejemplo de mecanografiado :

Cómo usarlo:

LazyGetterSingleton.instance.invoke();

Tiene los mismos pros y contras que Lazy Singleton .

Importar singleton

No puede decir que su enfoque sea común, porque no todos los lenguajes de programación siguen el paradigma de exportar/importar declaraciones de archivos.

Ejemplo de Javascript ES6 (Babel):

Ejemplo de Javascript (nodo):

Ejemplo de mecanografiado :

Cómo usar Javascript ES6 (Babel) y la versión Typescript :

import { importSingletion } from "./ImportSingleton";

importSingleton.invoke();

const importSingleton = require("./ImportSingleton");

importSingleton.invoke()

ventajas

Solución simple, directa y limpia.

Inicializado en el inicio de la aplicación, lo que puede conducir a la lentitud en el inicio de la aplicación
No se puede automatizar, lo que conduce a la base del código de duplicación

Decorador Singleton

Enfoque interesante cuando usa dos patrones juntos: Singleton y Decorator .

La idea central es minimizar la duplicación de código.

Ejemplo de JavaScript :

Puede usarlo con Typescript , pero desafortunadamente, por defecto, Typescript no nota la propiedad dinámica, y necesita escribir un código adicional, bastante sucio, para que Typescript lo admita. Es por eso que es preferible no usar este enfoque con Typescript .

Cómo usarlo:

DecoratorSingleton.instance.invoke();

Solución simple, directa y limpia.
Puede mantener una base de código bastante limpia y evitar duplicaciones de código

Inicializado en el inicio de la aplicación, lo que puede conducir a la lentitud en el inicio de la aplicación

Un enfoque genial que, de nuevo, une dos patrones, Singleton y Decorator , pero también te permite ver tus singletons desde un ángulo diferente. Y como bono, abre una puerta a un conocimiento profundo de Javascript .

Ejemplo de JavaScript :

Ejemplo de mecanografiado :

Y aquí está cómo usar las versiones de Javascript y Typescript :

new BindSingleton().invoke()

BindSingleton().invoke()

Puede verificar la corrección con:

new ConstructorSingleton() === new ConstructorSingleton() // => true

ConstructorSingleton() === ConstructorSingleton() // => true

Bueno, sencillo. En primer lugar, nuestro BindSingletonnunca fue una clase, es una función. Es por eso que podemos usar BindSingleton()en él. ¿Guay, verdad?

Ahora, ¿qué pasa con new BindSingleton(), por qué sigue devolviendo la misma instancia? Bastante obvio de nuevo, nuestra lógica verifica la instancefunción de verificación de propiedades estáticas en la clase, si la propiedad no existe, creamos una instancia de nuestra clase, y si la propiedad existe, la usamos en lugar de inicializar una nueva instancia.

ventajas

Ofrece muchas formas de acceder a su singleton
Considerado soltero perezoso
Puede mantener su base de código bastante limpia

Requiere una comprensión profunda de Javascript y puede confundir a los desarrolladores sin experiencia
En comparación con otros métodos, mucho código.

Constructor Singleton

Este requiere una comprensión muy profunda de cómo funciona Javascript , pero realmente es una solución elegante.

Ejemplo de JavaScript :

Ejemplo de mecanografiado:

Y aquí está cómo usarlo:

new ConstructorSingleton().invoke()

new ConstructorSingleton() === new ConstructorSingleton() // => true

Cuando ejecutamos nuestro código por primera vez, se inicializa cachey nuestra creación de la instancia cuando llega a constructor, verifica el valor de retorno y, en la primera ejecución, el constructor regresa, undefinedlo que obliga a Javascript a crear una nueva instancia de la clase. Pero todas las siguientes ejecuciones obtendrán nuestra instancia cachey constructordevolverán nuestra instancia en lugar de undefinedlo cual indicará a Javascript que debe devolver nuestra instancia existente.

7 formas de crear Singleton en Javascript

Singleton clásico

Importar singleton

Decorador Singleton

Constructor Singleton

Recursos