JavaScript シングルトン パターンの概念とコード例

まえがき

他のプログラミング言語と同様に、JavaScript にもシングルトン モード、プロキシ モード、オブザーバー モードなどの多くの 設計パターン があります。JavaScript 設計パターンを上手に使用すると、コード ロジックがより明確になり、保守が容易になります。そしてリファクタリングします。

この記事では、JavaScript モードのより一般的で実用的なモードであるシングルトン モードを主に概念と例に分けて紹介します。例を紹介しながら、コード内の追加の知識ポイントも説明します。

シングルトンパターンの概念

まずシングルトンパターンとは何でしょうか？これは次のように理解できます。シングルトン パターンは、クラスがインスタンスを 1 つだけ持ち、グローバル アクセス ポイントを提供することを保証することを目的としています。

シングルトンの概念をまだ理解していない人もいるかもしれませんが、実際の例をいくつか想像してみてください。たとえば、アカウントを登録する際、登録したアカウントがすでに存在する場合、「アカウントはすでに存在します。このアカウントを使用してログインしますか?」と表示され、キャンセルしない限り同じアカウントを再度作成することはできません。元のアカウント。これは、シングルトン パターンを鮮明に具体化したものです。

同様の例は、Web ページ上のログイン ポップアップ ボックスです。ログイン ボタンを何度クリックしても、インターフェイスには常に 1 つのログイン ポップアップ ボックスのみが表示され、2 つ目のログイン ポップアップ ボックスは作成できません。 。

この記事では、ログイン ポップアップ ボックスを例としてシングルトン モードの使用方法を紹介します。

シングルトン モードのインスタンス

1.デモの表示

デモのアドレスは次のとおりです: ポップアップ ボックスの例

2. コードの表示

シングルトン モードのポップアップ ボックス インスタンスを構築するコードは、人によって書き方が異なる場合があります。ただし、目的は同じです。世界的にユニークでアクセス可能なポップアップ ボックスを構築することです。次に、この例を段階的に実装していきます。

(1) DOM オブジェクトを取得します

var $ = function(id) {
    return typeof id === 'string' ? document.getElementById(id) : id; 
};

まず、後で DOM に対する操作を容易にするために、関数型プログラミングの原理を使用して、ターゲット ID を取得する要素オブジェクトのメソッドをカプセル化し、直接use $(id) を取得できます。

(2) ポップアップフレームのコンストラクター

var Modal = function(id, html) {
    this.html = html;
    this.id = id;
    this.open = false;
};

ここでは、ポップアップフレームのコンストラクターとして Modal を宣言し、その中に public 属性 html、id、open を定義します。 HTML はポップアップ ボックス内のコンテンツを定義するために使用され、id はポップアップ ボックスの ID 名を定義するために使用され、open はポップアップ ボックスが開いているかどうかを判断するために使用されます。

(3) openメソッド

Modal.prototype.create = function() {
    if (!this.open) {
        var modal = document.createElement('p');

        modal.innerHTML = this.html;
        modal.id = this.id;
        document.body.appendChild(modal);

        setTimeout(function() {
            modal.classList.add('show');
        }, 0);

        this.open = true;
    }
};

Modalのプロトタイプチェーンにcreateメソッドを定義し、ポップアップボックスを作成してDOMに挿入し、クラス「show」のアニメーションを追加します。ポップアップボックス。ここでは classList について簡単に紹介します:

classList は要素クラスを操作するための className よりも便利な属性ですが、互換性の点で IE10 より前のバージョンとは互換性がありません:

提供するクラス操作メソッドは類似しています主に jQuery の addClass() と同様に、要素に 1 つ以上のクラス名を追加する

• add(class1, class2, …) があります。

• remove(class1, class2, …)要素から 1 つ以上のクラス名を削除します。クラス名。jQuery の RemoveClass() と同様です

• contains(class) は、jQuery の hasClass() と同様、指定されたクラス名が存在するかどうかを判断します

ここでは add を使用します。モーダルに show クラスを追加するメソッド。

(4) close メソッド

Modal.prototype.delete = function() {
    if (this.open) {
        var modal = $(this.id);

        modal.classList.add('hide'); 
        setTimeout(function() {
            document.body.removeChild(modal);
        }, 200);

        this.open = false;
    }
};

open メソッドを定義した後、ポップアップ ボックスを閉じるメソッドを定義し、その中のポップアップ ボックス オブジェクトに非表示のようなアニメーション効果を追加し、最後に削除しますページからのポップアップ ボックス オブジェクト。

(5) インスタンスを作成します

var createIntance = (function() {
    var instance;
    return function() {
        return instance || (instance = new Modal('modal', '这是一个弹框'))
    }
})();

これは、シングルトン パターンの実装の重要な部分です。知識ポイントを分析しましょう:

1. closure を使用してインスタンスのプライベート変数をカプセル化し、関数を返します

。

2. インスタンスが存在しない場合は || 構文を使用して、後者のインスタンス化 Modal メソッドを実行し、インスタンスが 1 つだけ存在することを確認します。このインスタンスの は、プロキシ モードの一部として理解することもできます。

(6) ボタン操作

var operate = {
    setModal: null,
    open: function() {
        this.setModal = createIntance();
        this.setModal.create();
    },
    delete: function() {
        this.setModal ? this.setModal.delete() : '';
    }
};

ここでは、ボタン操作を Operate オブジェクトに入れて、開閉操作がこれを通じてインスタンス setModal を取得できるようにします。

(7) イベントのバインド

$('open').onclick = function() {
    operate.open();
};

$('delete').onclick = function() {
    operate.delete();
};

最後に、open メソッドと delete メソッドを 2 つのボタンにバインドします。この時点で、シングルトン モードを使用して実装したポップアップ デモが実装されます。 完全なコードをご覧ください: 完全なコード

結論

上記は、JavaScript シングルトン モードの概念とコード例の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。