双十一,购物节与光棍节,在这个特殊的日子里研究了一下模块化开发的我,突然想结合这个日子,以一个表白的例子浅谈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模块化的使用方法相关推荐

  1. 【TUP第11期】腾讯黄朝兴:浅谈客户端架构

    [CSDN报道]7月9日下午,CSDN TUP第十一期"架构师沙龙--互联网研发之道"在中国科学院计算技术研究所一层报告厅举行,本次活动邀请了业内研发实力很强的腾讯和豆瓣的嘉宾来分 ...

  2. c语言如何求一个数学表达式的值,浅谈C语言中表达式的求值

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 C语言研究性学习的路线 现行的多数C语言教材有太多的误区,不仅不能给读者提供有效的学习线索,还常常"误导"读者,于是,"死记 ...

  3. 从“光棍节”到“双节棍”:今年的天猫双11大不一样

    十二是一个非常特殊的数字,代表着一个轮回.从十二生肖,到十二星座,莫不如是. 2020年11月11日,天猫双11也迎来了自己的第十二个年头. 从"光棍节"变成"双节棍&q ...

  4. python光棍节快乐_光棍节快乐的祝福语12条

    光棍节快乐的祝福语12条 说你大光棍吧,你没那么老:说你中光棍吧,又没那么巧:你就一个超级光棍,你天天傻笑没烦恼!祝光棍节快乐!下面是小编为大家收集的光棍节快乐的祝福语12条,希望大家喜欢. 1.饭局 ...

  5. 祝福自己光棍节快乐,也祝福和我一样的光棍和即将成为光棍的人

    2006.11.11,我又可以过光棍节了,不知道是开心还是难过,管他妈的呢,网友说的好,人生就是互相遗弃的过程,自己祝福自己光棍节快乐,也祝福和我一样的光棍们节日快乐  哈哈 又可以痛快的打游戏了哈哈

  6. 光棍节·单身魔鬼词典

    1月1日--小光棍节 1月11日.11月1日--中光棍节 11月11日--大光棍节 光光--男光棍 明明--女光棍 脱光--男光棍名草有主 失明--女光棍名花有主 双双--成了对的 光复--重新回归光 ...

  7. 【游戏】光棍节程序员闯关秀过关攻略

    光棍节,与我无关,结果昨夜下了场雨,导致路面结冰,大侠的出行计划泡汤了,只好在家淘宝抢东西.结果网友发来一个光棍节程序员闯关秀游戏 ,让大侠一发不可收拾...游戏地址http://segmentfau ...

  8. 光棍节程序员闯关秀过关攻略

    光棍节,与我无关,结果昨夜下了场雨,导致路面结冰,大侠的出行计划泡汤了,只好在家淘宝抢东西.结果网友发来一个光棍节程序员闯关秀游戏 ,让大侠一发不可收拾...游戏地址http://segmentfau ...

  9. 11月第3周新闻回顾:难忘的光棍节 辛劳的IT人

    1.难忘的"神棍节",辛勤的IT人 2012年11月11号,又一轮沙漠风暴在"光棍节"的时候席卷互联网各大卖场,至11月12日00:00为止,阿里巴巴集团双十一 ...

最新文章

  1. 手动部署OpenStack环境(六:出现的问题与解决方案总结)
  2. 各种AJAX方法的使用比较
  3. CTF web总结--利用mysql日志getshell
  4. 进去springstrap显示无响应_2020年,28寸IPS面板4K显示器合集,推荐几款代表性的...
  5. java射击游戏_Java Swing打猎射击游戏源码
  6. 防止缓存爆炸的快速提示
  7. 数据分析、关键词和地下产业
  8. linux 扩展挂载盘大小_Linux 挂载新添加磁盘LVM配置
  9. Kubernetes 小白学习笔记(20)--kubernetes的运维-管理Node
  10. 王阳明心学:无善无恶心之体,有善有恶意之动,知善知恶是良知,为善去恶是格物。...
  11. 【案例】重庆市金融工作办公室:大数据监测预警非法集资平台
  12. 汉字字形码是计算机用来实现对汉字的输出,汉字编码字形码
  13. 办公必备计算机软件,推荐8个职场办公的必备软件,每一个都能让你有所收获!...
  14. Docker API的
  15. Segment Routing
  16. 有关H5的第一章介绍
  17. 【六祎 - HTML模板】提交按钮模板-带特效
  18. JAVA 日期推算---算法
  19. 读稻盛先生的《活法和干法》的十点灵感
  20. 大学教授郑强的经典语录

热门文章

  1. 【Spring 5】响应式Web框架前瞻
  2. 洛谷P4239 【模板】多项式求逆(加强版)(多项式求逆)
  3. mac下natapp使用
  4. workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的)...
  5. “报复黑客”:可行的战略还是重大的风险?
  6. ZeroC Ice启用SSL通讯的配置
  7. 附5、MDT 2013 Update 1批量部署-更新版无法修改共享文件夹参数的解决办法
  8. 8行代码教你搞定导航控制器全屏滑动返回效果 ————转载
  9. 34/100. Top K Frequent Elements
  10. 通信网络安全分层及关键技术解决