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 回答