JavaScript 模块

x33g5p2x  于2022-04-27 转载在 Java  
字(2.4k)|赞(0)|评价(0)|浏览(219)

在本教程中,您将借助示例了解 JavaScript 中的模块。
    随着我们的程序变得越来越大,它可能包含许多行代码。您可以使用模块根据功能将代码分隔在单独的文件中,而不是将所有内容都放在一个文件中。这使我们的代码更有条理,更易于维护。
    模块是一个包含执行特定任务的代码的文件。一个模块可能包含变量、函数、类等。让我们看一个例子,假设一个名为 greet.js 的文件包含以下代码:

// exporting a function
export function greetPerson(name) {
    return `Hello ${name}`;
}

现在,要在另一个文件中使用 greet.js 的代码,您可以使用以下代码:

// importing greetPerson from greet.js file
import { greetPerson } from './greet.js';

// using greetPerson() defined in greet.js
let displayName = greetPerson('Jack');

console.log(displayName); // Hello Jack

这里,

  • greet.js 中的 greetPerson() 函数是使用 export 关键字导出的
export function greetPerson(name) {
    ... 
}
  • 然后,我们使用 import 关键字在另一个文件中导入 greetPerson()。要导入函数、对象等,您需要将它们包裹在 { } 。
import { greet } from '/.greet.js';

注意:您只能从模块访问导出的函数、对象等。您需要为特定的函数、对象等使用 export 关键字来导出它们并在其他文件中使用它们。

导出多个对象

也可以从一个模块中导出多个对象。例如,在文件 module.js 中

// exporting the variable
export const name = 'JavaScript Program';

// exporting the function
export function sum(x, y) {
    return x + y;
}

在主文件中,

import { name, sum } from './module.js';

console.log(name);
let add = sum(4, 9);
console.log(add); // 13

这里,

import { name, sum } from './module.js';

这将从 module.js 文件中导入 name 变量和 sum() 函数。

重命名导入和导出

如果要导入的对象(变量、函数等)已存在于主文件中,则程序可能无法正常运行。在这种情况下,程序从主文件而不是导入的文件中获取值。
    为了避免命名冲突,可以在导出或导入期间重命名这些函数、对象等。

1.在模块中重命名(导出文件)
// renaming import inside module.js
export {
    function1 as newName1,
    function2 as newName2
};

// when you want to use the module
// import in the main file
import { newName1, newName2 } from './module.js';

这里,从 module.js 文件中导出函数时,新名称(这里,newName1 和 newName2) 被赋予函数。因此,在导入该函数时,将使用新名称来引用该函数。

2.重命名导入文件
// inside module.js
export {
    function1,
    function2
};

// when you want to use the module
// import in the required file with different name

import { function1 as newName1, function2 as newName2 } from './module.js';

这里,在导入函数时,函数名使用了新名称(这里,newName1 和 newName2) 。现在使用新名称来引用这些函数。

默认导出

您还可以执行模块的默认导出。例如,
    在文件 greet.js 中:

// default export
export default function greet(name) {
    return `Hello ${name}`;
}

export const age = 23;

然后在导入的时候可以使用:

import random_name from './greet.js';

在执行默认导出时,

  • random_name 是从 greet.js 导入的。因为,random_name 不在 greet.js,默认导出(本例中为 greet())被导出为 random_name。
  • 您可以直接使用默认导出,而无需使用大括号 { }。

注意:一个文件可以包含多个导出。但是,一个文件中只能有一个默认导出。

模块总是使用严格模式

默认情况下,模块处于严格模式。例如,

// in greet.js
function greet() {
    // strict by default
}

export greet();
使用模块的好处
  • 代码库更易于维护,因为具有不同功能的不同代码位于不同的文件中。
  • 使代码可重用。您可以根据需要定义一个模块并多次使用它。

某些浏览器可能不支持使用导入/导出。要了解更多信息,请访问JavaScript 导入/导出支持

上一教程 :JS throw                                          下一教程 :JS ES6

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/modules

相关文章