[2017.11.11特辑]以一个光棍节表白案例浅谈ECMAScript6模块化的使用方法

双十一，购物节与光棍节，在这个特殊的日子里研究了一下模块化开发的我，突然想结合这个日子，以一个表白的例子浅谈es6模块化的用法。

在之前的 javascript 中一直是没有模块系统的，随着JavaScript的发展，涌现出了各种规范, 其中比较知名的是CommonJS和AMD。前者用于服务器，后者用于浏览器。

时代发展的速度总是令人有点惊讶，是的， ES6的出现给我们带来了它的模块化机制，一种完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

结合光棍节举例：

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

①表白例子-主要人物模块：

模块介绍:leader.js，模块包含一个leader对象，leader里有媒人(matchmaker)、女方(girl)、男方(boy)三个对象，

每个对象都包含一个say方法。对象以及成员方法都创建好之后，使用es6的module.exports定义对外接口为leader。

// leader.jsvar leader = {    agents : {        say : function () {            return "Please say somethings!";        }    },    girl : {        say : function () {            return "Yes, i want to!!";        }    },    boy : {        say : function () {            return "Would you want to be my girlfriend?";        }    }}module.exports = leader;

②表白例子-观众模块：

模块介绍：audience.js，这个模块相对更简单，只有一个用于起哄的say方法。

// audience.jslet audience = {    say : function () {        return "Promise him!!!Promise him!!!";    }}module.exports = audience;

③表白例子-执行模块：

模块介绍：doing.js，之前定义了参与表白的主要对象以及观众以及需要做的事，但是没有去执行，doing.js模块的目的就是让表白事件执行起来，所以要先在头部使用es6的import 导入其他模块提供的功能，随后定义了init()初始化方法，最后调用初始化方法。

// doing.jsimport leader from 'leader';import audience from 'audience'let doing = {    init : function () {        leader.agents.say();        leader.boy.say();        audience.say();        leader.girl.say();    }}doing.init();

此模块运行结果为：

Please say somethings!Would you want to be my girlfriend?Promise him!!!Promise him!!!Yes, i want to!!

大概意思：

介绍对象的人对男孩说：说话呀！

男孩：做我女朋友好吗？

观众：答应他！答应他！

女孩：我愿意！

哈哈，结果总是这么美好。

注：以上代码为编写过程中直接输入，并未真实运行，假如有bug请指出，谢谢。
以上为es6模块化的基本用法，具体应用于实际开发时还有很多要注意的事项，比如为了兼容浏览器需要编译打包，此篇文章暂时不深入讨论。