javascript - javascriptで変数を再定義しない方法

Question

Client2.config.select2() を呼び出すたびに、すべてが再定義されます。

そのような関数/オブジェクトの再定義を防ぐ方法はありますか? つまり、このオブジェクト内のいくつかの要素を保存する別の変数が必要な場合、実行Client2.config.select2()するとそれが上書きされます。

これを行うためのよく知られたパターンはありますか？

Client2.config.select2 = function() {

    var coreIDs    =  ['clientID', 'cptyID' , 'sym'];

    var nonCoreIDs =  ['groupBy','groupBy_impact_1','groupBy_impact_2',
        'groupBy_impact_3','groupBy_impact_4'];

    //non dynamic filters 
    var autoCompleteSettings =  function () {
        return {
            allowClear : true,
            minimumInputLength : 2,
            multiple : true,
            placeholder: "Select ",
            closeOnSelect : false,
            openOnEnter : true,
            ajax: {
                url : "../my?page=search",
                dataType : 'json',
                data : function(term, page) {
                    return {
                        q : term
                    };
                },
                results : function(data, page) {
                    return {
                        results : data
                    };
                }
            }
        };
    };

    var multipleSettings = function () {
        return {
            placeholder : "Select ",
            allowClear : true,
            closeOnSelect : false,
            maximumSelectionSize: 6
        };
    };

    return {
        getAutoCompleteSelectSettings: function() {
            return new autoCompleteSettings();
        },
        getMultipleSelectSettings: function() {
            return new multipleSettings();
        },
        getCoreSelect2IDs: function () {
            return coreIDs;
        },
        getNonCoreSelect2IDs: function () {
            return nonCoreIDs;
        },
        getSelect2IDs : function() {
            return coreIDs.concat(nonCoreIDs);
        }
    }
};

Answer 1

モジュール パターンを使用する必要があります: http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

これの例は次のとおりです。

(function (CkSpace, $, undefined) {
    CkSpace.GetLoanValues = function () { //public member
       //Do Stuff
    }
    var myNumber = 1; //private member

} (window.CkSpace = window.CkSpace || {}, jQuery));

Answer 2

これは、クロージャーを使用して行うことができます。

基本的にClient2.config.select2、即時関数に等しい値を設定し、即時関数内で変数を定義し (一度割り当てられます)、クロージャーを使用して、返された関数内で一度定義された変数にアクセスします。

Client2.config.select2 =  (function() {                              /* 1 */

    var coreIDs    =  ['clientID', 'cptyID' , 'sym'];                /* 2 */

    var nonCoreIDs =  ['groupBy','groupBy_impact_1','groupBy_impact_2',
        'groupBy_impact_3','groupBy_impact_4'];

    //non dynamic filters 
    var autoCompleteSettings =  function () {
        return {
            allowClear : true,
            minimumInputLength : 2,
            multiple : true,
            placeholder: "Select ",
            closeOnSelect : false,
            openOnEnter : true,
            ajax: {
                url : "../my?page=search",
                dataType : 'json',
                data : function(term, page) {
                    return {
                        q : term
                    };
                },
                results : function(data, page) {
                    return {
                        results : data
                    };
                }
            }
        };    
    };    

    var multipleSettings = function () {
        return {
            placeholder : "Select ",
            allowClear : true,
            closeOnSelect : false,
            maximumSelectionSize: 6
        };
    };

    return function (){                                              /* 3 */
        return {
            getAutoCompleteSelectSettings: function() {
                return new autoCompleteSettings();
            },
            getMultipleSelectSettings: function() {
                return new multipleSettings();
            },
            getCoreSelect2IDs: function () {
                return coreIDs;
            },
            getNonCoreSelect2IDs: function () {
                return nonCoreIDs;
            },
            getSelect2IDs : function() {
                return coreIDs.concat(nonCoreIDs);
            }
        }
    }
})();

(1) では、次のように関数をラップしていることがわかります。

(function(){ 
    /* ... */ 
})();

ご存じない場合は、到達するとすぐに実行されるため、これは即時関数と呼ばれます。これは、この関数が 1 回実行されることを意味します。

(2) では、即時関数のスコープ内で一度、一度、定義したいすべての変数を定義しています。繰り返しますが、クロージャーを使用すると、以下の返された関数でこれらの変数にアクセスできます。

(3) では、即時関数が関数を返すようにしています。この関数は、返したいオブジェクトを返します。たとえば、アクセスすると、即時関数内からgetAutoCompleteSelectSettings戻り ます。autoCompleteSettings

本質的には、このように考えることができます。即時関数が実行された後、次のように代入を定義しました (これが即時関数が返すものであるため)。

Client2.config.select2 = function (){
    return {
        getAutoCompleteSelectSettings: function() {
            return new autoCompleteSettings();
        },
        getMultipleSelectSettings: function() {
            return new multipleSettings();
        },
        getCoreSelect2IDs: function () {
            return coreIDs;
        },
        getNonCoreSelect2IDs: function () {
            return nonCoreIDs;
        },
        getSelect2IDs : function() {
            return coreIDs.concat(nonCoreIDs);
        }
    }
}

そして、ここでアクセスしているオブジェクトと変数のそれぞれは、immediate 関数での参照を通じてアクセスできます。

Answer 3

constキーワードを試したことがありますか?