详解es6中的模块化

前言

在过去的多年中，JavaScript程序逐渐从简单的小型脚本发展到大型项目。随之而来的是代码库的膨胀和复杂性的增加。为了更好地组织代码，模块化是必不可少的。在ES6之前，JavaScript语言本身没有原生模块系统。但是，我们还是可以使用不同的脚本加载模式来模拟模块化。ES6就提供了原生的模块化解决方案。

模块化介绍

模块化是一种将一个复杂的代码库分解成简单、可维护的模块，以便于管理和使用的方法。每个模块都有自己的作用域，可以定义和共享变量、函数、类等数据结构。为了实现可重用的代码，模块需要导入和导出变量或对象，同时，没有显示导入和导出的变量或对象是私有的。

在ES6中，你可以通过export和import关键字对变量、函数、类等进行导入和导出，下面我们来看一些例子。

// module.js
export const A=1;
export function hello() {
  console.log('hello');
}

上面的例子中，export关键字将两个变量A和hello进行导出，这两个变量就可以在其他代码文件中使用。

// app.js
import { A, hello } from './module.js';

console.log(A); // 1
hello(); // hello

在另一个文件中，我们使用import关键字来导入module.js文件中的A和hello，使用时就可以直接引用了。

导出方式

在ES6中，有两种导出模块的方式：

1. 命名导出

命名导出是指通过给变量、函数、类等添加export关键字来导出，并在导入时使用对应名称。

// module.js
export const a=1;
export function hello(){
  console.log('hello')
}
export class Person {}

// app.js
import { a, hello, Person } from './module.js';

导入时需要使用{}括起来，里面放导出时的名称。

2. 默认导出

默认导出是指通过给变量、函数、类等添加export default关键字来导出，导出时不需要写名称，并在导入时可以使用任何一个名称。

// module.js
const a=1;
export default a;

// app.js
import myA from './module.js';

导入时直接使用一个名称myA即可，不需要使用{}。

导入方式

在ES6中，有以下两种导入模块的方式：

1. 命名导入

命名导入是指通过在import语句后面添加{}来导入已经命名了导出的对象。

import { a, hello } from './module.js';

如果在导入的时候使用了与导出时不同的名称，那么该变量或函数等将不存在。

2. 默认导入

默认导入是指通过在import语句后面添加默认导出对象名称来直接导入默认导出。

import myA from './module.js';

如果需要同时导入命名导出和默认导出，可以同时写在一条import语句中，如下：

import myA, { hello } from './module.js';

总结

ES6模块化让JavaScript代码更好管理和组织，避免代码层级嵌套以及变量污染等问题。通过export和import关键字，我们可以直接导出和导入模块内的变量、函数、类，以及默认对象等，实现了更加方便、灵活的代码重用。