javascript - 为什么我们在 JS 中使用类似 $(function() { }) 的语法？

Question

当我使用此代码时，它将我的 $.post() 绑定(bind)到表单并阻止页面重新加载以提交它:

$("#analyze_audio").submit(function (e) {
    debugger;
    e.preventDefault();
    var url = "/analyze_audio";
    var dataToSend = {"analyze_audio": "analyze_audio"};
    var callback = function (data) {
        debugger;
        document.getElementById("audioresponse").innerHTML = (data);
    };
    $.post(url, dataToSend, callback, 'html');
});

但它不会触发我在其中使用的调试器，因此它不会将事件正确绑定(bind)到我的函数，但是当我使用此代码片段时，它工作得很好:

$(function() {
    $("#analyze_audio").submit(function (e) {
        debugger;
        e.preventDefault();
        var url = "/analyze_audio";
        var dataToSend = {"analyze_audio": "analyze_audio"};
        var callback = function (data) {
            debugger;
            document.getElementById("audioresponse").innerHTML = (data);
        };
        $.post(url, dataToSend, callback, 'html');
    });
});

我真的不明白为什么？

Answer 1

当您使用 jQuery 时(您显然是这样)，将函数包装在 $( ) 中使其成为当从 接收到“DOM 就绪”事件时由库调用的函数浏览器。因此，它会推迟代码的执行，直到 DOM 完全构建完成。这使您的代码可以正常工作，因为它确保 id 为“analyze_audio”的元素存在。

$( ) 在语法上没有什么特殊之处 — 它只是一个简单的函数调用，名为 $ 的函数(这是 jQuery 库的主要入口点) .

您可能会看到执行类似操作的代码:

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

这确实做了同样的事情(也是一个 jQuery 习惯用法)。除非您喜欢输入额外的字符，否则没有理由使用该表单。