JavaScript シングルトン パターン

今回は、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 サイトの他の関連記事を参照してください。