JavaScript“包含”功能？答案

【问题标题】：JavaScript "include" function?JavaScript“包含”功能？
【发布时间】：2013-09-23 21:08:28
【问题描述】：

我想知道是否有一个javascript“包含”函数（类似于python中的那个），我正在寻找一些东西但除了$.load()和google.load()之外找不到任何东西。

所以，我冒险创建了一个脚本，只是为了好玩，所以：

var include = function( lib ) {
// start with jQuery
    if(lib == "jquery") {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://code.jquery.com/jquery.min.js";
        script.defer = "defer"; // should I use script.setAttribute('defer', 'defer')?
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(script, s);
    }
}

然后，在一个单独的脚本中：

include("jquery");
$("p").innerHTML = "Worked!";

但我得到一个错误 $ 没有定义

这是有道理的，因为脚本在加载 jQuery 之前运行。所以我的问题是，有没有办法确保包含脚本运行 before 之前的任何其他内容？我看到callback 的解决方案看起来像这样：

include("http://code.jquery.com/jquery.min.js", function() {
    $("p").innerHTML = "Worked!";
});

但我确实想知道是否有任何东西（就像我上面建议的那样）更简洁一些。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery python include

【解决方案1】：

您正在重新发明轮子：有大量的库/组件在做基本相同的工作，但功能更多。检查Asynchronous Module Definition API 和RequireJS 以了解开始。

【讨论】：

+1 Require.js 具有在浏览器和 node.js 中工作的额外优势
“我见过类似这样的回调解决方案：include("http://code.jquery.com/jquery.min.js", function() {$("p").innerHTML = "Worked!";}); 但我确实想知道是否有任何东西（就像我上面建议的那样）更简洁一些。”我知道所有这些图书馆和东西。不要试图重新发明轮子。只是试图找到（或制作）类似于 python 的东西。
@Jacedc 如果您所说的“neat,”是指同步/过程并且不需要回调，那么没有。 JavaScript 还没有像协程这样的功能，其中函数可以暂停执行，甚至 return 没有阻塞。 Generators 将关闭，但这是 ES6 即将推出的功能。不过，对于一些可扩展的环境，例如 Node.js，您可能会找到解决方案，例如 fibers。
我明白了，但是你忽略了异步 JS 的黄金法则：'below' 并不意味着 'after'。而include-ing 外部 JS 默认是异步的，因为它基本上是在向 DOM 添加一个元素。
啊。好的。只是想知道......我想知道是否有任何可能的方法来包含脚本而不将script 元素发布到html 元素？这似乎是一种非常传统的包含脚本的方式。

【解决方案2】：

由于 JavaScript 的运行方式，没有办法让它变得更干净。你可以有某种间隔来加载你需要的所有文件，就像这样。

window.includeFiles = [];
function include(file){
   window.includeFiles.push(file);
}
function initialize(callback){
   for(var i = 0; i < window.includeFiles.length; i++){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = window.includeFiles[i];
      script.defer = "defer"; // should I use script.setAttribute('defer', 'defer')?
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(script, s);
      if((i+1)==window.includeFiles.length){
         callback();
      }
   }
}

基本上这会让你喜欢这样：

include("http://code.jquery.com/jquery.min.js");
include("http://code.jquery.com/jquery.min.js");
include("http://code.jquery.com/jquery.min.js");
include("http://code.jquery.com/jquery.min.js");
include("http://code.jquery.com/jquery.min.js");
initialize(function(){
  //code ready
});

唯一的问题是它不测试网络，只有通过检查仅在包含的库中可用的功能是否可用才能真正完成。 Witch 让raina77ow 使用RequireJS 的答案成为更好的解决方案。

【讨论】：

【解决方案3】：

我认为最简单的方法是使用head.js http://headjs.com/

head.js(
  "/path/to/jquery.js", 
  "/google/analytics.js", 
  "/js/site.js", function() {

   // Code that executes when all the scripts have been loaded

});

【讨论】：