JavaScriptデザインパターンのレイジーシングルトン実装のシングルトンモード

1.定義

2.グローバル変数とネーミング汚染の削減

名前空間を使用

クロージャーを使用してプライベート変数をカプセル化する

3.一般的なレイジーシングルトン

管理エージェントのロジックを関数にカプセル化します

使用例（ボタンをクリックしてログインポップアップウィンドウを生成し、表示します）

使用例（リストレンダリングは1つのイベントにのみバインドされます）

1.定義

シングルトンパターンの定義は、クラスにインスタンスが1つしかないことを確認し、それにアクセスするグローバルアクセスポイントを提供することです。

2.グローバル変数とネーミング汚染の削減

グローバル変数はシングルトンモードではありませんが、JavaScript開発では、グローバル変数をシングルトンとして使用することがよくあります。例えば：

var a = {};

aは一意であり、グローバルにアクセスでき、シングルトンモードの定義を満たしますが、グローバル変数は汚染を命名する傾向があり、大規模なプロジェクトはいつでも他のプロジェクトによって上書きされる可能性があります。したがって、次の2つの方法を使用して、グローバル変数によって引き起こされるネーミング汚染を相対的に減らす必要があります。

名前空間を使用

var namespace1 = { 
    a: function(){
         alert (1);
    },
    b: function(){
        alert (2);
    }
};

変数がグローバルスコープと相互作用する可能性を減らすために、aとbの両方をnamespace1の属性として定義します。

クロージャーを使用してプライベート変数をカプセル化する

var user = (function () {
    var __name = 'xxx',
        __age = 21;
    return {
        getUserInfo: function () {
            return __name + '-' + __age;
        }
    }
})();

プライベート変数__nameと__ageに同意するためにアンダースコアを使用します。これらは、クロージャーによって生成されたスコープにカプセル化されます。これらの2つの変数には外部からアクセスできないため、グローバルコマンドの汚染を回避できます。

3.一般的なレイジーシングルトン

レイジーシングルトンとは、必要に応じてオブジェクトインスタンスを作成することです。

管理エージェントのロジックを関数にカプセル化します

function getSingle(fn) {
    var result; // 在闭包中不销毁
    return function () {
        // 如果result被赋值,则返回;没有则执行创建方法
        return result || (result = fn.apply(this, arguments));
    }
}

使用例（ボタンをクリックしてログインポップアップウィンドウを生成し、表示します）

// 1.声明创建方法
var createLoginLayer = function () {
    var div = document.createElement('div');
    div.innerHTML = '我是登录弹窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
}
// 2.传入创建方法返回单例方法,还没创建
var createSingleLoginLayer = getSingle(createLoginLayer);
// 3.在需要的时候创建
document.getElementById('loginBtn').onclick = function () {
    var loginLayer = createSingleLoginLayer();
    loginLayer.style.display = 'block';
}

使用例（リストレンダリングは1つのイベントにのみバインドされます）

var bindEvent = getSingle(function () {
    document.getElementById('div1').onclick = function name() {
        alert('click');
    }
    return true; // 返回true是为了让单例方法不执行||后的创建
})
var render = function () {
    console.log('开始渲染列表');
    bindEvent();
}
render();
render();
render();
// render函数和bindEvent函数都分别执行了3次，但div实际上只被绑定了一个事件

注：上記は、「JavaScriptのデザインパターンと開発方法」の抜粋ですが、元の本を読むことを強くお勧めします。