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

Only jQuery function syntax works in specific scenario

本文关键字：适用于 jQuery 函数 语法 只有      更新时间：2023-09-26

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

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

代码片段：

$(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中ready事件的简写和IIFE:

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

与相同

$(function(){})

但它是而不是与相同

(function(){}())

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

这不是语法问题。如果您调用全局jQuery函数（$）并将其传递给它一个函数，它的含义与完全相同

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

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

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

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

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

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

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

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

相关文章：