ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript ES6+ でのシングルトン パターンの実装: ステップバイステップ ガイド

JavaScript ES6+ でのシングルトン パターンの実装: ステップバイステップ ガイド

王林
リリース: 2023-08-30 18:33:02
オリジナル
1321 人が閲覧しました

在 JavaScript ES6+ 中实现单例模式:分步指南

この記事では、JavaScript でシングルトン パターンを実装する方法を説明します。

フルスタック JavaScript 開発者であれば、JavaScript が素晴らしい Web サイトを構築するために使用できる強力な言語であることをご存知でしょう。一方、JavaScript をフロントエンドのフォーム検証と AJAX 呼び出しにのみ使用している場合は、JavaScript でできることのほんの表面をなぞっただけで、それ以上のことができます。これは機能が豊富な言語であるため、その上に構築されたフレームワークが多数あります。

この記事では、オブジェクト指向 JavaScript の便利なプログラミング パターンであるシングルトン パターンについて説明します。シングルトン オブジェクトは、アプリケーションの実行中にグローバル スコープ内で 1 回だけ作成されます。これらは、リソースを共有したり、アプリケーションの異なる部分間を調整したりするために使用されます。

シングルトンパターンとは何ですか?

シングルトン パターンの定義を見てみましょう:

ソフトウェア エンジニアリングにおいて、シングルトン パターンは、クラスのインスタンス化を「単一」インスタンスに制限するソフトウェア設計パターンです。これは、システム全体の動作を調整するためにオブジェクトが 1 つだけ必要な場合に便利です。

アプリケーションを開発するとき、アプリケーション全体でグローバル オブジェクトを作成する必要がある場合があります。具体的には、リクエストの存続期間全体で 1 回だけインスタンス化されるオブジェクトが必要です。たとえば、リクエストごとに複数のデータベース オブジェクトを作成する必要がないため、リクエスト全体でグローバルに保持したいデータベース接続オブジェクトが考えられます。この場合、オブジェクトのコピーが 1 つだけインスタンス化されることが保証されるため、シングルトン パターンは非常に便利です。

クイックルック: 古いバージョンの JavaScript のシングルトン パターン

このセクションでは、JavaScript の古いバージョンでシングルトン パターンを実装する方法を簡単に説明します。

次の例を見てみましょう。

上記の例では、Singleton オブジェクトをクロージャとして実装したため、すぐに呼び出されます。これは、オブジェクトをインスタンス化するために呼び出すことができる getInstance メソッドを実装します。 getInstance メソッドでは、探しているオブジェクトが instance プロパティにすでに存在するかどうかを確認し、存在する場合は別のオブジェクトを作成しません。オブジェクトが含まれていない場合は、createInstance メソッドを呼び出して新しいオブジェクトをインスタンス化し、それを返します。こうすることで、新しいオブジェクトをインスタンス化しようとするたびに、オブジェクトのコピーが 1 つだけ作成されるようになります。

これを実証するために、Singleton.getInstance() メソッドを 2 回呼び出して、実際に 2 つの異なるオブジェクトが作成されるかどうかを確認します。コンソールでは、両方のオブジェクトが同一であり、両方とも同じ日付と時刻が出力されることがわかります。

これは、古いバージョンの JavaScript でシングルトン パターンを実装する方法です。次のセクションでは、JavaScript ES6 バージョンでこれを実装する方法を見ていきます。

ES6 のシングルトン パターン

このセクションでは、JavaScript の ES6 バージョンでシングルトン パターンを実装する方法を学びます。 ES6 の方法に関しては、シングルトン パターンを実装できる方法がいくつかあります。

ES6モジュール

ES6 モジュールを使用したことがあり、まだ知らなかった場合は、ES6 モジュールはデフォルトでシングルトンです。具体的には、モジュールと const キーワードを組み合わせることで、シングルトンを簡単に作成できます。

以下の ES6 モジュール コードを見てみましょう。

リーリー

これで、上記の ES6 モジュールをインポートするたびに、同じバージョンの currentDateAndTime オブジェクトを取得できることが保証されます。 currentDateAndTime オブジェクトはモジュール スコープであるため、上記の ES6 モジュールを別のファイルに含めるたびに同じオブジェクトを取得することが保証されます。

ES6クラス

このセクションでは、ES6 クラスを使用してシングルトン パターンを実装する方法を学びます。

次の例を見てみましょう。

ご覧のとおり、アプリケーション間でデータベース接続オブジェクトをインスタンス化するために使用できる DBConnection クラスを実装しました。

これをテストするために、DBConnection クラスの getInstance メソッドを呼び出して 2 つのオブジェクトをインスタンス化します。次に、2 つのオブジェクトを比較して、それらが同じかどうかを確認します。シングルトン パターンを使用しているため、それらは同じである必要があり、console.log ステートメントは確認のために true を出力します。このオブジェクトは必要なときにのみ作成され、初期ロード時には作成されないため、これを遅延シングルトン オブジェクトと呼ぶこともできます。

これは、シングルトン パターンを実装するクラスを定義する方法です。

带有模块的 ES6 类

在本节中,我们将了解如何使用 ES6 类和模块来实现单例模式。

让我们看一下下面的例子。

  constructor(conString) {}

  static getInstance(conString) {
    if (!this.instance) {
      this.instance = new DBConnection(conString);
    }

    return this.instance;
  }
}

const dbConObj = DBConnection.getInstance('mysqldb1');

export default dbConObj;
ログイン後にコピー

创建作用域为模块的类的实例是实现单例模式的最佳方法。因此,如果您正在使用 ES6 模块,这是使用 ES6 类实现单例模式的推荐方法。

这就是如何使用 ES6 类和模块实现单例模式。

结论

今天,我们讨论了 JavaScript 中的单例模式。除了基础知识之外,我们还通过几个示例来了解它如何与不同版本的 JavaScript 配合使用。

以上がJavaScript ES6+ でのシングルトン パターンの実装: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート