JavaScript ES6 模块化教程：export与import用法详解

JavaScript模块化开发背景

在理想开发场景下，开发者应专注于核心业务逻辑的实现，其余部分可复用他人已编写的模块。然而，在ES6标准出现之前，JavaScript缺乏原生的模块体系（module），导致大型程序难以拆分为相互依赖的小文件并通过简单方式组装。若需在前端进行模块化开发，必须借助第三方框架，例如requireJS与seaJS。

JavaScript中的导出与导入实现模块化管理

requireJS是AMD规范的起源，seaJS则是CMD规范的起源。由于两者功能高度重合，seaJS后续停止维护并逐渐淡出视野。此后，requireJS一度占据主导，直到ES6标准出现，ES Module迅速成为前端与服务器端通用的模块解决方案，足以取代AMD规范及NodeJS支持的CommonJS规范。

ES6模块化规范概述

ES6首次引入了模块化开发规范ES Module，使JavaScript原生支持模块化开发，通过export和import关键字进行模块化管理。

export导出方式详解

1. export：用于对外输出本模块的内容

方法1：在声明变量或函数时直接导出


export var str = '1';

export function func1() {
 return 'hello word'
} 

export const func2 = () => {
 // 箭头函数导出
 return 'hello word'
}

方法2：在文件末尾统一导出所有成员


var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str,
 func1,
 func2,
}

方法3：导出时指定别名


var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}

方法4：对已导入的方法进行再导出

这种方法常用于统一文件的导出管理


// 这是一个utils.js 导出一个变量两个方法
var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}
// 这是引用utils.js的文件-config.js
export {str,func1,func2} from ‘./config.js'

方法5：默认导出（default）

每个JS文件只能有一个default导出，因此其后面不能跟随变量声明语句。


export default function() {}

方法6：导出类（class）


// 这是一个utils.js 导出一个变量两个方法
export class utils {

 format(){
  // 类方法1
 };
 cheackData(){
  // 类方法2
 }
}
// 调用utils文件中
import {utils} from ‘./utils.js'

const utils = new utils();
utils.format();
utils.cheackData();

import导入方式详解

2. import：用于在模块中加载包含export接口的其他模块

方法1：直接导入指定成员


import {str,func1,func2} from ‘./utils.js'

方法2：导入时指定别名

这种情况通常用于处理两个或多个模块中存在相同导入内容的情况。


import {str as str1,func1 as f1,func2 as f2} from ‘./utils.js'

方法3：一次性导入文件中的所有成员


import * as utils from ‘./utils.js'

utils.str
utils.func1
utils.func2

方法4：导入使用default方式导出的模块


import utils from ‘./utils.js'

至此，关于JavaScript中通过导出与导入实现模块化管理的教程介绍完毕。如需了解更多相关JavaScript导出与导入模块化管理内容，请搜索本站以往文章或继续浏览后续相关文章，感谢支持。

JavaScript ES6 模块化管理：export与import完整指南

JavaScript模块化开发背景

ES6模块化规范概述

export导出方式详解

import导入方式详解

实用工具推荐