极客笔记JavaScript的import和export
介绍
在现代的前端开发中，JavaScript已经成为了一种非常重要的编程语言。而在JavaScript中，模块化的概念也越来越被开发者所重视。模块化可以使代码更加清晰、可维护，并且降低了代码之间的耦合度。本文将详细介绍JavaScript的import和export语法，以及它们在模块化开发中的应用。
import语法
在JavaScript中，可以使用import关键字来引入其他模块导出的变量、函数或者类。import语法的基本使用方式如下：
import { identifier } from 'module-name';
其中identifier是要导入的变量、函数或类的标识符，'module-name'表示要导入的模块的名称。需要注意的是，被导入的模块必须使用export关键字进行导出。
默认导出
在一个模块中，只能有一个默认导出。默认导出的语法如下：
// module.js
export default identifier;
// main.js
import identifier from 'module';
在导入时，可以给导入的变量起一个新的名字，如上面的示例中的identifier。
命名导出
除了默认导出之外，一个模块还可以有多个命名导出。命名导出的语法如下：
// module.js
export { identifier1, identifier2 };
// main.js
import { identifier1, identifier2 } from 'module';
在导入时，可以直接使用导出的标识符的名称。
导入整个模块
除了导入其中的具体标识符之外，还可以导入整个模块，然后使用模块中的所有导出。导入整个模块的语法如下：
// module.js
export const identifier1 = 'value1';
export const identifier2 = 'value2';
// main.js
import * as module from 'module';
console.log(module.identifier1); // 输出'value1'
console.log(module.identifier2); // 输出'value2'
运行结果
// module.js
export const name = 'Alice';
export function sayHello() {
console.log('Hello!');
}
// main.js
import { name, sayHello } from './module.js';
console.log(name); // 输出'Alice'
sayHello(); // 输出'Hello!'
export语法
在JavaScript中，可以使用export关键字将变量、函数或类导出，使其可以被其他模块使用。
默认导出
使用export default语法可以将一个标识符以默认的方式导出：
// module.js
export default identifier;
在上面的示例中，我们将identifier导出为默认导出。
命名导出
使用export语法可以将一个标识符以命名的方式导出：
// module.js
export { identifier1, identifier2 };
在上面的示例中，我们将identifier1和identifier2以命名导出的方式进行导出。
运行结果
// module.js
export default function sayHello() {
console.log('Hello!');
}
// main.js
import sayHello from './module.js';
sayHello(); // 输出'Hello!'
模块的相对路径和绝对路径
在import语句中，可以使用相对路径或绝对路径来指定需要导入的模块。
相对路径
使用相对路径可以导入与当前模块在同一目录下的其他模块。相对路径需要以./或../开头，表示当前目录或上层目录。
// module.js
export const name = 'Alice';
// main.js
import { name } from './module.js';
console.log(name); // 输出'Alice'
绝对路径
使用绝对路径可以导入与当前模块或根目录下的其他模块。绝对路径需要以/开头，表示根目录。
// main.js
import { name } from '/module.js';
console.log(name); // 输出'Alice'
小结
通过本文的介绍，我们了解了JavaScript中的import和export语法，以及它们在模块化开发中的应用。import语法用于引入其他模块导出的变量、函数或类，而export语法用于将变量、函数或类导出，使其可以被其他模块使用。使用import和export可以使我们的代码更加清晰、可维护，并且降低了代码之间的耦合度。