7 cách để tạo Singleton trong Javascript

Jan 23 2023

Xin chào, những người yêu thích bit yêu thích của tôi. Hôm nay chúng ta sẽ nói về thứ phổ biến nhất mà bạn có thể sử dụng trong dự án của mình — Singleton Pattern.

Xin chào, những người yêu thích bit yêu thích của tôi . Hôm nay chúng ta sẽ nói về thứ phổ biến nhất mà bạn có thể sử dụng trong dự án của mình — Singleton Pattern .

Đối với một số bạn đã biết singleton là gì, hãy tiếp tục cuộn, tôi chắc chắn rằng bài viết này sẽ làm bạn ngạc nhiên.

Cho người khác…

Mẫu Singleton - được sử dụng phổ biến nhất và là một trong những điều được hỏi trong hầu hết mọi cuộc phỏng vấn. Nó có thể được mô tả như một mẫu giới hạn việc sử dụng một lớp đối với một lần sử dụng. Nói cách khác, trong ứng dụng của bạn, nó chỉ được phép có một thể hiện của lớp của bạn.

Vì điều này đã được giải quyết, hãy chuyển sang các ví dụ.

Bài viết này sẽ bao gồm cả các ví dụ Javascript và Typescript .

Singleton cổ điển

Cách cổ điển và mang tính biểu tượng nhất để triển khai một singleton. Bạn có thể tìm thấy ví dụ về nó trong mọi hướng dẫn và mọi cuốn sách lập trình.

Ví dụ Javascript :

Ví dụ về bản đánh máy :

Và đây là cách sử dụng nó:

ClassicSingleton.instance.invoke();

ưu

Giải pháp đơn giản, dễ hiểu và sạch sẽ
Cách tiếp cận phổ biến nhất

Khởi tạo khi khởi động ứng dụng, điều gì có thể dẫn đến khởi động ứng dụng chậm
Không thể được kế thừa đúng cách, điều đó có nghĩa là bạn cần sao chép mã này trong mỗi lớp mà bạn muốn sử dụng singleton

Lazy Singleton chủ yếu được sử dụng khi bạn không muốn khởi tạo singleton của mình ngay lập tức và chỉ muốn sử dụng nó khi cần thiết. Một cách hay để thực hiện tối ưu hóa vi mô cho ứng dụng của bạn. Trong các vấn đề khác là gần với Classic Singleton .

Ví dụ Javascript :

Ví dụ về bản đánh máy :

Và đây là cách sử dụng nó:

LazySingleton.instance().invoke();

ưu

Được khởi tạo khi được sử dụng và không chiếm bộ nhớ khi không được gọi
Giải pháp đơn giản và sạch sẽ

Được khởi tạo khi sử dụng, điều gì có thể dẫn đến sự chậm trễ nhỏ khi sử dụng lần đầu
Không thể được kế thừa, điều đó có nghĩa là bạn cần sao chép mã này trong mỗi lớp mà bạn muốn sử dụng singleton

Gần giống như Lazy Singleton nhưng chúng ta sử dụng một getter thay vì một hàm đơn giản, điều này cho phép chúng ta tránh việc sử dụng các dấu ngoặc khó chịu ().

Ví dụ Javascript :

Ví dụ về bản đánh máy :

Làm thế nào để sử dụng nó:

LazyGetterSingleton.instance.invoke();

Nó có những Ưu điểm và Nhược điểm giống như Lazy Singleton .

Nhập đơn

Bạn không thể nói đó là cách tiếp cận phổ biến, bởi vì không phải ngôn ngữ lập trình nào cũng tuân theo mô hình xuất/nhập khai báo từ tệp.

Ví dụ Javascript ES6 (Babel):

Ví dụ về Javascript (Nút):

Ví dụ về bản đánh máy :

Cách sử dụng phiên bản Javascript ES6 (Babel) và Typescript :

import { importSingletion } from "./ImportSingleton";

importSingleton.invoke();

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

importSingleton.invoke()

ưu

Giải pháp đơn giản, dễ hiểu và sạch sẽ

