ES6 的模块化语法入门教程-JavaScript中文网-JavaScript教程资源分享门户

什么是模块化？

在 JavaScript 脚本的早期开发阶段，大多数代码都是使用全局变量及函数来进行开发的，这种方式对于小型项目来说是可行的，但对于中大型项目来说却面临着很多问题，如命名冲突、代码的可维护性差、代码的可复用性差等等。

为了解决这些问题，开发人员开始使用模块化，模块化是一种将代码功能聚合在一个不会产生命名冲突的单元中的方法，使得代码的可复用性、可维护性得到提高。目前最常使用的模块化方案是 CommonJS 和 AMD。

随着 ES6 规范的普及，JavaScript 支持了原生的模块化语法，也就是我们常说的 ES6 模块化语法。

ES6 模块化的优点

ES6 模块化语法引入了一些新的概念，使得我们在开发中能够更加方便的进行代码的组织及管理，拥有更好的可维护性和可复用性。

命名空间的管理：ES6 模块化中一个模块对应着一个文件，每个模块都有一个独立的作用域。这样可以避免命名冲突问题。
更好的依赖管理：在 ES6 中，模块间的依赖关系被明确的表示出来，开发人员可以更加清晰的了解各个模块之间的依赖关系，这也为后续的开发、维护提供了更可靠的基础。
提高代码的复用性：ES6 模块语法为开发人员提供了更好地代码复用方案。通过 export 和 import 关键字，每个模块能够提供某些特定功能，从而使得其他模块可以在需要时引入。

如何使用 ES6 模块化语法？

ES6 模块语法中主要涉及到以下两个关键字：export 和 import。

export 关键字

export 用于将某个变量、函数、类等“导出”至模块外部。一个模块中可以同时有多个 export，但是在每个模块文件中，至少需要一个。下面是一个例子：

// module.js
export const name = 'Jack';
export const location = 'New York';

上述代码中，我们将 name 和 location 常量导出至模块外部。

import 关键字

import 用于导入模块中被导出的内容，使用方式如下：

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

console.log(name); // Jack
console.log(location); // New York

上述代码中，我们使用 import 导入了 module.js 模块中导出的 name 和 location，并在 main.js 文件中进行输出。

如果想要导入整个模块，则可以使用以下方式：

import * as module from './module.js';

上述代码中，我们将模块 ./module.js 中所有导出的成员都导入并命名为 module。

export default 关键字

在一个模块中只能有一个默认导出，使用 export default 可将该模块的默认值导出。

// person.js
const person = {
  name: 'Jack',
  location: 'New York',
  age: 27
};
export default person;

在上述代码中，我们将一个对象 person 导出至模块外部。

// main.js
import person from './person.js';
console.log(person.name); // Jack

这里的 import person from './person.js' 中没有使用大括号，原因是因为 export default 导出的是 module.js 中的一个默认值，可以直接使用一个变量名进行接收。

额外内容

导入导出内容别名

如果你导出了一个变量名，你可以在导入时使用一个不同的名称进行标识，并将其命名为适合当前代码库的命名。

// module.js
export const firstName = 'Jordyn';
export const lastName = 'Leigh';

// anotherModule.js
export { firstName as fName, lastName as lName } from './module.js';

// main.js
import { fName, lName } from './anotherModule.js';

导入在运行之前编译

如果你在运行时才需要导入一个模块，例如某些库或框架中的可选功能，可以使用 import() 来动态导入模块。

const someCondition = true;
if (someCondition) {
  import('./some-module.js')
    .then((module) => {
      // 这里可以使用按需加载后的模块，module.default 便是模块的默认导出的值
    });
}

装饰器

装饰器不是 ES6 模块化语法的一部分，不过它是一个很不错的标准。装饰器可以在对象和类上面添加元数据，可以用来增强这些对象。

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

总结

本文简要介绍了 ES6 模块化语法的概念、使用和优点，提醒您需要根据实际的应用场景合理选择模块化方案。

ES6 模块化语法是前后端通用的，如果你需要进行文件模块的管理，建议使用该语法。在依赖方面，我们建议使用 npm 等管理工具。

希望本文可以帮助你更好地了解 ES6 模块化语法，并在实际编程过程中能够运用得更加熟练。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b0d378add4f0e0ffa2d17c