1

こんにちはみんな私はここに2つの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キーワードなしで宣言された変数はグローバルです。

混乱を避けるために、今のところ、1 つの で複数の変数を宣言しないことをお勧めします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 への変更が防止されます。

BIG HUGE IMPORTANT NOTE - これはすべて、関数が定義された場所にのみ関連しています。

これらの継承されたスコープは、人々が「閉鎖」という言葉を言うときに本当に意味するべきものです。これは、定義スコープ コンテキスト (これらのレイヤー) を関数にバインドすることです。

そして今、クロージャーが通常混乱する可能性がある場所は次のとおりです。

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 に答える