Khởi tạo khi khởi động ứng dụng, điều gì có thể dẫn đến khởi động ứng dụng chậm
Không thể tự động hóa, dẫn đến cơ sở mã trùng lặp

Đơn vị trang trí

Cách tiếp cận thú vị khi bạn sử dụng hai mẫu cùng nhau: Singleton và Decorator .

Ý tưởng cốt lõi là giảm thiểu sao chép mã.

Ví dụ Javascript :

Bạn có thể sử dụng nó với Typescript , nhưng thật không may, theo mặc định Typescript không nhận thấy thuộc tính động và bạn cần viết mã bổ sung, khá bẩn, cho Typescript để hỗ trợ nó. Đó là lý do tại sao không nên sử dụng phương pháp này với Typescript .

Làm thế nào để sử dụng nó:

DecoratorSingleton.instance.invoke();

Giải pháp đơn giản, dễ hiểu và sạch sẽ
Bạn có thể duy trì một cơ sở mã khá rõ ràng và tránh trùng lặp mã

Khởi tạo khi khởi động ứng dụng, điều gì có thể dẫn đến khởi động ứng dụng chậm

Một lần nữa, cách tiếp cận thú vị này kết hợp hai mẫu với nhau, Singleton và Decorator , nhưng cũng cho phép bạn xem các mẫu đơn của mình từ một góc độ khác. Và như một phần thưởng, mở ra cánh cửa dẫn đến kiến thức sâu rộng về Javascript .

Ví dụ Javascript :

Ví dụ về bản đánh máy :

Và đây là cách sử dụng phiên bản Javascript và Typescript :

new BindSingleton().invoke()

BindSingleton().invoke()

Bạn có thể kiểm tra tính chính xác với:

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

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

Vâng, đơn giản. Trước hết, chúng tôi BindSingletonchưa bao giờ là một lớp, nó là một chức năng. Đó là lý do tại sao chúng ta có thể sử dụng BindSingleton()nó. Mát mẻ, phải không?

Bây giờ thì sao new BindSingleton(), tại sao nó cứ trả về cùng một phiên bản? Một lần nữa khá rõ ràng, kiểm tra logic của chúng ta trong instancechức năng kiểm tra thuộc tính tĩnh trong lớp, nếu thuộc tính không tồn tại, chúng ta tạo một thể hiện của lớp và nếu thuộc tính tồn tại - chúng ta sử dụng nó thay vì khởi tạo một thể hiện mới.

ưu

Cung cấp rất nhiều cách để bạn có thể truy cập singleton của mình
Được coi là Singleton lười biếng
Bạn có thể giữ cơ sở mã của mình khá sạch sẽ

Yêu cầu hiểu biết sâu về Javascript và có thể gây nhầm lẫn cho các nhà phát triển thiếu kinh nghiệm
So với các phương pháp khác — rất nhiều mã.

Người xây dựng Singleton

Điều này đòi hỏi sự hiểu biết thực sự sâu sắc về cách thức hoạt động của Javascript nhưng thực sự là một giải pháp tinh tế.

Ví dụ Javascript :

Ví dụ về bản đánh máy:

Và đây là cách sử dụng nó:

new ConstructorSingleton().invoke()

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

Khi chúng tôi chạy mã lần đầu tiên - nó sẽ khởi tạo cachevà tạo phiên bản của chúng tôi khi đến constructor, kiểm tra giá trị trả về và trong hàm tạo chạy lần đầu tiên trả về, undefinedđiều này buộc Javascript phải tạo một phiên bản mới của lớp. Nhưng tất cả các lần chạy tiếp theo sẽ lấy phiên bản của chúng tôi cachevà constructorsẽ trả về phiên bản của chúng tôi thay vì undefinedphiên bản này sẽ cho Javascript biết rằng nó sẽ trả về phiên bản hiện có của chúng tôi.

7 cách để tạo Singleton trong Javascript

Singleton cổ điển

Nhập đơn

Đơn vị trang trí

Người xây dựng Singleton

Tài nguyên