Question

我正在努力改进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()函数下面并且不工作以太（页面只是空白）。我做错了什么以及如何让我的功能在页面加载时运行？我正在努力学习，所以解释会很棒。

Answer 1

匿名函数不会立即运行，您正在考虑立即调用函数表达式，它经常使用匿名函数。

修复您的代码：

a）摆脱“对象”中的this.init函数包装器 - 您没有使用它，而this.foo只有在您使用new时才有意义{ {1}}实例化一个对象：

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

请注意，返回$.getJSON()结果允许您注册其他延迟对象处理程序，注册错误处理程序等。

b）在document.ready处理程序中调用上述函数（您必须这样做，因为AJAX回调会修改DOM）。

$(setColors);

注意：后者是调用此处理程序的合法方式 - jQuery将自动注册您以document.ready处理程序的方式传递的任何函数。它与写作类似：

$(function() { setColors() })

但没有额外的（无用的）函数包装器。

Answer 2

要在初始化DOM后运行，可以将它放在一个准备好的监听器（jQuery）中：

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

如果你希望函数在js中遇到它时自动运行，那么在结束函数之后，添加（）;

类似的东西：

function setColors() {
    // Code
}();

Answer 3

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函数本身不返回任何东西，所以你可以调用它。

页面加载时的匿名函数

3 个答案: