雙十一，購物節與光棍節，在這個特殊的日子里研究了一下模塊化開發的我，突然想結合這個日子，以一個表白的例子淺談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.js var 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.js let audience = {say : function () {return "Promise him!!!Promise him!!!";} } module.exports = audience;

③表白例子-執行模塊：

模塊介紹：doing.js，之前定義了參與表白的主要對象以及觀眾以及需要做的事，但是沒有去執行，doing.js模塊的目的就是讓表白事件執行起來，所以要先在頭部使用es6的import?導入其他模塊提供的功能，隨后定義了init()初始化方法，最后調用初始化方法。

// doing.js import 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模塊化的基本用法，具體應用于實際開發時還有很多要注意的事項，比如為了兼容瀏覽器需要編譯打包，此篇文章暫時不深入討論。

總結

以上是生活随笔為你收集整理的[2017.11.11特辑]以一个光棍节表白案例浅谈ECMAScript6模块化的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。