ホームページ ウェブフロントエンド jsチュートリアル JavaScriptプログラミングのシングルトン設計モデルの解説_基礎知識

JavaScriptプログラミングのシングルトン設計モデルの解説_基礎知識

May 16, 2016 pm 03:33 PM
javascript シングルトンパターン

JavaScript では、シングルトン パターンは最も基本的で頻繁に使用されるデザイン パターンの 1 つであり、誤って使用してしまう可能性があります。
この記事では、最も基本的な理論から始めて、シングルトン パターンの基本概念と実装について説明し、最後に例を使用してシングルトン パターンの適用について説明します。

理論的根拠

コンセプト

シングルトン モードは、名前が示すように、インスタンスが 1 つだけ存在することを意味します。シングルトン モードでは、システム内にクラスのインスタンスが 1 つだけ存在し、外部からそのインスタンスに簡単にアクセスできるようにすることができるため、インスタンス数の制御が容易になり、システム リソースが節約されます。特定のクラスのオブジェクトを 1 つだけシステム内に存在させたい場合は、シングルトン パターンが最適なソリューションです。

基本構造

最も単純なシングルトン パターンは、関連するプロパティとメソッドをまとめたオブジェクト リテラルで始まります。

var singleton = {
  prop:"value",
  method:function(){
  }
}
ログイン後にコピー

この形式のシングルトン モードでは、すべてのメンバーがパブリックであり、シングルトン経由でアクセスできます。この欠点は、ユーザーに公開されることが想定されていない補助メソッドがシングルトンに存在し、ユーザーがこれらのメソッドを使用し、その後のメンテナンス中に一部の補助メソッドが削除されると、プログラム エラーが発生することです。
このような間違いを避けるにはどうすればよいでしょうか?

プライベートメンバーによるシングルトンパターン

クラスにプライベート メンバーを作成するにはどうすればよいですか? これは、クロージャを要求することで実現されます。クロージャの知識については、この記事では詳しく説明しませんので、ご自身で調べてください。
基本的な形式は次のとおりです:

var singleton = (function () {
      var privateVar = "private";
      return {
        prop: "value",
        method: function () {
          console.log(privateVar);
        }
      }
    })();
ログイン後にコピー

1 つ目は自己実行型の匿名関数で、変数 privateVar が宣言され、オブジェクトが返されてシングルトン オブジェクトに割り当てられます。 privateVar 変数は、匿名関数の外部からはアクセスできません。このプライベート変数は、関数内または公開されたメソッドを通じてのみアクセスできます。この形式はモジュールパターンとも呼ばれます。

遅延インスタンス化

直接リテラルでもプライベート メンバー シングルトン モードでも、どちらもスクリプトのロード時に作成されるシングルトンですが、場合によってはページがこのシングルトン オブジェクトを使用しないことがあり、リソースの無駄が発生します。この状況に対処する最善の方法は遅延読み込みです。これは、必要になるまでシングルトン オブジェクトが実際にはインスタンス化されないことを意味します。

var singleton = (function () {
      function init() {
        var privateVar = "private";
        return {
          prop: "value",
          method: function () {
            console.log(privateVar);
          }
        }
      }
      var instance = null;
      return {
        getInstance: function () {
          if (!instance) {
            instance = init();
          }
          return instance;
        }
      }
    })();
ログイン後にコピー

まず、シングルトン オブジェクトを作成するコードを init 関数にカプセル化し、次にシングルトン オブジェクトのインスタンスを表すプライベート変数インスタンスを宣言し、シングルトン オブジェクトを取得するメソッド getInstance を公開します。
呼び出すときは、singleton.getInstance() を通じて呼び出されます。getInstance が呼び出されたときに、実際にはシングルトン オブジェクトが作成されます。

適用シーン

