10

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

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

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

感谢您的时间。

4

9 回答 9

3

有很多按需脚本加载的例子。例如，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获取它，无论如何它都可能缓存在用户的浏览器中。

于 2011-06-21T21:02:34.867 回答
3

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

于 2011-06-21T21:03:30.983 回答
2

你可以试试这个新的 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);
      }
    }
);
于 2011-07-26T00:13:56.167 回答
1

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

于 2011-06-21T21:04:13.263 回答
1

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

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

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

于 2011-06-21T21:05:11.253 回答
1

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

于 2011-07-29T13:59:29.347 回答
0

是的，我也考虑过实施这样的事情。我不确定最终是否值得，但是有很多图书馆可以为您做到这一点，例如确保

于 2011-06-21T21:03:56.017 回答
0

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

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();
    }
}
于 2011-06-21T21:08:37.667 回答
0

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

<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>
于 2011-06-21T21:11:28.177 回答