ES2015 的模块规范：import 和 export 使用详解

在前端开发中，使用模块化已经成了一种必需，而ES2015中提供的模块规范便大大简化了前端模块开发的难度。ES2015的模块规范主要包含两个关键字：import和export，本文将对其进行详细解释。

import

在ES2015中，使用import关键字引入模块，语法如下：

import ModuleName from 'path/to/module';

其中，ModuleName表示模块的默认暴露，只能有一个；path/to/module则是模块的路径。如果模块的默认暴露是一个函数，则可以这样写：

import { functionName } from 'path/to/module';

如果模块的默认暴露是一个对象，则可以这样写：

import { propertyName } from 'path/to/module';

需要注意的是，如果要引入的模块没有设置默认暴露，则需要用"*"表示要全部引入，如下：

import * as AllModuleName from 'path/to/module';

以上就是使用import引入模块的基本语法，下面通过一个例子来加深理解。

// module.js
export const name = "John";
export function hello() {
  return "Hello " + name;
}

// app.js
import { hello } from './module';
console.log(hello()); // Hello John

export

在ES2015中，默认情况下，每一个模块都是一个独立的作用域，需要通过export暴露模块中的变量和函数，语法如下：

export const variableName = "variableValue";
export function functionName() {};
export default variableName;

其中，export default表示默认暴露，可以在import时直接用ModuleName引入。具体使用如下：

// module.js
const name = "John";
export default name;

// app.js
import Name from './module';
console.log(Name); // John

需要注意的是，export只有在文件的最上方才能被使用，否则会报错。因此建议将所有的export语句都放在文件的最上方。

总结

ES2015的模块规范的出现，大大简化了前端开发中的模块化编程，同时提高了代码的可读性和可维护性。在使用import和export时，需要注意默认暴露的处理和export语句的位置，具体应用也需要根据实际需求来灵活应用。

希望本文的介绍对您的学习和实践有所帮助！

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