- 模块的概念
在ES6+中，模块是指一个独立的代码单元，可以导出（export）和导入（import）其中的变量、函数、类等内容。一个模块是一个文件，具有自己的作用域，可以与其他模块互相独立使用。
- 导出模块内容
在ES6+中，我们可以使用export关键字来导出模块内容。例如：
// module.js export const name = 'Alice'; export function sayHello() { console.log(`Hello, my name is ${name}`); } export class Person { constructor(name) { this.name = name; } }
这里在module.js中定义了一个字符串类型的name变量、一个函数类型的sayHello函数和一个Person类，并使用export关键字导出这些内容。
- 导入模块内容
在ES6+中，我们可以使用import关键字来导入模块内容。例如：
// app.js import { name, sayHello, Person } from './module.js'; console.log(name); // Alice sayHello(); // Hello, my name is Alice const person = new Person('Bob'); console.log(person.name); // Bob
这里在app.js中使用import关键字导入了module.js中导出的name变量、sayHello函数和Person类，并进行相应的操作。
- 默认导出
在ES6+中，我们还可以使用export default关键字来指定默认导出内容。例如：
// module2.js const name = 'Alice'; function sayHello() { console.log(`Hello, my name is ${name}`); } class Person { constructor(name) { this.name = name; } } export default Person; export { name, sayHello };
这里在module2.js中定义了一个字符串类型的name变量、一个函数类型的sayHello函数和一个Person类，并使用export default关键字指定默认导出Person类。
在其他模块中，可以使用import关键字来导入默认导出内容。例如：
// app2.js import Person, { name, sayHello } from './module2.js'; console.log(name); // Alice sayHello(); // Hello, my name is Alice const person = new Person('Bob'); console.log(person.name); // Bob
这里使用import关键字导入了module2.js中默认导出的Person类和其他导出内容，并进行相应的操作。
总结
通过本文的介绍，我们了解了JavaScript中的Module/模块。模块化可以帮助我们更加方便地组织和管理代码，以及实现代码的复用和分离。在实际开发中，我们需要根据需求来选择合适的模块化方案，以便更加方便和有效地进行开发。
