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

创建于 2024-12-03 / 26
字体： [默认] [大] [更大]

主题:JavaScript / jQuery

答案:使用export和import语句

从 ECMAScript 6（或 ES6）开始，您可以在 JavaScript 文件中使用 export 或 import 语句将变量、函数、类或任何其他实体导出或导入其他 JS 文件。

例如，假设您有两个名为"main.js"和"app.js"的 JavaScript 文件，并且您想将一些变量和函数从"main.js"导出到"app.js"。 然后在"main.js"文件中，您需要编写 export 语句（第9行），如下例所示:

示例

Try this code » 
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），如下所示:

示例

Try this code » 
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"。

示例

Try this code » 
/* 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 相关问题解答

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


0 人点赞过