JavaScript でグローバル変数の競合を回避するにはどうすればよいですか?

JavaScript のグローバル変数の代替

JavaScript の共有グローバル名前空間と暗黙のグローバル変数は、複数のスクリプトが同じページで動作する場合に競合を引き起こす可能性があります。これらの問題を回避するには、代替ソリューションの採用を検討してください。

ローカル モジュール

外部に公開したい関数を含むオブジェクトを返す関数内でコードを囲みます。戻り値を 1 つのグローバル変数に割り当てます。

var FOO = (function() {
    var my_var = 10; // Shared variable

    function bar() { // Not exposed externally
        alert(my_var);
    }

    return {
        a_func: function() {
            alert(my_var);
        },
        b_func: function() {
            alert(my_var);
        }
    };

})();

モジュールの関数にアクセスするには、FOO.a_func() を使用します。このアプローチでは、FOO の名前のみを変更することでコードを分離し、競合を防ぐことができます。

シングルトン パターン

この特定のシナリオでは、1 つの関数が変数を設定します。そして後で別のものがそれを取得する場合は、シングルトン パターンを検討してください。これには、グローバル データへの制御されたアクセスを提供するクラスの単一インスタンスの作成が含まれます。

var Singleton = {
    variable1: null,

    setVariable: function(value) {
        this.variable1 = value;
    },

    getVariable: function() {
        return this.variable1;
    }
};

Singleton.setVariable("value1");
var retrievedVariable = Singleton.getVariable(); // "value1"

このパターンでは、シングルトンのインスタンスが 1 つだけ存在することが保証され、グローバル データにアクセスするための制御されたインターフェイスが提供されます。

以上がJavaScript でグローバル変数の競合を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。