JavaScript 自动加载器？答案

【问题标题】：JavaScript Autoloader?JavaScript 自动加载器？
【发布时间】：2011-06-21 20:57:09
【问题描述】：

有没有一种解决方案，我可以在需要时让 JavaScript/jQuery 自动加载依赖文件？例如，考虑这种情况：

我有一个自动加载器脚本，用于监听何时需要加载特定脚本。
调用了一个 jQuery dialog() 插件。
自动加载器被告知在调用此插件时进行监听，并加载 jQuery UI。
如果以后调用更多对话框，将不会加载所需的脚本。

简单地尝试限制带宽是否需要付出太多努力？我是否应该将所有核心文件包含在一个超级包中并完成它？

感谢您的宝贵时间。

【问题讨论】：

标签： javascript jquery jquery-ui autoloader

【解决方案1】：

是的，您应该将所有脚本包含在一个文件中。或者至少它们中的大多数是这样分组的：jquery.js、global.js（这是经常出现的地方——在不止一个、两个页面上——应该使用脚本）和 page_specyfic.js。想象一下，调用了dialog()，用户必须等待 .js 下载和插件初始化。节省带宽（如果有的话）不值得损害用户体验。

【讨论】：

嗯...为了代码组织，我想将所有这些文件分开。例如，一个 jQuery 文件、一个 jQuery UI、这个插件的脚本、那个插件的脚本……在我看来，它更容易、更有条理。请在下面查看我的代码帖子。您可以看到每页加载的无数脚本（还有更多脚本）。为了使这些内容井井有条，以最少的 HTTP 请求和带宽使用，我该如何组合这些？
您必须决定要合并到全局文件中的哪些文件，并且只在一个页面上使用。有许多工具可以缩小文件。例如this one。为了组织起见，我建议留下描述给定插件的评论，以及它的版本（许可证有时也需要留下 cmets）。顺便说一句，你应该对你的 css 文件做同样的事情。

【解决方案2】：

有很多按需加载脚本的示例。例如，remy sharp 有一个code sample on his blog，您可以按原样使用它，也可以将其转换为 jQuery 插件。不幸的是，它可能不适用于所有浏览器。

还有 jQuery Lazy Plugin Loader 按需加载 jQuery 插件，而不是预先加载。要使用它，您需要为您正在使用的每一块 jQuery UI 设置延迟加载，如下所示（名称将是您使用的每一块的函数名称）：

$.lazy([{
   src: 'jquery-ui-1.8.14.custom.min.js',
   name: 'dialog'
}]);

您也可以使用this question about loading jQuery itself on demand 中的技术。例如，您可以在加载 jQuery UI 时动态创建脚本标签。

最后，既然您在谈论 jQuery UI，请考虑从 Google's CDN 获取它，它可能无论如何都缓存在用户的浏览器中。

【讨论】：

【解决方案3】：

你可以试试这个新的 jquery 插件。像 yeapnope.js 一样工作，但更有意义。

http://plugins.jquery.com/plugin-tags/autoloader

$(document).autoLoader(
    {
      test: $.ui,
      loadScript: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-   ui.min.js",
      complete: function(){
         console.log($.ui);
      }
    }
);

【讨论】：

【解决方案4】：

我不会太担心。文件被缓存。一旦您网站中的一个页面加载了 jquery UI（或任何其他包含文件，如 CSS），下次需要它时，它将在用户的浏览器缓存中，几天/几周内永远不会再次加载

【讨论】：

【解决方案5】：

听起来你想要一个脚本加载器。

不过，您通常不能跨浏览器同步加载脚本，因此脚本加载器必然是异步的。您所要求的并不完全可能，因为脚本需要加载，调用回调，然后继续。你不会想调用某个插件而不知道它是否同步执行，这会让你陷入困境。

我推荐你看看 DeferJS，一个 jQuery 的脚本加载器： https://github.com/BorisMoore/jsdefer

【讨论】：

【解决方案6】：

从您的 cmets 看来，您的部分愿望似乎是保持您的代码井井有条。我会推荐RequireJs。它使您可以将代码分解为具有显式依赖关系的清晰分离的模块。然后，当您想投入生产时，有一个构建工具可以将它们全部重新合并到您要提供的（请求/带宽节省）2-3 个文件中。

【讨论】：

【解决方案7】：

是的，我也考虑过实现这样的东西。我不确定最终是否值得，但有很多图书馆可以为你做这件事，比如ensure

【讨论】：

【解决方案8】：

您可以尝试这样的事情，但这会很痛苦。基本上，您正在检查捕获的错误类型和消息，如果对话框（您尝试调用的函数不存在）加载该函数并尝试再次调用该方法。就像我说的那样，除非想到一些优雅的解决方案，否则到处都这样做会很痛苦。

function loadDialog() {
    $('#myDialog').dialog({});
}

try { 
    loadDialog()
} catch(e) {
    if (e && e.type && e.type=='not_defined' && e.message == 'dialog is not defined') {
        //load jQuery plugins...
        loadDialog();
    }
}

【讨论】：

鉴于现有的脚本加载器解决方案，我不确定 OP 是否一定需要重新发明他或她自己的解决方案，除非它是为了学习如何去做。
是的，尽可能使用延迟加载器，或者只是确保在使用之前加载您的库。

【解决方案9】：

这是上面评论的后续帖子：

<link rel="stylesheet" href="../system/stylesheets/universal.css" />
<link rel="stylesheet" href="../system/stylesheets/jquery-ui.min.css" />
<link rel="stylesheet" href="../system/stylesheets/uploadify.css" />
<link rel="stylesheet" href="system/stylesheets/style.css" />
<script src="../system/javascripts/swfobject.js"></script>

<script src="../system/javascripts/jquery.min.js"></script>
<script src="../system/javascripts/jquery-ui.min.js"></script>
<script src="../system/javascripts/global.jquery.js"></script>
<script src="../system/javascripts/analog.jquery.js"></script>
<script src="../system/javascripts/funtip.jquery.js"></script>
<script src="../system/javascripts/uploadify.jquery.js"></script>
<script src="system/javascripts/install.jquery.js"></script>
<link rel="stylesheet" href="system/templates/stylesheets/style.css" />
<script>
$(document).ready(function() {
    $(':text, :password, textarea').funtip();
});
</script>

【讨论】：