有没有一种解决方案,我可以在需要时让 JavaScript/jQuery 自动加载依赖文件?例如,考虑这种情况:
- 我有一个自动加载器脚本来监听何时需要加载特定的脚本。
dialog()
调用了一个 jQuery插件。- 自动加载器被告知在调用此插件时进行监听,并加载 jQuery UI。
- 如果将来调用更多对话框,则不会加载所需的脚本。
简单地尝试限制带宽是否需要付出太多努力?我是否应该将所有核心文件包含在一个超级包中并完成它?
感谢您的时间。
有没有一种解决方案,我可以在需要时让 JavaScript/jQuery 自动加载依赖文件?例如,考虑这种情况:
dialog()
调用了一个 jQuery插件。简单地尝试限制带宽是否需要付出太多努力?我是否应该将所有核心文件包含在一个超级包中并完成它?
感谢您的时间。
有很多按需脚本加载的例子。例如,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获取它,无论如何它都可能缓存在用户的浏览器中。
是的,您应该将所有脚本包含在一个文件中。或者至少它们中的大多数是这样分组的:jquery.js、global.js(这是经常出现的地方——在不止一个、两个页面上——应该使用脚本)和 page_specyfic.js。想象一下,dialog()
调用了 a 并且用户必须等待 .js 下载和插件初始化。节省带宽(如果有的话)不值得损害用户的体验。
你可以试试这个新的 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);
}
}
);
我不会太担心。文件被缓存。一旦您网站中的一个页面加载了 jquery UI(或任何其他包含文件,如 CSS),下次需要它时,它将在用户的浏览器缓存中,几天/几周内永远不会再次加载
听起来你想要一个脚本加载器。
但是,您通常不能跨浏览器同步加载脚本,因此脚本加载器必然是异步的。您所要求的并不完全可能,因为脚本需要加载、调用回调,然后继续。你不会想调用一些插件而不知道它是否同步执行,这会让你陷入一个问题的世界。
我建议你看看 DeferJS,一个 jQuery 的脚本加载器: https ://github.com/BorisMoore/jsdefer
从您的评论来看,您的部分愿望似乎是保持您的代码井井有条。我会推荐RequireJs。它使您可以将代码分解为具有显式依赖关系的清晰分离的模块。然后,当您想投入生产时,有一个构建工具可以将它们全部重新合并到您要提供的(请求/带宽节省)2-3 个文件中。
是的,我也考虑过实施这样的事情。我不确定最终是否值得,但是有很多图书馆可以为您做到这一点,例如确保
你可以尝试这样的事情,但这会很痛苦。基本上,您正在检查捕获的错误类型和消息,如果对话框(您尝试调用的函数不存在)加载该函数并尝试再次调用该方法。就像我说的那样,除非想到一些优雅的解决方案,否则到处都这样做会很痛苦。
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();
}
}
这是上面评论的后续帖子:
<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>