JavaScript 自动加载器？

JavaScript Autoloader?

提问by Oliver Spryn

Is there a solution out there where I can have JavaScript/jQuery autoload dependent files when needed? For example, consider this scenario:

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

1. I have an autoloader script listening for when a particular script needs to be loaded.
2. A jQuery dialog()plugin is called.
3. The autoloader is told to listen for when this plugin is called, and loads the jQuery UI.
4. If more dialogs are called in the future, the required script will not be loaded.

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

Is this too much effort for simply trying to limit bandwidth? Should I just include all of the core files in one superpackage and be done with it?

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

Thank you for your time.

感谢您的时间。

采纳答案by Litek

Yes you should inclde all of the scripts in one file. Or at least most of them groupped like this: jquery.js, global.js (that's where frequently - on more than one, two pages - used scripts should be) and page_specyfic.js. Imagine that a dialog()is called and the user has to wait for .js to download and plugins to initialise. Savings in bandwith (if any) wouldn't be worth harming the users expirience.

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

回答by justkt

There are many examples of on demand script loading out there. For example remy sharp has a code sample on his blogthat you could either use as is or turn into a jQuery plugin. Unfortunately it may not work in all browsers.

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

There is also the jQuery Lazy Plugin Loaderwhich loads jQuery plugins on demand rather than up-front. To use it you would need to set up lazy loading for each piece of jQuery UI you are using as follows (name will be the function name for each piece you use):

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

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

You can also use the techniques in this question about loading jQuery itself on demand. For example you can dynamically create a script tag at the time needed to load jQuery UI.

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

Finally since you are talking about jQuery UI consider getting it from Google's CDN, which is likely cached in the user's browser anyway.

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

回答by adam

You can try this new jquery plugin. Works like yeapnope.js but more make sense.

你可以试试这个新的 jquery 插件。像 yeapnope.js 一样工作，但更有意义。

http://plugins.jquery.com/plugin-tags/autoloader

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

回答by Sean McMillan

From your comments, part of your wish seems to be to keep your code organized. I would recommend RequireJs. It lets you break your code up into clearly separated modules with explicit dependencies. Then when you want to go to production, there's a build tool that will merge them all back together into the (request/bandwidth saving) 2-3 files you want to serve.

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

回答by Rodolfo

I wouldn't worry too much. The files are cached. Once one page in your site loads the jquery UI (or any other include file like CSS), the next time it's needed it will be in the user's browser cache, never to be loaded again for days/weeks

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

回答by InfinitiesLoop

Sounds like you want a script loader.

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

You can't generally do synchronous loading of scripts across browsers, though, so script loaders are necessarily asynchronous. What you're asking for isn't exactly possible since the script needs to load, call a callback, and then continue. You wouldn't want to call some plugin and not know whether it is executing synchronously or not, that gets you into a world of problems.

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

I recommend you look at DeferJS, a script loader for jQuery: https://github.com/BorisMoore/jsdefer

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

回答by Nathan Romano

you could try something like this but it would be a pain. basically you are checking the type of error caught and message if dialog (the function you are trying to call doesn't exist) load the function and try calling the method again. Like I said it would be a pain to do this everywhere unless some elegant solution was thought of.

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

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

回答by Oliver Spryn

This is a follow-up post for a comment above:

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

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

回答by John Kalberer

Yeah, I have also thought about implementing something like this. I am not sure if it would be worthwhile or not in the end but there are quite a few libraries to do this for you like ensure

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