Javascript単例モードの概念とインスタンス

前言

他のプログラミング言語と同様に、Javascriptは同じように多くの設計モードを持っています.例えば、単例モード、エージェントモード、オブザーバーモードなどです.Javascriptの設計モードを熟練して運用することで、コードロジックをより明確にし、メンテナンスと再構築をより容易にすることができます.
Javascriptモードで一般的で実用的なモードである単例モードを紹介し、主に概念とインスタンス部分に分けます.インスタンスを紹介するとともに、コード内の追加の知識点についても説明します.

単一モードの概念

まず、単例モードとは何ですか.単一のインスタンス・モードは、1つのクラスに1つのインスタンスしかないことを保証し、グローバルなアクセス・ポイントを提供することを目的としていると理解できます.
単例の概念をあまり理解していない人もいるかもしれませんが、生活の中のいくつかの例を想像することができます.例えば、アカウントを登録するとき、もし私たちが登録したアカウントがすでに存在するならば、システムは私たちに「アカウントがすでに存在しているかどうかは、このアカウントを使用してログインするかどうか」を提示して、私たちは再び同じアカウントを作成することができなくて、元のアカウントをログアウトしない限り.これが単例モデルの生き生きとした体現である.
同様の例では、Webページのログインボックスもあります.何度ログインボタンをクリックしても、インタフェースには常に1つのログインボックスしか表示されず、2つ目を作成することはできません.
本稿では,上陸弾枠を例に,単一例モードの使用方法を紹介する.

単一モードの例

1.demo展示

プレゼンテーションのアドレスは次のとおりです:弾枠インスタンス

2.コード展示

単一のモード・バウンド・インスタンスを構築するコードは、誰もが異なる場合がありますが、グローバルで一意でアクセス可能なバウンド・ボックスを構築することを目的としています.次に、この例を一歩一歩実現します.
(1)DOMオブジェクトの取得

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

まず,後でDOMに関するいくつかの操作を容易にするために,ここでは関数式プログラミングの原理を用いてターゲットidを取得する要素オブジェクト法をカプセル化し,$(id)を直接利用すれば取得できる.
(2)弾枠構造関数

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

ここでは,弾性フレームの構造関数としてModalを宣言し,その内部に公有属性html,id,openを定義した.htmlは弾枠内部の内容を定義し、idは弾枠にid名を定義し、openは弾枠が開いているかどうかを判断するために使用される.
(3)オープンメソッド

Modal.prototype.create = function() {
    if (!this.open) {
        var modal = document.createElement('div');
    
        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」というclassのアニメーション効果を追加します.ここではclassListについて簡単に説明します.
classListはclassNameよりも便利な操作要素classの属性ですが、互換性の面ではIE 10以下のバージョンには互換性がありません.
その提供する操作classの方法とjQueryの類似、主にあります

add(class1, class2, ...) 要素に1つ以上のクラス名を追加します.jQueryのaddClass()

に似ています.

remove(class1, class2, ...) 要素の1つ以上のクラス名を削除します.jQueryのremoveClass()

に似ています.

contains(class)指定されたクラス名が存在するか否かを判断し、jQueryのhasClass()

に類似する
ここではaddメソッドを用いてModalに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メソッドを定義したら、ここではフレームを閉じる方法を定義し、その内部でフレームオブジェクトにhideクラスのアニメーション効果を追加し、最後にページ上でフレームオブジェクトを削除します.
(5)インスタンスの作成

var createIntance = (function() {
    var instance;
    return function() {
        return instance || (instance = new Modal('modal', '      '))
    }
})();

これは単一のモデルを実現する重要な部分であり、知識点を分析します.

閉パッケージを使用してinstanceプライベート変数をカプセル化し、関数

を返します.

|構文判断により、instanceが存在しない場合に後者の実例化Modalメソッドを実行し、存在する場合はinstanceに直接戻り、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();
};

最後に,開く方法と削除方法を2つのボタンにバインドし,これで単一のモードで実現した弾枠demoを実現した.
完全なコード:完全なコード

締めくくり

本稿では,汎用的な単一モデルをどのように構築するかについては,興味のある読者に任せる単一モデルの実装方法についてのみ示した.
文章のインスピレーションは「Javascrit設計モデルと開発実践」という本に由来している.
本文は微信公衆番号:フロントエンド呼啦圏(Love-FED)ブログ園に先発した.http://www.cnblogs.com/luozhi...segmentfault:https://segmentfault.com/a/11...簡単な本:http://www.jianshu.com/p/52bb...