7 sposobów tworzenia singletona w JavaScript
Witajcie moi ulubieni miłośnicy bitów . Dzisiaj porozmawiamy o najczęstszej rzeczy, którą możesz wykorzystać w swoim projekcie — Singleton Pattern .
Dla kogoś, kto już wie, czym jest singleton, przewijaj dalej, jestem pewien, że ten artykuł Cię zaskoczy.
Dla innych…
Singleton Pattern — jest najczęściej używany i jest jedną z rzeczy, o które pyta się w prawie każdym wywiadzie. Można to opisać jako wzorzec, który ogranicza użycie klasy do jednego użycia. Innymi słowy, w twojej aplikacji możesz mieć tylko jedną instancję swojej klasy.
Skoro sprawa jest załatwiona, przejdźmy do przykładów.
Ten artykuł będzie zawierał przykłady JavaScript i TypeScript .
Klasyczny singleton
Najbardziej kultowy i klasyczny sposób implementacji singletona. Przykład tego można znaleźć w każdym samouczku i każdej książce o programowaniu.
Przykład JavaScript :
Przykład maszynopisu :
A oto jak go używać:
ClassicSingleton.instance.invoke();
Zalety
- Proste, proste i czyste rozwiązanie
- Najczęstsze podejście
- Inicjowane podczas uruchamiania aplikacji, co może powodować powolne uruchamianie aplikacji
- Nie można poprawnie odziedziczyć, co oznacza, że musisz zduplikować ten kod w każdej klasie, w której chcesz użyć singletona
Lazy Singleton jest używany głównie wtedy, gdy nie chcesz od razu inicjować swojego singletona i chcesz go używać tylko wtedy, gdy jest to wymagane. Dobry sposób na mikrooptymalizację aplikacji. W pozostałych kwestiach zbliża się do Classic Singleton .
Przykład JavaScript :
Przykład maszynopisu :
A oto jak go używać:
LazySingleton.instance().invoke();
Zalety
- Inicjowany, gdy jest używany i nie zajmuje pamięci, gdy nie został wywołany
- Proste i czyste rozwiązanie
- Inicjowane podczas użycia, co może prowadzić do niewielkich opóźnień przy pierwszym użyciu
- Nie można dziedziczyć, co oznacza, że musisz zduplikować ten kod w każdej klasie, w której chcesz użyć singletona
Prawie to samo, co Lazy Singleton , ale używamy gettera zamiast zwykłej funkcji, co pozwala nam uniknąć używania paskudnych nawiasów ().
Przykład JavaScript :
Przykład maszynopisu :
Jak tego użyć:
LazyGetterSingleton.instance.invoke();
Ma te same zalety i wady , co Lazy Singleton .
Importuj Singletona
Nie można powiedzieć, że jest to podejście powszechne, ponieważ nie każdy język programowania stosuje paradygmat eksportu/importu deklaracji z plików.
Przykład JavaScript ES6 (Babel):
Przykład Javascript (węzeł):
Przykład maszynopisu :
Jak korzystać z Javascript ES6 (Babel) i wersji TypeScript :
import { importSingletion } from "./ImportSingleton";
importSingleton.invoke();
const importSingleton = require("./ImportSingleton");
importSingleton.invoke()
Zalety
- Proste, proste i czyste rozwiązanie
- Inicjowane podczas uruchamiania aplikacji, co może powodować powolne uruchamianie aplikacji
- Nie można zautomatyzować, co prowadzi do bazy kodów duplikatów
Dekorator Singleton
Ciekawe podejście, gdy używasz razem dwóch wzorców: Singleton i Decorator .
Główną ideą jest zminimalizowanie powielania kodu.
Przykład JavaScript :
Możesz go używać z TypeScript , ale niestety TypeScript domyślnie nie zauważa dynamicznej właściwości i musisz napisać dodatkowy, dość brudny kod, aby TypeScript go obsługiwał. Dlatego lepiej nie używać tego podejścia z TypeScript .
Jak tego użyć:
DecoratorSingleton.instance.invoke();
- Proste, proste i czyste rozwiązanie
- Możesz zachować dość czystą bazę kodu i uniknąć powielania kodu
- Inicjowane podczas uruchamiania aplikacji, co może powodować powolne uruchamianie aplikacji
Fajne podejście, które ponownie łączy ze sobą dwa wzorce, Singleton i Decorator , ale także pozwala spojrzeć na singletony z innej perspektywy. A jako bonus, otwiera drzwi do głębokiej znajomości Javascript .
Przykład JavaScript :
Przykład maszynopisu :
A oto jak używać wersji Javascript i TypeScript :
new BindSingleton().invoke()
BindSingleton().invoke()
Możesz sprawdzić poprawność za pomocą:
new ConstructorSingleton() === new ConstructorSingleton() // => true
ConstructorSingleton() === ConstructorSingleton() // => true
Cóż, proste. Po pierwsze, nasza BindSingletonnigdy nie była klasą, jest funkcją. Dlatego możemy BindSingleton()na nim użyć. Fajne, prawda?
A co z tym new BindSingleton(), dlaczego wciąż zwraca tę samą instancję? Znowu dość oczywiste, nasza logika sprawdza w instancefunkcji sprawdzanie właściwości statycznych w klasie, jeśli właściwość nie istnieje, tworzymy instancję naszej klasy, a jeśli właściwość istnieje — używamy jej zamiast inicjowania nowej instancji.
Zalety
- Daje wiele sposobów na uzyskanie dostępu do singletona
- Uważany za leniwego singletona
- Możesz utrzymać bazę kodu w miarę czystą
- Wymaga głębokiej znajomości języka JavaScript i może dezorientować niedoświadczonych programistów
- W porównaniu z innymi metodami — dużo kodu.
Konstruktor Singleton
Ten wymaga naprawdę głębokiego zrozumienia, jak działa Javascript , ale jest naprawdę eleganckim rozwiązaniem.
Przykład JavaScript :
Przykład maszynopisu:
A oto jak go używać:
new ConstructorSingleton().invoke()
new ConstructorSingleton() === new ConstructorSingleton() // => true
Kiedy pierwszy raz uruchamiamy nasz kod — inicjalizuje się cachei tworzymy instancję, gdy dochodzi do constructor, sprawdza zwracaną wartość, aw pierwszym uruchomieniu konstruktora zwraca, undefinedco zmusza Javascript do utworzenia nowej instancji klasy. Ale wszystkie kolejne uruchomienia otrzymają naszą instancję cachei constructorzwrócą naszą instancję, zamiast tego undefinedwskaże Javascriptowi , że powinien zwrócić naszą istniejącą instancję.
Wady :
- Wymaga głębokiej znajomości JavaScript
- Inicjowane podczas uruchamiania aplikacji, co może powodować powolne uruchamianie aplikacji
- Nie można poprawnie odziedziczyć, co oznacza, że musisz zduplikować ten kod w każdej klasie, w której chcesz użyć singletona
Zasoby
- Link do repozytorium
Nie zapomnij śledzić mnie po więcej!
Twój kawałek. 01101100 01101111 01110110 01100101

![Czym w ogóle jest lista połączona? [Część 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)



































