JavaScript シングルトン パターン

php中世界最好的语言
リリース: 2018-03-13 18:08:11
オリジナル
1758 人が閲覧しました

今回は、JavaScript の シングルケース モード と、JavaScript シングルトン モードの 注意事項 について、実際のケースを見てみましょう。

シングルトン パターンは、名前空間を分割し、プロパティとメソッドのバッチをまとめて編成するために使用されるオブジェクトです。インスタンス化できる場合、インスタンス化できるのは 1 回だけです。

名前空間を分割し、グローバル変数を削減します

コードを 1 つに整理し、読みやすく保守しやすくします

シミュレートされたデータなど、すべてのオブジェクト リテラルがシングルトンであるわけではありません

基本構造:

let Cat = {   name: 'Kitty',   age: 3,   run: ()=>{      console.log('run');
   }
}
ログイン後にコピー

上記のオブジェクト リテラル構造は次のとおりですシングルトン パターンを作成する方法の 1 つですが、シングルトン パターンではありません。シングルトン パターンを実装するには、クラスがすでにインスタンス化されているかどうかを変数を使用して示すことができます。基本的な実装:

class Singleton {    constructor(name){        this.name = name;        this.instance = null;    }    getName(){        return this.name;    }}let getInstance = (()=> {    let instance;    return (name)=> {        if(!instance) {            instance = new Singleton(name);        }        return instance;    }})()let cat1 = getInstance('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'
ログイン後にコピー

インスタンスが存在しない場合はインスタンスを作成し、cat2 で取得したインスタンスを直接返します。 cat1 と同じです。

実用的
DOM 要素を作成するときに繰り返し作成するのを避けるために、シングルトン モードを使用して作成できます

//单例模式let createModal = function() {    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';    document.body.appendChild(content);
}//代理获取实例let getInstance = function(fn) {    let result    return function() {        return result || (result = fn.call(this,arguments));
    }
}let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){    let modal = createSingleModal();
    modal.style.display = 'block';
};
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

JavaScriptのオブザーバーパターン


JavaScriptの戦略パターン

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

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