如何在另一个JavaScript文件中包含一个JavaScript文件？
JavaScript中是否有类似于@importCSS的东西，允许您在另一个JavaScript文件中包含一个JavaScript文件？
问题答案：
JavaScript的旧版本没有导入，包含或要求，因此已经开发了许多解决此问题的方法。
但是自2015年（ES6）起，JavaScript有了ES6模块标准即可在Node.js中导入模块，大多数现代浏览器也支持该模块。
为了与旧浏览器的兼容性，这样的构建工具的WebPack和汇总和/或transpilation工具，如巴贝尔都可以使用。
从v8.5开始，带有标志的Node.js支持
ECMAScript（ES6）模块--experimental-modules，并且至少从不带有标志的Node.js v13.8.0
开始支持 ECMAScript（ES6）模块。要启用“
ESM”（相对于Node.js先前的CommonJS样式的模块系统[“ CJS”]），您可以"type": "module"在中使用package.json或为文件提供扩展名.mjs。（类似地，.cjs如果您的默认值为ESM，则可以命名用Node.js的先前CJS模块编写的模块。）
使用package.json：
{
"type": "module"
}
然后module.js：
export function hello() {
return "Hello";
}
然后main.js：
import { hello } from './module.js';
let val = hello(); // val is "Hello";
使用.mjs，您将拥有module.mjs：
export function hello() {
return "Hello";
}
然后main.mjs：
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
浏览器中的ECMAScript模块
自Safari 10.1，Chrome
61，Firefox 60和Edge
16开始，浏览器已经支持直接加载ECMAScript模块（不需要像Webpack这样的工具）。请在caniuse上查看当前支持。无需使用Node.js
.mjs扩展名；浏览器完全忽略模块/脚本上的文件扩展名。
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
浏览器中的动态导入
动态导入使脚本可以根据需要加载其他脚本：
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Node.js要求
module.exports/require系统是仍在Node.js中广泛使用的较早的CJS模块样式。
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
JavaScript还有其他方法可以在不需要预处理的浏览器中包含外部JavaScript内容。
AJAX加载
您可以使用AJAX调用加载其他脚本，然后用于eval运行它。这是最直接的方法，但是由于JavaScript沙箱安全模型，它仅限于您的域。使用eval还打开了漏洞，黑客和安全问题的大门。
获取加载
像动态导入一样，您可以fetch使用承诺通过调用来加载一个或多个脚本，以使用Fetch
Inject库控制对脚本依赖项的执行顺序：
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
jQuery加载
在jQuery的库提供加载功能在同一行：
$.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"); // create a script DOM node
script.src = url; // set its 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属性设置为URL，该URL作为第一个参数提供给该函数。
《JavaScript Madness：动态脚本加载》中讨论和说明了这两种解决方案。
检测何时执行脚本
现在，您必须知道一个大问题。这样做意味着 您需要远程加载代码
。现代的Web浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。（这适用于jQuery方法和手动动态脚本加载方法。）
这意味着，如果您直接使用这些技巧， 那么在您要求加载新代码后 ， 将无法在下一行使用新加载的代码 ，因为它仍将加载。
例如：my_lovely_script.jscontains 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.head;
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 whatever you want
};
然后运行所有这些：
loadScript("my_lovely_script.js", myPrettyCode);
请注意，脚本可能在加载DOM之后或之前执行，具体取决于浏览器以及是否包含line script.async = false;。总的来说，有一篇很棒的关于Javascript加载的文章对此进行了讨论。
-
问题内容： 我有2个HTML文件，假设是和。在我想包括。 在JSF中，我可以这样做： 这意味着在文件内部，我可以包含。 我们该如何存档？ 问题答案： 我认为最好的解决方案是使用jQuery： ： ： 这种方法是解决我的问题的简单干净的方法。
-
问题内容： 我如何将一个js文件包含到另一个js文件中，以便坚持DRY原则并避免重复代码。 问题答案： 您只能在HTML页面中包含脚本文件，而不能在另一个脚本文件中包含脚本文件。也就是说，您 可以 编写JavaScript来将“包含”脚本加载到同一页面中： 您的代码很有可能取决于您的“包含”脚本，但是在这种情况下，它可能会失败，因为浏览器将异步加载“导入”脚本。最好的选择是仅使用jQuery或YU
-
问题内容： 是否可以在另一个CSS文件中包含一个CSS文件？ 问题答案： 是： 注意： 该规则必须先于所有其他规则（除外）。 其他语句需要其他服务器请求。或者，将所有CSS连接到一个文件中，以避免多个HTTP请求。例如，复制的内容和入和仅供参考。
-
问题内容： 我正在使用cx_freeze部署我的应用程序。我想包含整个目录，因为包含单个文件不会将它们放在文件夹中。如何包含文件夹？ 问题答案： 您必须为构建选项设置一个include files参数。您可以通过不同的方式执行此操作，但是我将展示部分配置。我在这里描述的是针对一个特定的文件和一个特定的目的地。我认为您也可以设置这样的路径，但是我尚未对此进行测试。 编辑： 对此进行了测试，因此请为您
-
我使用groovy脚本中的方法创建了一个自定义dsl命令链。我从另一个groovy文件访问此命令链时遇到问题。是否有实现功能的方法？ 我尝试过使用“evaluate”，它可以加载groovy文件，但无法执行命令链。我尝试过使用GroovyShell类，但无法调用这些方法。 我这里有一个小房间。groovy中执行“please show the cube\u root of 1000”会产生10的结
-
问题内容： 如何检查一个DOM元素是否是另一个DOM元素的子元素？有内置的方法吗？例如，类似： 要么 如果没有，那么有什么想法怎么做？它还需要跨浏览器。我还应该提到，孩子可以嵌套在父级以下的多个级别。 问题答案： 更新： 现在有一种本地方法可以实现此目的。。在评论中也提到了答案。 旧答案： 使用该属性应该可以。从跨浏览器的角度来看，它也是非常安全的。如果已知这种关系是一级的，则可以简单地检查一下：