ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript のシングルトン パターンを理解するための 1 つの記事

JavaScript のシングルトン パターンを理解するための 1 つの記事

青灯夜游
リリース: 2023-04-25 19:53:11
転載
2461 人が閲覧しました

JS シングルトン パターンは一般的に使用される設計パターンであり、クラスのインスタンスが 1 つだけであることを保証できます。このモードは主に、名前の競合や繰り返しの読み込みを避けるためにグローバル変数を管理するために使用され、メモリ使用量を削減し、コードの保守性とスケーラビリティを向上させることもできます。

JavaScript のシングルトン パターンを理解するための 1 つの記事

価値シナリオ

JS シングルトン モードは、通常、次のシナリオに適しています。グローバル変数

シングルトン モードを使用すると、名前の競合やグローバル変数の繰り返しロードを回避でき、またグローバル変数をより適切に管理できるため、コードの保守性とスケーラビリティが向上します。たとえば、シングルトン モードを使用して、ページ構成情報やユーザーのログイン ステータスなどのグローバル データを管理できます。 [推奨される学習: JavaScript ビデオ チュートリアル

]

一意のオブジェクトの実装

一部のシナリオでは、インスタンスが 1 つだけ存在することを確認する必要があります。オブジェクトの。たとえば、非同期リクエスト キューを管理する必要がある場合、シングルトン モードを使用すると、キューにインスタンスが 1 つだけ存在するようになり、リクエストの繰り返しの送信やインスタンスの複数の作成が回避され、コードの信頼性とパフォーマンスが向上します。

システム リソースの管理

一部のアプリケーションでは、一部のタスクを処理するためにシステム リソースを使用する必要があります。たとえば、大量のレポートを印刷する必要がある場合、シングルトン モードを使用して印刷キューを管理し、システム リソースの過度の浪費を回避し、印刷効率を向上させることができます。

モジュール開発

モジュール開発では、通常、いくつかの関数を他のモジュールで再利用できるように、いくつかの関数をカプセル化する必要があります。シングルトン モードを使用すると、これらの関数のカプセル化と管理が容易になり、他のモジュールとのインターフェイスの競合が回避され、コードの保守性とスケーラビリティが向上します。

つまり、JS シングルトン パターンは多くのシナリオに適しており、コードをより適切に整理し、コードの可読性と保守性を向上させるのに役立ちます。まだシングルトンパターンを使ったことがない方は、ぜひ試してみてください。

実装方法

JS シングルトン モードを実装するにはさまざまな方法がありますが、ここでは一般的に使用されるいくつかの方法を紹介します。

オブジェクト リテラル

オブジェクト リテラルは、シングルトン オブジェクトを簡単に作成する簡単な方法です。例:
const singleton = {
  prop: 'value',
  method() {
    console.log(this.prop);
  }
};
ログイン後にコピー

このようにして、新しいインスタンスを作成せずにシングルトン オブジェクトに直接アクセスできます。このアプローチの欠点は、コンストラクターや継承などのオブジェクト指向機能が利用できないことです。

コンストラクター

コンストラクターは、new キーワードを使用してインスタンスを作成するためのより柔軟な方法です。例:
function Singleton() {
  if (Singleton.instance) {
    return Singleton.instance;
  }
  Singleton.instance = this;
  this.prop = 'value';
}
ログイン後にコピー

この例では、最初に Singleton クラスのインスタンスが既に存在するかどうかを確認します。存在する場合は、インスタンスを直接返します。そうでない場合は、新しいインスタンスを作成して静的変数 Singleton に保存します。次回使用するためのインスタンス。

クラス メソッド

次に、クラスを使用してシングルトン パターンを実装する例を示します。
class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    this.prop = 'value';
  }
  method() {
    console.log(this.prop);
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true
ログイン後にコピー

上の例では、class キーワードを使用して、コンストラクターが 1 つだけあるシングルトン クラスを定義しました。コンストラクターでは、インスタンスが既に存在するかどうかを確認し、存在する場合はインスタンスを返します。存在しない場合は、新しいインスタンスを作成して静的変数 Singleton.instance に保存します。同時に、シングルトン オブジェクトのプロパティとメソッドにアクセスして操作する方法を示すメソッド メソッドも定義します。

最後に、2 つのインスタンス (instance1、instance2) をそれぞれ作成しましたが、それらの参照アドレスを比較すると、それらが同じオブジェクトであることがわかります。これは、シングルトン パターンの実装が正しいことを証明します。

つまり、クラス メソッドを使用してシングルトン モードを実装することも一般的な方法であり、コードの可読性と保守性を向上させることができます。クラスの使用に慣れている場合は、このメソッドを使用してシングルトン パターンを実装してみることもできます。

概要

どちらの方法であっても、JS シングルトン パターンの利点は明らかです。これは、グローバル変数を管理し、名前の競合や繰り返しの読み込みを回避し、コードの保守性とスケーラビリティを向上させるのに役立ちます。同時に、メモリ使用量も削減され、コードのパフォーマンスも向上します。

つまり、JS シングルトン パターンは非常に便利な設計パターンであり、コードをより適切に整理し、コードの可読性と保守性を向上させるのに役立ちます。まだこのモードを使ったことがない方は、ぜひ試してみてください。そのシンプルさと実用性の虜になると思います。

プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 !

以上がJavaScript のシングルトン パターンを理解するための 1 つの記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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