1

大家好，我这里有两个 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 />')
            }

        }
    }
4

5 回答 5

3

var你的声明做得很好，只是你忘记了一些逗号，所以它们是全局的。在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 = [];
于 2012-09-26T16:55:58.753 回答
3

是的，它们通常是私有的。

这是你的错误：

var i,
    j,
    x,
    element = []  // <-- you forgot the comma!
    property = [] // <-- recommend using a semicolon here

在另一个功能中：

var x,
    i,
    j,
    k,
    element = []  // <-- you forgot the comma!
    property = [] // <-- you forgot the comma!
    value = []    // <-- recommend using a semicolon here

var没有关键字声明的变量是全局的。

为防止混淆，我建议您暂时不要使用一个声明多个变量var：

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

当您更习惯于 javascript 时，这样做是完全可以的，因为到那时您的大脑会自动检测到缺少的逗号。并习惯使用分号。有经验的 javascript 程序员会自动检测丢失的分号作为可能的错误。

于 2012-09-26T16:58:29.437 回答
1

函数中定义的变量仅是函数中定义的变量。

这意味着它们不存在于该范围之外。

function foo(){    
    var bar = 'hello';        
    alert('Inside function: ' + bar);    
}

foo();

alert('Outside function: ' + bar);

这会给你警报：Inside function: hello

还有一个错误：Uncaught ReferenceError: bar is not defined

于 2012-09-26T16:38:58.573 回答
0

阅读这篇文章。它讨论了 JS 中的私有变量。

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-private-variables-in-javascript/

于 2012-09-26T16:53:11.297 回答
0

JS 具有功能范围。一个函数可以访问它所嵌套的外部函数作用域中的所有内容，而不管涉及到哪些其他构造。从某种意义上说，每个内部定义的函数都使用外部函数的作用域作为基础。但是将其视为内部函数的一种范围层蛋糕。

如果您引用一个 var，JavaScript 调用对象将检查函数的本地范围，然后检查下一个函数，依此类推，直到找到第一个具有该名称的可用函数，直到它到达全局范围。

因此，在内部函数中使用 'var' 声明将防止更改具有相同名称的外部作用域 var。

非常重要的注意事项- 所有这些仅与定义函数的位置相关。

当人们说“闭包”这个词时，这些继承的作用域应该是真正的意思。它是将定义范围上下文（那些层）绑定到函数。

现在这里是闭包通常会混淆的地方：

function buildAFunction(){
    var
        whichOne = "buildAFunction's var";

    return function(){ alert(whichOne); }
}

function anotherFunction(){
    var //format I use for adding clarity to comma-separated var decs sometimes.
        whichOne = "anotherFunction's var",
        builtFunc = buildAFunction();

    builtFunc();
}

anotherFunction(); //alerts "buildAFunction's var"

你可以移动一个函数，但它仍然只能访问它定义的地方可用的范围。一开始它可能会让人头疼，但当你学会充分利用它时，这是 JavaScript 的一个愚蠢而强大的特性。反之，让函数在新的上下文中自动神奇地使用东西，您需要查看“this”关键字，该关键字通常仅在您将函数分配给对象的属性时才有用。

于 2012-09-26T17:37:55.027 回答