JavaScript 自动加载器？

Question

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

1. 我有一个自动加载器脚本，用于侦听何时需要加载特定脚本。
2. 调用 jQuery dialog() 插件。
3. 自动加载器被告知监听此插件何时被调用，并加载 jQuery UI。
4. 如果将来调用更多对话框，则不会加载所需的脚本。

对于仅仅尝试限制带宽来说，这是否太过费力？我是否应该将所有核心文件包含在一个超级包中并完成它？

谢谢您的宝贵时间。

Answer 1

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

Answer 2

有许多按需脚本加载的示例。例如，remy Sharp 在他的博客上有一个代码示例您可以按原样使用它，也可以将其转换为 jQuery 插件。不幸的是，它可能不适用于所有浏览器。

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

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

您还可以使用 这个关于按需加载 jQuery 本身的问题。例如，您可以在需要加载 jQuery UI 时动态创建脚本标记。

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

Answer 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);
      }
    }
);

Answer 4

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

Answer 5

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

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

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

Answer 6

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

Answer 7

是的，我也想过实施这样的事情。我不确定它最终是否值得，但有很多库可以为您执行此操作，例如 ensure

Answer 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();
    }
}

Answer 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>