代码之家 › 专栏 › 技术社区 › RubyRedGrapefruit

我需要将application.js中的每个Javascript函数包装在$(function(){})中吗?

ruby-on-rails-3 jquery

RubyRedGrapefruit · 技术社区 · 14 年前

我的 application.js 外面有这个:

$(function() {
    // My functions are in here, and some of them even work.
}

我剪贴,直到我得到一些工作,现在我认真学习jQuery。我知道有点落后。

上面代码的目的是什么, $(function() { } ?

3 回复 | 直到 13 年前

Skilldrick 14 年前

是一个 shortcut for :

$(document).ready(function () {

});

这意味着一旦DOM被完全加载,脚本就会运行。这意味着脚本的任何部分依赖于现有的DOM节点都可以工作。如果在页面顶部有.js文件,它将在DOM节点存在之前执行,这意味着您将尝试使用那些不存在的东西。 $(document).ready() 允许您推迟代码的执行,直到页面准备就绪。

例如,假设您在头部的脚本标记中加载了以下JavaScript:

$('a').click(function () {
    alert("You can't leave!!!");
    return false;
});

尝试将单击处理程序添加到所有 <a> 标签,但没有 <a> 标签还没有,所以它什么也做不了。如果你把它包起来 $(文档).ready() 看起来是这样的:

$(document).ready(function () {
    $('a').click(function () {
        alert("You can't leave!!!");
        return false;
    });
});

现在它只在文档准备好时执行。

要回答标题中的问题,不,你不必把所有东西都包起来 $(文档).ready() -只是依赖于完全加载DOM的代码。

Mike Sickler 14 年前

不,您只需要在页面第一次加载到内部时执行那些语句 $(function(){});

所有的函数都可以在别处定义。

RobertPitt 14 年前

基本上在加载主体时运行代码所做的事情

让我再详细解释一下。

当页面加载时,浏览器从第一行加载到最后一行,当您在 <head> 标签,在 <body> 作为 <头部> 在身体上方

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <script type="x" source="jquery.js" />
        <script type="x">
            $("#my_id").remove();
        </script>
    </head>
    <body>
        <div id="my_id"></div>
    </body>
</html>

如您所见,加载的第一个资源是 jquery.js ,下面的一行有jQuery代码wil lexecute,因为jQuery已经加载,所以 $() 存在。

问题是jQuery代码正在寻找不存在的代码,因为DOM还没有解析它。

下面使用的语法是这样的:当您向jquery发送“匿名函数”时,它会将其存储到文档完全加载为止,因此 <div> 将存在并命令成功执行。

$(function(){
})

写这个有几种方法,主要是这样的:

$(document).ready(function(){
   //Code here will only be run upon document ready.
});

但我喜欢做的是:

mysite = {}; //Creates a "namespace / Object" for me to work within
mysite.dialog = function(title,message){/*blah*/}
mysite.init = function(){
   //Code here is for the Document Ready state.
   mysite.dialog("hey","the document has been loaded");
}

然后我把这个放在 Application.js 文件,包括在 jquery.js查询

然后在我的文档中,运行以下命令。

$(document).ready(mysite.init);