Question

从下面的jfiddle片段中查看匿名jQuery函数。还有其他库作为这个jfiddle的外部引用，所以我只是猜测这是jQuery语法。

代码段：

$(function() {

    var canvas = new draw2d.Canvas("gfx_holder");
    var x = 20,
        y = 20;
    addArrowToConnection();
    injectSetPosition();
    var previousRec, newRec;
    for (var i = 1; i <= 64; i++) {
        newRec = addRec(canvas, i, x, y);

        if (i / 8 == Math.floor(i / 8)) {
            y = y + 80;
            x = 20;
        } else {
            x = x + 80;
        }

        if (previousRec != null && newRec != null) {
            var conn = new draw2d.Connection();

            conn.sourcePort = previousRec.port;
            conn.targetPort = newRec.port;
            var label = new draw2d.shape.basic.Label({
                text: "Label"
            });
            label.setColor("#0d0d0d");
            label.setFontColor("#0d0d0d");
            label.setStroke(0);
            var arrow = new draw2d.decoration.connection.ArrowDecorator(10, 6);
            conn.setTargetDecorator(arrow);
            conn.setRouter(new draw2d.layout.connection.DirectRouter());
            conn.add(label, new draw2d.layout.locator.ParallelMidpointLocator());
            canvas.add(conn);
        }

        previousRec = newRec;
    }

});

此jfiddle中的所有其他函数都使用JavaScript标准函数符号之一（var functionName = function() {} vs function functionName() {}），但上面的函数除外。如果您尝试使用其他三种表示法替换语法，则代码不起作用。这个符号有什么重要意义？为什么只有最后一种语法有效？

var fun = function() { ... }  // doesn't work
function fun() { ... }  // doesn't work 
(function() { ... })();  // doesn't work
$(function() { .. });  // works!!!!!!!!!!!!!!!

Answer 1

因为它们不是一回事。你在混淆jQuery中ready事件的简写和IIFE：

$(document).ready(function(){})

与：

相同

$(function(){})

但与

相同

(function(){}())

后者是一个立即调用的函数表达式;它与ready事件无关。它只是一个执行自身的函数，用于创建闭包。

Answer 2

这不是句法问题。如果你调用全局jQuery函数（$）并传递一个函数，它意味着完全相同的东西

$(document).ready(function() { ... });

换句话说，您发布的设置使得函数调用被延迟，直到浏览器完成组装DOM。该函数可能位于页面的<head>（或在那里导入），因此除非在DOM准备就绪时运行，否则它将无法工作，因为它无法找到“gfx_holder”元素。

Answer 3

var fun = function() { ... }  // doesn't work

此语法定义变量以引用函数对象，不调用函数。

function fun() { ... }  // doesn't work

这个sytax定义了一个函数，不调用函数

(function() { ... })();  // doesn't work

此语法定义了一个匿名函数，并在DOM准备好之前立即调用它

只有jQuery函数语法在特定场景中有效

3 个答案: