在前端开发中，为提高代码维护性、降低重复代码量，常常使用模块化编程。而在 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 来实现模块的导出和导入。
-- -------------------- ---- -------
------------------ ----------- -------- --------- -------- -
----- --- - -------- --- -- -
------ - - --
-
------ -
---- ----
----- ------- --
-
--在 ES6 中，发展出了一种新的模块化规范：ES6 模块化规范，相比于 CommonJS 和 AMD，它可以实现静态编译，使得浏览器可以提前知道所需的依赖，使得加载速度更快，而且它在语法上比 CommonJS 和 AMD 更加简单。
ES6 中的 import 和 export
在 ES6 中，新增了两个关键字：import 和 export，用于实现模块的导入和导出。
export
export 用于将模块中的内容（变量、函数、对象、类等）导出，让其它模块可以使用。
-- -------------------- ---- ------- ------- ------ ----- ---- - ------- --- ------- ----- --- - -------- --- -- - ------ - - -- - ----- ----- - -------- --- -- - ------ - - -- - ------ - ---- ----- - ------ ------ ------- - ----- ------- --- ---- ---- ------ ----- -
import
import 用于将其它模块中导出的内容导入当前模块中，实现模块的依赖导入。
-- -------------------- ---- ------- ------- ------ - ---- - ---- ------------ ------- ------ - ---- ----- - ---- ------------ ---------- ------ - ---- -- ---------- - ---- ------------ ------ ------ ------- ---- ------------
总结
ES6 模块化规范针对前端开发提供的一种更加高效、灵活的模块化方式。通过 import 和 export 关键字，可以实现对模块化代码的清晰分割、更方便的代码管理。同时也因其语法简单，推广速度较快，成为当前前端领域使用最广泛的模块化规范之一。
示例代码
moduleA.js
-- -------------------- ---- ------- ------- ------ ----- ---- - ------- --- ------- ----- --- - -------- --- -- - ------ - - -- - ----- ----- - -------- --- -- - ------ - - -- - ------ - ---- ----- - ------ ------ ------- - ----- ------- --- ---- ---- ------ ----- -
moduleB.js
-- -------------------- ---- ------- ------ ------- ---- ------------ ------------------------- -- ------ - -------------------------- --- -- - ---------------------------- --- -- -- --------------------------------- -- ------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652cd1057d4982a6ebe603a1