Question

出于性能目的，我将jQuery脚本加载到页面底部（就在关闭正文标记之前）。

我的问题是如何启用特定于页面的脚本？我不想把所有内容放在$（document）.ready方法中（再次出于性能目的）。

更新：我正在使用模板系统，因此我将jQuery加载到模板中。这样，即使我将它们放在特定页面的末尾，jQuery调用也不会被识别，因为那时没有加载jQuery。

Answer 1

我不是100％肯定你在问什么，但如果这是我认为的那样，那么答案就是你不能吃蛋糕而且吃得也不错。

似乎你已经将jQuery移动到了页面的按钮，但是你想要使用JavaScript的页面的一些元素，但是不想等待所有的document.ready？也许类似以下内容？

<html>
<body>
   <ul id="maybe-some-menu-that-needs-js-initialization-for-example">
   ...
   </ul>
   <script>
     /* javascript goes here that uses jquery for the above menu (or whatever) 
     AND you don't want to wait for document.ready for this to happen */
   </script>
   ...
   <script src="including jquery here"></script>
   <script src="including other scripts here"></script>
</body>
</html>

如果是这种情况，那么请参考我从一开始就说的话。您必须将jQuery（至少是库，不一定是所有其他JavaScript）移回页面顶部。或者不是我们jQuery为你不想等待document.ready的事情。

编辑：如果你想根据你所在的页面执行操作，那么有两种方法，每种方法都更好，更优先于最后一种方法。

使用location.pathname确定您需要的功能。
根据功能将JavaScript组织成单独的模块化文件，并仅包含特定页面所需的文件。

Answer 2

多次使用$(document).ready()时不会覆盖{{1}}，因此您可以加载2个脚本文件，这两个文件都添加了在加载文档时运行的功能。

Answer 3

使用$(document).ready，它在页面的哪个位置并不重要，因为它只会在DOM完成加载时执行。应该进入$(document).ready的唯一代码是在DOM加载时需要设置的代码，例如事件处理程序，DOM完成加载后要运行的任何效果/动画等等。其他函数不需要在$(document).ready中，例如用于排序数组的函数，名为的函数调用当事件被提出等等。

正如已经指出的，您可以在页面上有多个$(document).ready函数，因为您正在执行的是指定在ready事件时执行的函数（命名或匿名）（引发了一个jQuery事件。

修改

您在comments on this answer中链接到的那篇文章提供了您尝试实现的内容的示例。例如，您将拥有一个JavaScript文件，其中包含以下设置以声明全局变量

var myPageLibrary = { homePage : { init : function() { $(document).ready(function() { /* page specific functions that need to run, for exmaple, binding event handlers, etc */ }); } }, aboutPage : { init : function() { $(document).ready(function() { /* page specific functions that need to run, for exmaple, binding event handlers, etc */ }); } } } /* you might have functions here that are bound to events. Here is an example */ function showSubMenu(e) { $(e.target).next('div').show(); } function hideSubMenu(e) { $(e.target).next('div').hide(); }

然后在您的页面中，您将拥有以下结构（此示例使用主页）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>This is my Home Page</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="path-to-myPageLibrary.js"></script> <script type="text/javascript"> myPageLibrary.homePage.init(); </script> </head> <body>  </body> </html>

首先引用jQuery脚本文件，然后是myPageLibrary脚本文件，然后是调用myPageLibrary.homePage.init();的脚本块

Answer 4

如果我理解正确，你需要在页面中间放置一些调用jquery的javascript代码。但你的jquery包括在身体的底部。您可以通过在window.load事件中调用jquery来完成此操作。所有异步脚本加载并执行后，此事件将触发。 e.g：

<body>
    <script>
        $("#myElem").val(); // fails, "$" not defined
        window.addEventListener("load", function(evt) {
            $("#myElem").val(); // ok, jquery is loaded
        });
    </script>
    <span id="myElem>hi</span>
    <script src="//cdn.jquery.com"></script>
</body>

Answer 5

这允许您在正文中调用jQuery插件方法并将jQuery插件加载到页面底部headjs

Answer 6

只需拥有特定于页面的$(document).ready()。

Answer 7

你试过“@section脚本”吗？它会自动在页面末尾添加代码，因此您可以使用特定于页面的jQuery脚本。

@section scripts {
<script>
 jQuery(document).ready(function () {
//put your jQuery codes here
});
</script>
}

Answer 8

据我了解您的问题：

jQuery在加载之前在页面上不可用。
您使用模板，每个模板都有自己的js代码，以便在页面加载时运行
您希望它们与jQuery一起运行。

如果我答对了，这是解决方法：

在<head>中定义全局任务数组：

    ...
    <script>
        const JQUERY_READY_TASKS = []
    </script>
</head>

加载jQuery和其他脚本后，定义：

    ...
    <script>
        jQuery(document).ready(() => {
            // Execute all tasks added by templates
            for (let n=0; n<JQUERY_READY_TASKS.length; n++)
                JQUERY_READY_TASKS[n](jQuery)
            }
        });
    </script>
</body>

在函数中包装模板的初始化代码：

    ...
    <script>
        // Within template
        JQUERY_READY_TASKS.push(($) => {
            // Template init code
            // You can use $ as jquery here
        })
    </script>
    ...

在特定页面上使用jQuery（放在页面底部）

8 个答案: