javascript - 在javascript函数中使变量私有(private)

Question

大家好，我这里有两个 javascript 函数 - 在第一个函数中，我必须将变量名称从“element”和“property”更改为“celement”和“cproperty”，以避免它们与另一个函数发生冲突。我想知道有没有什么方法可以构造您的函数，以便它们可以使用相同的变量名？任何建议都会很棒!非常感谢

Javascript:

    function colorPickDynamic (startcolor, cp){
    var i,
        j,
        x,
        celement = []
        cproperty = []
    for (x=0, i = 2, j = 3; j <= arguments.length; i+=2, j+=2, x++) {
        celement[x]=arguments[i]
        cproperty[x]=arguments[j]
        }

        $(cp).ColorPicker({
            color: startcolor,
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500)
                return false
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500)
                return false
            },
            onChange: function (hsb, hex, rgb) {

                $(cp + ' div').css('backgroundColor', '#' + hex)
            for (x = 0; x < celement.length; x++) {
                    updateAllCSS(celement[x], cproperty[x], '#' + hex)
            }
            }
        })
    }


    var cssObject = {}

    function updateAllCSS() {

    var x,
        i,
        j,
        k,
        element = []
        property = []
        value = []

    for (x=0, i = 0, j = 1, k = 2; k <= arguments.length; i+=3, j+=3, k+=3, x++) {
        element[x]=arguments[i]
        property[x]=arguments[j]
        value[x]=arguments[k]
    }   

        //updateThemeCreatorCSS

    for (x = 0; x < element.length; x++) {
        updateThemeCreatorCSS(element[x], property[x], value[x])
    }

        //updateOutputCSS

    for (x = 0; x < element.length; x++) {  
        updateOutputCSS(element[x], property[x], value[x])
    }


        function updateThemeCreatorCSS(element, property, value) {
            $('#homeIframe').contents().find(element).css(property, value)
            $('#generalIframe').contents().find(element).css(property, value)
            $('#formIframe').contents().find(element).css(property, value)
        }


        function updateOutputCSS(element, property, value) {

           if (!cssObject[element]) cssObject[element] = {}
           cssObject[element][property] = value            


            $('#css_output').text('')
            for (var element in cssObject) {
            $('#css_output').append(element + ' {')
               var properties = cssObject[element]
               for (var property in properties) {
                  $('#css_output').append(property + ': ' + properties[property] + ' !important;')
               }
            $('#css_output').append('} <br />')
            }

        }
    }

Answer 1

你的 var declaration 做得很好, 只有你忘记了一些逗号，所以它们是全局的。在 colorPickDynamic 中:

var i,
    j,
    x,
    celement = [], // <- !!!
    cproperty = []; // semicolon optional, but recommended

在 updateAllCSS 中:

var x,
    i,
    j,
    k,
    element = [], // <- !!!
    property = [], // <- !!!
    value = []; // semicolon optional, but recommended

如果省略逗号，将自动插入一个分号(因此会发生奇怪的事情)，行尾将成为声明语句的结尾。下一行将照常解释，它是对非局部变量的赋值。您的脚本执行方式如下

var i;
var j;
var x;
celement = [];
cproperty = [];