本文深入解析ES6模块化开发机制，阐述其与旧有AMD、CMD规范的区别。重点讲解import和export关键字的使用，包括如何导出模块接口、批量导出以及处理变量名冲突的重命名语法，帮助开发者构建清晰的JavaScript代码结构。
ES6模块化概述
本文通过具体实例介绍ES6中的模块化开发模式，供读者参考学习。
在多人协作开发JavaScript项目时，常面临命名冲突等挑战，业界曾尝试通过模拟块级作用域、命名空间及模块化开发等手段来解决这些问题。
早期的模块化方案主要依赖第三方库进行模拟，其中具有代表性的规范包括AMD和CMD。
这两种规范分别由requirejs和seajs这两个库实现。
目前，ES6标准已提出统一的模块化规范。
ES6模块本质上是包含JavaScript代码的文件。尽管ES6未引入专门的module关键字，模块仍表现为普通脚本文件，但具备两个显著特性：
1. ES6模块默认启用严格模式。 2. 模块内部支持使用import和export语句。
模块导入与导出语法
导入与导出机制
利用import和export关键字，可以实现函数或对象在模块间的导入与导出。首先介绍export：模块内声明的标识符默认具有私有属性，若需对外公开，必须显式使用export关键字。最基础的做法是直接在前缀添加export：
// kittydar.js
export function detectCats(canvas, options) {
var kittydar = new Kittydar(options);
return kittydar.detectCats(canvas);
}
export class Kittydar {
... several methods doing image processing ...
}
// This helper function isn't exported.
function resizeCanvas() {
...
}
...
此举消除了跨文件或模块的全局变量依赖，export声明的内容即构成该模块的公共API。在其他文件中，可通过导入该模块来调用如detectCat等方法：
// demo.js - Kittydar demo program
import {detectCats} from "kittydar.js";
function go() {
var canvas = document.getElementById("catpix");
var cats = detectCats(canvas);
drawRectangles(canvas, cats);
}
若需从多个模块导入接口，可采用如下写法：
import {detectCats, Kittydar} from "kittydar.js";
此外，还可以使用单行代码将当前模块所有需公开的方法统一导出：
export {detectCats, Kittydar};
这种方式避免了逐个添加export关键字的繁琐操作。
解决命名冲突
命名冲突处理
前文介绍了模块的导入导出机制，当导入的变量名与模块内部变量发生冲突时，ES6允许对导入内容进行重命名：
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";
通过上述语法，将来自eggs模块的flip重命名为flipOmelet，将来自real-estate模块的flip重命名为flipHouse，从而有效避免命名冲突。
同样地，在导出变量时也可进行重命名操作：
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
希望本文所述内容能对ECMAScript程序设计有所帮助。