我如何在另一个JavaScript文件中添加一个JavaScript文件,类似于CSS中的 @import?
当前回答
使用 ES6 的进口和出口模块与 Node.js 合作
使用.mjs 扩展而不是.js 的名称文件
创建文件
touch main.mjs lib.mjs
主.js
import { add } from './lib.mjs';
console.log(add(40, 2));
英格兰MJ
export let add = (x,y) => {
return x + y
}
跑步
node --experimental-modules main.js
其他回答
请注意,我们通常使用静态脚本,所以我们希望尽可能多地从缓存中获取。
这节省了网络流量,加速着陆。
使用
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
console.log( textStatus );
});
存储:真实的选项已添加到 Ajax 方法。
您也可以使用 PHP 编写脚本:
文件 main.js.php:
<?php
header('Content-type:text/javascript; charset=utf-8');
include_once("foo.js.php");
include_once("bar.js.php");
?>
// Main JavaScript code goes here
在现代语言中,如果脚本已经加载了,则会:
function loadJs( url ){
return new Promise(( resolve, reject ) => {
if (document.querySelector( `head > script[ src = "${url}" ]`) !== null ){
console.warn( `script already loaded: ${url}` );
resolve();
}
const script = document.createElement( "script" );
script.src = url;
script.onload = resolve;
script.onerror = function( reason ){
// This can be useful for your error-handling code
reason.message = `error trying to load script ${url}`;
reject( reason );
};
document.head.appendChild( script );
});
}
使用(async/await):
try { await loadJs("https://.../script.js"); }
catch(error) { console.log(error); }
或
await loadJs( "https://.../script.js" ).catch( err => {} );
使用(承诺):
loadJs( "https://.../script.js" ).then( res => {} ).catch( err => {} );
还有 Head.js. 很容易处理:
head.load("js/jquery.min.js",
"js/jquery.someplugin.js",
"js/jquery.someplugin.css", function() {
alert("Everything is ok!");
});
正如你所看到的,它比 Require.js 更容易,而且像 jQuery 的 $.getScript 方法一样方便,它还有一些先进的功能,如条件加载、功能检测等。
若要在 JavaScript 中输入另一个脚本,请使用输入关键字:
import '/src/js/example.js';
// both types of quotes work
import "/src/js/example2.js";