1

私は JavaScript を上手に使いこなし、自分のコードを関数で利用してすべてをきれいに保つ方法を学ぼうとしています。ページ読み込み時に関数を実行しようとしています...

var setColors = function(){
        this.init = function(){
            $.getJSON('js/colors.json', function(colors) {
                    $.each(colors, function(i, colors) {
                        $('<li>', {
                            text: colors['color'],
                            'name' : colors['color'],
                            'data-hex' : colors['hex'],
                            'data-var' : colors['var']
                        }).appendTo('#picker');
                    })
            });
        }
    }

(これはカラー ピッカーではなく、単なる色のリストです)setColors()ページが開始したらすぐに実行し たいです。匿名関数が自動的に実行されることを読みましたが、これはそうではありません。私も試しました...

$(function(){
    setColors();
});

関数の下で、setColors()それは動作していません (ページは空白です)。ページの読み込み時に関数を実行するにはどうすればよいですか? 私は学ぼうとしているので、説明は素晴らしいでしょう。

4

3 に答える 3

3

匿名関数はすぐには実行されません。匿名関数を頻繁に使用する即時呼び出し関数式を考えています。

コードを修正するには:

a）this.init「オブジェクト」内の関数ラッパーを取り除きます-それを使用していないため、オブジェクトをインスタンス化するためにthis.foo使用している場合にのみ意味があります：new

function setColors() {
    return $.getJSON(...);
}

$.getJSON()結果を返すと、追加の遅延オブジェクト ハンドラの登録、エラー ハンドラの登録などを行うことができることに注意してください。

b)上記の関数をdocument.readyハンドラーで呼び出します (AJAX コールバックが DOM を変更するため、これを行う必要があります)。

$(setColors);

注: 後者は、このハンドラーを呼び出す正当な方法です。jQuery は、この方法で渡された関数をハンドラーとして自動的に登録しますdocument.ready。それは書くことに似ています：

$(function() { setColors() })

ただし、余分な（役に立たない）関数ラッパーはありません。

于 2013-03-05T13:37:28.003 に答える
0

setColors は次の関数を返さないか、最後に呼び出します。次のように変更できます。

var setColors = function(){
        this.init = function(){
            $.getJSON('js/colors.json', function(colors) {
                    $.each(colors, function(i, colors) {
                        $('<li>', {
                            text: colors['color'],
                            'name' : colors['color'],
                            'data-hex' : colors['hex'],
                            'data-var' : colors['var']
                        }).appendTo('#picker');
                    })
            });
        }

        init(); // <--- change
    }

それはあなたのためにトリックをするでしょう. init 関数自体は何も返さないため、「返す」必要さえないので、呼び出すだけで済みます。

于 2013-03-05T13:31:49.800 に答える
0

DOM が初期化されたらそれを実行するには、準備ができているリスナー (jQuery) に配置できます。

$(document).on('ready', function() {
    setColors();
});

js で関数が検出されるとすぐに関数を自動的に実行する場合は、関数を終了する } の後に (); を追加します。

何かのようなもの：

function setColors() {
    // Code
}();
于 2013-03-05T13:30:20.827 に答える