在前端开发中，为提高代码维护性、降低重复代码量，常常使用模块化编程。而在 ES6 中，新增的 import/export 关键字，为前端开发带来了更高效、更简洁的模块化开发方式。
模块化
传统的前端开发中，为了减少代码的冗余和提高代码的可维护性，通常会使用函数来封装一段功能代码。但随着项目规模的增长，多个 JS 文件之间的依赖关系越来越错综复杂，维护难度也随之增加。因此，出现了模块化编程。
模块化编程是指将一段功能代码打包成一个模块，通过 require 或 import 语句实现模块间的依赖导入，将代码逻辑划分为一个个独立的模块，提高代码的可读性、可维护性。
在前端模块化中，目前常用的有两种方式：CommonJS 和 AMD。
- CommonJS 是 Node.js 中采用的模块化规范，采用同步方式加载模块，通过 module.exports 和 require 来实现模块的导出和导入。
module.exports = {
sum: function (a, b) {
return a + b;
},
name: "module a"
}
const moduleA = require('./moduleA')- AMD 是 Require.js 中采用的模块化规范，采用异步方式加载模块，通过 define 和 require 来实现模块的导出和导入。
// javascriptcn.com 代码示例
define(['moduleA', 'moduleB'], function (moduleA, moduleB) {
const sum = function (a, b) {
return a + b;
}
return {
sum: sum,
name: "module c"
}
})在 ES6 中，发展出了一种新的模块化规范：ES6 模块化规范，相比于 CommonJS 和 AMD，它可以实现静态编译，使得浏览器可以提前知道所需的依赖，使得加载速度更快，而且它在语法上比 CommonJS 和 AMD 更加简单。
ES6 中的 import 和 export
在 ES6 中，新增了两个关键字：import 和 export，用于实现模块的导入和导出。
export
export 用于将模块中的内容（变量、函数、对象、类等）导出，让其它模块可以使用。
// javascriptcn.com 代码示例
//导出单一值
export const name = "module a";
//导出多个值
const sum = function (a, b) {
return a + b;
}
const minus = function (a, b) {
return a - b;
}
export {
sum,
minus
}
//默认导出
export default {
name: "module a",
sum: sum,
minus: minus
}import
import 用于将其它模块中导出的内容导入当前模块中，实现模块的依赖导入。
// javascriptcn.com 代码示例
//导入单一值
import { name } from './moduleA';
//导入多个值
import { sum, minus } from './moduleA';
//给导入的值起别名
import { name as moduleName } from './moduleA';
//默认导入
import moduleA from './moduleA';总结
ES6 模块化规范针对前端开发提供的一种更加高效、灵活的模块化方式。通过 import 和 export 关键字，可以实现对模块化代码的清晰分割、更方便的代码管理。同时也因其语法简单，推广速度较快，成为当前前端领域使用最广泛的模块化规范之一。
示例代码
moduleA.js
// javascriptcn.com 代码示例
//导出单一值
export const name = "module a";
//导出多个值
const sum = function (a, b) {
return a + b;
}
const minus = function (a, b) {
return a - b;
}
export {
sum,
minus
}
//默认导出
export default {
name: "module a",
sum: sum,
minus: minus
}moduleB.js
// javascriptcn.com 代码示例 import moduleA from './moduleA'; console.log(moduleA.name) // module a console.log(moduleA.sum(2, 3)) // 5 console.log(moduleA.minus(2, 3)) // -1 console.log(moduleA.default.name) // module a
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cd1057d4982a6ebe603a1