シングルトン パターンは、JS で最も一般的に使用されるデザイン パターンであり、モジュール性とコード構成の強化の観点から、可能な限りシングルトン パターンを使用する必要があります。大規模なプロジェクトでは、関連するコードをまとめて整理し、メンテナンスを容易にすることができます。各モジュールの遅延読み込みにより、パフォーマンスが向上し、実装の詳細が非表示になり、一般的に使用される API が公開されます。アンダースコアや jQuery などの一般的なクラス ライブラリは、シングルトン モード アプリケーションとして理解できます。

実戦との組み合わせ

前に述べたように、シングルトン パターンは最も一般的に使用されるデザイン パターンの 1 つです。例を示して説明します。
次のコードは主に、シングルトン モードで実装された単純な日付ヘルパー クラスを実装します。

基本的なシングルトン パターン構造

var dateTimeHelper = {
      now: function () {
        return new Date();
      },
      format: function (date) {
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      }
    }; 
console.log(dateTimeHelper.now());<br />
ログイン後にコピー
このコードはオブジェクト リテラルを通じてシングルトン モードを実装しており、使用時にメソッドを直接呼び出すことができます。

遅延読み込みはシングルトン パターンを実装します

 var dateTimeHelper = (function () {
      function init() {
        return {
          now: function () {
            return new Date();
          },
          format: function (date) {
            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
          }
        }
      }
      var instance = null;
      return {
        getInstance: function () {
          if (!instance) {
            instance = init();
          }
          return instance;
        }
      }
    })(); 
console.log(dateTimeHelper.getInstance().now())
ログイン後にコピー
これは遅延読み込みシングルトン パターンです。

さらにいくつかの例を見てみましょう:


実装 1: 最も単純なオブジェクト リテラル

var singleton = {

    attr : 1,

    method : function(){ return this.attr; }

  }



var t1 = singleton ;

var t2 = singleton ;

ログイン後にコピー
したがって、明らかに、t1 === t2 です。

非常にシンプルで使いやすいのですが、欠点は、カプセル化がなく、すべての属性メソッドが公開されていることです。プライベート変数を使用する必要がある場合には、これでは不十分なようです。もちろん、これに関しては一定の欠点もあります。

実装 2: コンストラクター内部の判断

実際、クラスのインスタンスが既に存在するかどうかの判断がコンストラクター内に配置されることを除いて、これは元の JS 実装にある程度似ています。

function Construct(){

  // 确保只有单例

  if( Construct.unique !== undefined ){

    return Construct.unique; 

  }

  // 其他代码

  this.name = "NYF";

  this.age="24";

  Construct.unique = this;

}



var t1 = new Construct() ;

var t2 = new Construct() ;

ログイン後にコピー

那么也有的, t1 === t2 。

也是非常简单,无非就是提出一个属性来做判断,但是该方式也没有安全性,一旦我在外部修改了Construct的unique属性,那么单例模式也就被破坏了。

实现3 : 闭包方式

对于大着 灵活 牌子的JS来说,任何问题都能找到 n 种答案,只不过让我自己去掂量孰优孰劣而已,下面就简单的举几个使用闭包实现单例模式的方法,无非也就是将创建了的单例缓存而已。

var single = (function(){

  var unique;

  function Construct(){

    // ... 生成单例的构造函数的代码

  }



  unique = new Constuct();



  return unique;

})();
ログイン後にコピー

只要 每次讲 var t1 = single; var t2 = single;即可。 与对象字面量方式类似。不过相对而言更安全一点,当然也不是绝对安全。

如果希望会用调用 single() 方式来使用,那么也只需要将内部的 return 改为

  return function(){

    return unique;

  } 
ログイン後にコピー

    以上方式也可以使用 new 的方式来进行(形式主义的赶脚)。当然这边只是给了闭包的一种例子而已,也可以在 Construct 中判断单例是否存在 等等。 各种方式在各个不同情况做好选着即可。


总结

单例模式的好处在于对代码的组织作用,将相关的属性和方法封装在一个不会被多次实例化的对象中,让代码的维护和调试更加轻松。隐藏了实现细节,可以防止被错误修改,还防止了全局命名空间的污染。另外可以通过惰性加载提高性能,减少不必要的内存消耗。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワーク プロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラ デバイスがあるとします。

See all articles