JavaScript中有类似的东西吗？ @import 在CSS中允许您将JavaScript文件包含在另一个JavaScript文件中？
JavaScript中有类似的东西吗？ @import 在CSS中允许您将JavaScript文件包含在另一个JavaScript文件中？
旧版本的JavaScript没有导入，包含或要求，因此开发了许多不同的方法来解决这个问题。
但是最新版本的JavaScript有像这样的标准 ES6模块 导入模块，虽然大多数浏览器都不支持。很多人使用带浏览器应用程序的模块 建立 和/或 transpilation 使用具有模块等功能的新语法的实用工具。
请注意，目前，对ES6模块的浏览器支持并不是特别好，但它正在进行中。根据 这个StackOverflow的答案，它们在Chrome 61，Firefox 54中得到支持 dom.moduleScripts.enabled 设置 about:config）和MS Edge 16，只有Safari 10.1提供没有标志的支持。
因此，您目前仍需要使用构建和/或转换工具来运行有效的JavaScript，而无需用户使用这些浏览器版本或启用任何标志。
一旦ES6模块很常见，以下是您使用它们的方法：
// module.js
export function hello() {
return "Hello";
}
// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";
Node.js目前正在使用 module.exports /要求 系统。您可以使用 babel 如果你想要的话，就转移 import 句法。
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
JavaScript还有其他方法可以在不需要预处理的浏览器中包含外部JavaScript内容。
您可以使用AJAX调用加载其他脚本，然后使用 eval 运行它。这是最简单的方法，但由于JavaScript沙箱安全模型，它仅限于您的域。运用 eval 还打开了通往错误，黑客和安全问题的大门。
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
您可以将带有脚本URL的脚本标记添加到HTML中。为了避免jQuery的开销，这是一个理想的解决方案。
该脚本甚至可以驻留在不同的服务器上。此外，浏览器评估代码。该 <script> 标签可以注入到网页中 <head>，或在结束前插入 </body> 标签。
以下是一个如何工作的示例：
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // Make a script DOM node
script.src = url; // Set it's src to the provided URL
document.head.appendChild(script); // Add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
此功能将添加一个新功能 <script> 标签到页面头部的末尾，其中 src attribute被设置为作为第一个参数赋予函数的URL。
这两种解决方案都在讨论和说明中 JavaScript疯狂：动态脚本加载。
现在，您必须了解一个大问题。这样做意味着 你远程加载代码。现代Web浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。 （这适用于jQuery方法和手动动态脚本加载方法。）
这意味着如果你直接使用这些技巧， 在您要求加载后，您将无法在下一行使用新加载的代码，因为它仍然会加载。
例如： 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。它的工作原理！混乱...
那该怎么办呢？
好吧，你可以在我给你的链接中使用作者建议的黑客。总之，对于匆忙的人，他在加载脚本时使用事件来运行回调函数。因此，您可以使用远程库将所有代码放在回调函数中。例如：
function loadScript(url, callback)
{
// Adding the script tag 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);
}
然后，在脚本加载到a之后编写要使用的代码 lambda函数：
var myPrettyCode = function() {
// Here, do whatever you want
};
然后你运行所有：
loadScript("my_lovely_script.js", myPrettyCode);
请注意，脚本可以在DOM加载之后或之前执行，具体取决于浏览器以及是否包含该行 script.async = false;。有一个 关于Javascript加载的一篇很棒的文章 讨论这个。
正如在本答案的顶部所提到的，许多开发人员现在在他们的项目中使用像WebPack，Babel或Gulp这样的构建/转换工具，允许他们更好地使用新的语法和支持模块，组合文件，缩小等。
如果有人想要更先进的东西，请试试 RequireJS。您将获得额外的好处，例如依赖关系管理，更好的并发性，并避免重复（即，多次检索脚本）。
您可以在“模块”中编写JavaScript文件，然后在其他脚本中将它们作为依赖项引用。或者您可以将RequireJS用作简单的“go get this script”解决方案。
例：
将依赖项定义为模块：
一些-dependency.js
define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {
//Your actual script goes here.
//The dependent scripts will be fetched if necessary.
return libraryObject; //For example, jQuery object
});
implementation.js 是你依赖的“主要”JavaScript文件 一些-dependency.js
require(['some-dependency'], function(dependency) {
//Your script goes here
//some-dependency.js is fetched.
//Then your script is executed
});
摘录自 GitHub上 自述：
RequireJS加载纯JavaScript文件以及更多定义 模块。它针对浏览器内使用进行了优化，包括在Web中 工作者，但它可以在其他JavaScript环境中使用，例如 犀牛和节点。它实现了异步模块API。
RequireJS使用普通脚本标签来加载模块/文件，所以它应该 允许轻松调试。它可以简单地用于加载现有的 JavaScript文件，所以 您可以将其添加到现有项目中 必须重写你的JavaScript文件。
...
实际上 是 一种加载JavaScript文件的方法 不 异步，所以你可以在加载后立即使用新加载文件中包含的函数，我认为它适用于所有浏览器。
你需要使用 jQuery.append()在...上 <head> 您网页的元素，即：
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
但是，此方法也存在问题：如果导入的JavaScript文件中发生错误， 萤火 （还有Firefox错误控制台和 Chrome开发者工具 如果你使用Firebug跟踪JavaScript错误很多（我这样做），这将是一个很大的问题。由于某种原因，Firebug根本不知道新加载的文件，因此如果该文件中发生错误，它会报告它发生在您的主文件中 HTML 文件，您将无法找出错误的真正原因。
但如果这对您来说不是问题，那么这种方法应该可行。
我实际上写了一个名为的jQuery插件 $ .import_js（） 它使用这种方法：
(function($)
{
/*
* $.import_js() helper (for JavaScript importing within JavaScript code).
*/
var import_js_imported = [];
$.extend(true,
{
import_js : function(script)
{
var found = false;
for (var i = 0; i < import_js_imported.length; i++)
if (import_js_imported[i] == script) {
found = true;
break;
}
if (found == false) {
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
import_js_imported.push(script);
}
}
});
})(jQuery);
所以你需要做的就是导入JavaScript：
$.import_js('/path_to_project/scripts/somefunctions.js');
我也做了一个简单的测试 例。
它包括一个 main.js 文件在主HTML中，然后在脚本中 main.js 使用 $.import_js() 导入一个名为的附加文件 included.js，它定义了这个功能：
function hello()
{
alert("Hello world!");
}
包括之后 included.js， hello() 函数被调用，你得到警报。
（这个答案是对e-satisf'评论的回应）。
另一种方式，在我看来更清洁，是制作同步Ajax请求而不是使用 <script> 标签。这也是如何 Node.js的 手柄包括。
这是使用jQuery的一个例子：
function require(script) {
$.ajax({
url: script,
dataType: "script",
async: false, // <-- This is the key
success: function () {
// all good...
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
然后，您可以在代码中使用它，因为您通常使用包含：
require("/scripts/subscript.js");
并且能够在下一行中从所需脚本调用函数：
subscript.doSomethingCool();
有一个好消息要告诉你。很快您就可以轻松加载JavaScript代码了。它将成为导入JavaScript代码模块的标准方式，并将成为核心JavaScript本身的一部分。
你只需要写 import cond from 'cond.js'; 加载一个名为的宏 cond 从一个文件 cond.js。
因此，您不必依赖任何JavaScript框架，也不必明确制作 阿贾克斯 调用。
参考：
可以动态生成JavaScript标记，并将其从其他JavaScript代码中添加到HTML文档中。这将加载有针对性的JavaScript文件。
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");
声明 import 在ECMAScript 6中。
句法
import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;