只有 jQuery 函数语法适用于特定场景答案

【问题标题】：Only jQuery function syntax works in specific scenario只有 jQuery 函数语法适用于特定场景
【发布时间】：2014-11-02 02:59:24
【问题描述】：

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

http://jsfiddle.net/LEt4Q/12/

代码sn-p：

$(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!!!!!!!!!!!!!!!

【问题讨论】：

此符号用于 jQuery，相当于 $(document).ready(function() { 表示“当文档完全加载时，执行以下操作”
+1 表示评论，因为您是 Packer 的粉丝！我住在威斯康星州！
我会选择 +1，但“G”代表乔治亚大学，而不是绿湾。 ;)
哈哈！他们长得很像！

标签： javascript jquery function

【解决方案1】：

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

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

等同于：

$(function(){})

但它不等同于：

(function(){}())

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

【讨论】：

$(document) 语法是否也特定于 jQuery？
$ === jQuery，所以和jQuery(document)一样。美元符号没有特殊语法，它是一个有效的变量名。
所以我猜 jQuery 的实现比 .. window.onload = function() { .. } 稍微复杂一点，这取决于你使用的浏览器.....stackoverflow.com/questions/1795089/…跨度>

【解决方案2】：

这不是句法问题。如果调用全局 jQuery 函数 ($) 并传递给它一个函数，它的含义与

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

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

【讨论】：

【解决方案3】：

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

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

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

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

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

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

【讨论】：