动态加载 JavaScript 文件

如何可靠且动态地加载 JavaScript 文件？这可用于实现一个模块或组件，当“初始化”时，该组件将根据需要动态加载所有需要的 JavaScript 库脚本。

使用该组件的客户端不需要加载所有库脚本文件（并手动插入<script>标签到他们的网页）实现这个组件 - 只是“主”组件脚本文件。

主流 JavaScript 库如何实现这一点（Prototype、jQuery 等）？这些工具是否将多个 JavaScript 文件合并为脚本文件的单个可再发行“构建”版本？或者他们是否动态加载辅助“库”脚本？

对这个问题的补充：有没有办法在加载动态包含的 JavaScript 文件后处理该事件？原型有document.observe用于文档范围的事件。例子：

document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('div.tabcontent').invoke('hide');
});

脚本元素有哪些可用事件？

javascript中没有import/include/require，但是有两种主要方法可以实现你想要的：

1 - 您可以通过 AJAX 调用加载它，然后使用 eval。

这是最直接的方法，但由于 Javascript 安全设置，它仅限于您的域，并且使用 eval 会为错误和黑客攻击打开大门。

2 - 在 HTML 中添加带有脚本 URL 的脚本元素。

绝对是最好的方法。您甚至可以从外部服务器加载脚本，并且当您使用浏览器解析器来评估代码时，它是干净的。你可以把script中的元素head网页元素，或底部body.

这里讨论和说明了这两种解决方案。

现在，有一个大问题你必须要知道。这样做意味着您远程加载代码。现代网络浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。

这意味着，如果您直接使用这些技巧，则在要求加载后的下一行将无法使用新加载的代码，因为它仍在加载。

例如：my_lovely_script.js 包含 MySuperObject

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

然后按 F5 重新加载页面。它有效！令人困惑...

那么该怎么办呢？

好吧，您可以使用作者在我给您的链接中建议的技巧。综上所述，对于赶时间的人来说，他使用 en event 在脚本加载时运行回调函数。所以你可以把所有使用远程库的代码放在回调函数中。例如：

function loadScript(url, callback)
{
    // adding the script element to the head as suggested before
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;

   // then bind the event to the callback function 
   // there are several events for cross browser compatibility
   script.onreadystatechange = callback;
   script.onload = callback;

   // fire the loading
   head.appendChild(script);
}

然后在 lambda 函数中加载脚本后编写要使用的代码：

var myPrettyCode = function() {
    // here, do what ever you want
};

然后你运行所有这些：

loadScript("my_lovely_script.js", myPrettyCode);

好，我知道了。但写这些东西很痛苦。

好吧，在这种情况下，您可以一如既往地使用出色的免费 jQuery 框架，它可以让您在一行中完成同样的事情：

$.getScript("my_lovely_script.js", function() {
    alert("Script loaded and executed.");
    // here you can use anything you defined in the loaded script
});