如何在另一个 JavaScript 文件中包含一个 JavaScript 文件
答案:使用export
和import
语句
从 ECMAScript 6(或 ES6)开始,您可以在 JavaScript 文件中使用 export
或 import
语句将变量、函数、类或任何其他实体导出或导入其他 JS 文件。
例如,假设您有两个名为"main.js"和"app.js"的 JavaScript 文件,并且您想将一些变量和函数从"main.js"导出到"app.js"。 然后在"main.js"文件中,您需要编写 export
语句(第9行),如下例所示:
let msg = "Hello World!";
const PI = 3.14;
function addNumbers(a, b){
return a + b;
}
/* 导出变量和函数 */
export { msg, PI, addNumbers };
在"app.js"文件中,您需要编写 import
语句(line no-1),如下所示:
import { msg, PI, addNumbers } from './main.js';
console.log(msg); /* Prints: Hello World! */
console.log(PI); /* Prints: 3.14 */
console.log(addNumbers(5, 16)); /* Prints: 21
*/
或者,您可以使用 jQuery getScript()
方法从服务器加载一个 JS 文件,然后用一行代码执行它。 假设您有一个包含以下代码的 JS 文件"test.js"。
/* Defining variables */
var str = "Hi there!";
var num = 15;
/* Defining a function */
function multiplyNumbers(a, b){
return a * b;
}
现在您可以使用 getScript()
方法在脚本中加载这个"test.js"文件,如下所示:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 加载 JS 文件演示</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
var url = "test.js";
$.getScript(url, function(){
$(document).ready(function(){
console.log(str); /* Prints: Hi there! */
console.log(num); /* Prints: 15 */
console.log(multiplyNumbers(4, 25)); /* Prints: 100 */
});
});
</script>
</body>
</html>
请参阅 JavaScript ES6 功能
上的教程以了解 ES6 中引入的新特性。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答: