JavaScript自动加载器？

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

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

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

谢谢你的时间。

2011-06-21 Oliver Spryn

是的，你应该将所有的脚本包含在一个文件中。或者至少其中大部分是这样分组的：jquery.js，global.js（这是频繁的 - 在多于两页的页面上 - 使用的脚本应该是）和page_specyfic.js。想象一下调用了dialog()，用户必须等待.js下载和插件才能初始化。节省带宽（如果有）不会损害用户的期望。

来源

2011-06-21 21:03:30 Litek

嗯...为了代码组织，我想保留所有这些文件的独立性。例如，一个jQuery文件，一个jQuery用户界面，该插件的脚本，该插件的脚本......在我看来，它更容易，更有条理。请在下面查看我的代码。您可以看到每页加载的zillion脚本（更多）。为了保持这些组织，最小的HTTP请求和带宽使用，我怎么能结合这些？ –

您必须决定将哪些文件合并为全局文件，而巫婆文件只能在一个页面上使用。有许多工具可以缩小文件。例如[这一个]（http://www.refresh-sf.com/yui/）。为了组织起见，我建议留下描述给定插件的评论，它的版本（也有时需要许可证才能留下评论）。顺便说一句，你应该做你的css文件一样。 – Litek

真棒，真棒，真棒！谢谢，Litek为你的好答案，描述。 –

这里有很多按需脚本加载的例子。例如，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开始，它可能会缓存在用户的浏览器中。

来源

2011-06-21 21:02:34 justkt

是的，我也想过实现这样的东西。我不知道最终是否值得或者不值得，但有相当多的图书馆可以为你做这件事。ensure

来源

2011-06-21 21:03:56

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

来源

2011-06-21 21:04:13 Rodolfo

不适用于手机。 – William

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

但是，您通常不能跨浏览器同步加载脚本，因此，脚本加载器必须是异步的。由于脚本需要加载，调用回调，然后继续，因此您要求的内容不完全可能。你不想调用某个插件，也不知道它是否正在同步执行，这会让你陷入一个问题的世界。

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

来源

2011-06-21 21:05:11 InfinitiesLoop

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

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-21 21:08:37

考虑到现有的脚本加载器解决方案，我不确定OP是否需要重新创建自己的脚本，除非是为了学习如何去做。 – justkt

是在所有可能的情况下使用defer加载器，或者只是确保您的库在使用之前加载。 –

这是上述评论的后续岗位：

<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-21 21:11:28

你可以试试这个新的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-26 00:13:56 adam

从你的意见，你的愿望的一部分，似乎是让你的代码组织。我会推荐RequireJs。它可以让你把你的代码分解成明确的独立模块和显式的依赖关系。然后，当您想要投入生产时，会有一个构建工具将它们全部合并到要提供的（请求/带宽节省）2-3个文件中。

来源

2011-07-29 13:59:29

JavaScript自动加载器？

回答

相关问题