ES6 中的导出与导入
在以前的 JavaScript 中，我们通常需要在 HTML 中使用 script 标签引入脚本文件，然后使用全局变量进行交互。这种做法容易产生变量名冲突，也不便于代码维护和更新。而在 ES6 中，我们可以使用导出和导入来进行模块化管理，更好地组织我们的代码。
导出（Export）
在 ES6 中，我们可以使用 export 关键字将函数、变量、常量或对象等导出为一个模块。导出语句可以放在声明语句之前或之后，但不能出现在语句块中。下面是一些常见的导出方式：
- 导出一个变量或常量：
export const name = 'Tom'; export let age = 18; export const PI = 3.1415;
- 导出一个函数：
export function add(a, b) {
return a + b;
}- 导出一个对象：
export default {
name: 'Tom',
age: 18,
sayHello() {
console.log('Hello');
}
}- 导出一个类：
-- -------------------- ---- -------
------ ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
---------------------
-
-导入（Import）
使用 import 关键字可以将模块引入到当前文件中，然后使用其导出的函数、变量等内容。
import { name, age } from './module.js'; // 导入模块中的变量 name 和 age
import Person from './module.js'; // 导入模块中默认导出的对象
import { add as sum } from './module.js'; // 导入模块中的函数 add 并重命名为 sum
console.log(name, age);
const p = new Person('Tom', 18);
p.sayHello();
console.log(sum(1, 2));如果一个模块中有多个导出的内容，可以使用 * as 语法导入整个模块，并通过点语法访问导出的内容。
import * as mod from './module.js'; // 导入整个模块
console.log(mod.name, mod.age);
const p = new mod.Person('Tom', 18);
p.sayHello();
console.log(mod.add(1, 2));动态导入（Dynamic Import）
动态导入允许我们在运行时根据需要动态加载模块。在需要的地方使用 import() 函数即可。
button.addEventListener('click', () => {
import('./module.js').then(mod => {
console.log(mod.name);
});
});需要注意的是，动态导入返回的是一个 Promise 对象，需要使用 then 方法处理返回结果。此外，模块的路径必须是一个字符串，不能是一个变量或表达式。
总结
ES6 中的导出与导入让我们能够更好地组织和管理代码，避免了全局变量的污染和使用的不确定性。同时如果了解了如何使用动态导入，还可以实现更灵活的模块化管理。在编写前端代码时，尽量使用模块化的方式进行代码组织，可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6453d33d968c7c53b0801547