WEB 教程
实践 示例
HTML 参考手册
CSS 参考手册
PHP 参考手册

如何在另一个 JavaScript 文件中包含一个 JavaScript 文件

主题:JavaScript / jQuery上一页|下一页

答案:使用exportimport语句

从 ECMAScript 6(或 ES6)开始,您可以在 JavaScript 文件中使用 exportimport 语句将变量、函数、类或任何其他实体导出或导入其他 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 Load JS File Demo</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 相关问题解答

以下是与此主题相关的更多常见问题解答:

Advertisements