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

问题描述 投票：0回答：8

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

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

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

javascript jquery performance load
8个回答
4
投票

我不是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 的事情。

编辑：如果您想根据所在页面执行操作，那么有两种方法，每种方法都比最后一种更好、更可取。

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

多次使用时，

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

3
投票

使用

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

正如已经指出的，页面上可以有多个 

$(document).ready
函数，因为您所做的是指定在引发 
ready
事件（jQuery 事件）时执行的函数（命名或匿名） .

编辑：

您在对此答案的评论中链接到的那篇文章提供了您想要实现的目标的示例。例如，您将有一个具有以下设置的 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>
  <!-- Page content -->
</body>
</html>

首先引用 jQuery 脚本文件，然后是 myPageLibrary 脚本文件，最后是调用的脚本块 

myPageLibrary.homePage.init();

2
投票

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

<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>
1
投票

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

0
投票

只要有一个特定于页面的

$(document).ready()
。

0
投票

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

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

据我了解您的问题：

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

如果我没猜错的话，解决方案如下：

  1. 在

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

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

  2. 加载 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>

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

        ...
    <script>
        // Within template
        JQUERY_READY_TASKS.push(($) => {
            // Template init code
            // You can use $ as jquery here
        })
    </script>
    ...
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.