说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

全面解析ECMAScript 6模块系统

HTML文档下载 WORD文档下载 PDF文档下载
模块化对任何大型应用来说十分必要,ES6弥补了JavaScript缺少对模块支持的遗憾。浏览器虽对ES6模块化支持还不够,但开发者可以借助编译器将ES6模块转换成ES5。本文将系统讲解ES6模块系统所提供的各种编码方法。

【编者按】在任何一个大型应用中模块化是很常见的。ES6的模块为JavaScript提供了这个特性,并且为这些模块提供了许多选择方法来导出和引入对象。Ravi Kiran 在《Modules in ECMAScript 6 (ES6)》一文中主要讨论了ES6模块系统。以下为该文章的简译内容:

无论使用何种编程语言开发大型应用,最关键的特性就是代码模块化。这个概念在不同的编程语言里有着不同的命名,在C里为头部文件,C++和C#里为命名空间,Java中为包,名称不一样但解决的是同一问题。正如《 ECMAScript 6 – New language improvements in JavaScript》系列文章中第一篇所提到的那样,最初JavaScript并不是用来编写大量代码的,比如创建大型框架、App应用等。就在我们因为JavaScript缺少对模块的支持而编写大量代码时,开源开发者提出了一些标准,如CommoneJs模块模型、异步模块定义(AMD)以及一些库,来实现模块化。在过去几年里,这些库获得了广泛关注,并成功应用到多个企业规模级的应用程序中。

ES6为JavaScript带来了模块特性。浏览器实现这一特性还需要一段时间,因为它们必须定义一个方法来动态下载文件。在浏览器支持该特性以前,我们可以使用编译器,如 Traceur、6to5、ES6 Module Loader以及其它可以让ES6模块转换成ES5的转码器。

JavaScript模块系统的现状

CommonJS模块系统

CommonJs是一个由开源开发者组成的团队,主要围绕JavaScript实现一些API及开展研发实践。该团队提出了一个JavaScript模块规范。每个文件都可当作一个模块,并且每个文件可以访问两个对象:require和export。require用来接收字符串(模块名),并返回该模块输出的对象。export对象用来导出该模块的方法和变量。require方法返回的就是export对象。模块同步加载。服务器端JavaScript引擎Node.js就是用的这个模块系统。

异步模块定义(AMD)

AMD是一个采用异步方式加载依赖模块的模块系统。如果模块在不同文件中,它们将采用XHR进行加载。某一模块将等其所依赖的模块一一加载后才会被执行。AMD模块必须是一个函数,并作为参数传入define函数中。函数的返回值将传输给所有依赖的模块,所获得返回值又将作为参数传给模块方法。Require.js库中实现了AMD。

TypeScript模块

TypeScript,作为JavaScript的超集,也提供了一个模块系统。当它被编译时,便开始使用JavaScript模块模式。TypeScript模块使用module关键字定义,任何被输出的对象必须使用export关键字定义。import关键字用来将其它模块加载入模块中,并捕捉该模块导出的对象。TypeScript模块是同步加载的。

ES6模块系统

ES6模块系统启发于上述现有模块系统,它具有以下特性:

  1. 使用export关键词导出对象。这个关键字可以无限次使用;
  2. 使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块;
  3. 支持模块的异步加载;
  4. 为加载模块提供编程支持。

接下来让我们通过具体编程方法看看每一个特性。

导出对象

在现有的模块系统中,每个JavaScript代码文件在ES6中都是一个模块。只有模块中的对象需要被外部调用时,模块才会输出对象,其余则都是模块的私有对象。该处理方式将细节进行封装,仅导出必要的功能。

从模块里导出对象,ES6为我们提供了不同方法,见下面的讨论。

内联导出

ES6模块里的对象可在创建它们的声明中导出。一个模块中可无数次使用export,所有的对象将被一起导出。请看下面的例子:

export class Employee{  constructor(id, name, dob){    this.id = id;    this.name=name;    this.dob= dob;  }  getAge(){    return (new Date()).getYear() - this.dob.getYear();  }}export function getEmployee(id, name, dob){  return new Employee(id, name, dob);}var emp = new Employee(1, "Rina", new Date(1987, 1, 22));

案例中的模块导出了两个对象: Employee类,getEmployee函数。因对象emp未被导出,所以其仍为模块私有。

导出一组对象

尽管内联导出很有效,但在大规模模块中,它就很难发挥作用了,因为我们可能无法追踪到模块导出来的对象。在这种情况下,更好的办法是,在模块的末尾单独进行导出声明,以导出该模块中的全部对象。

使用单独导出声明重写上一案例中的模块,结果如下:

class Employee{  constructor(id, name, dob){    this.id = id;    this.name=name;    this.dob= dob;  }  getAge(){    return (new Date()).getYear() - this.dob.getYear();  }}function getEmployee(id, name, dob){  return new Employee(id, name, dob);}var x = new Employee(1, "Rina", new Date(1987, 1, 22));export {Employee, getEmployee};

在导出时,重命名对象也是可以的。如下例所示,Employee在导出时名字改为了Associate,函数GetEmployee改名为getAssociate。

export {    Associate as Employee,    getAssociate as getEmployee  };

Default导出

使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出,也可以用于一组对象导出声明中。

下面案例展示了在组导出语句中使用default:

export default {    Employee,    getEmployee};

导入模块

现有模块可以使用关键字import导入到其它模块。一个模块可以被导入任意数量的模块中。下文展示了导入模块的不同方式。

无对象导入

如果模块包含一些逻辑要执行,且不会导出任何对象,此类对象也可以被导入到另一模块中。如下面案例所示:

import './module1.js';

 导入默认对象

采用Default导出方式导出对象,该对象在import声明中将直接被分配给某个引用,如下例中的“d”。

import d from './module1.js';

 导入命名的对象

正如以上讨论的,一个模块可以导出许多命名对象。如果另一模块想导入这些命名对象,需要在导入声明中一一列出这些对象。举个例子:

import {Employee, getEmployee} from './module1.js';

 当然也可在同一个声明中导入默认对象和命名对象。这种情况下,默认对象必须定义一个别名,如下例。

import {default as d, Employee} from './module1.js';

 导入所有对象

以上几种情况,只有import声明中列举的对象才会被导入并被使用,而其它对象则无法在导入模块中使用。当然,这就要求用户了解哪些对象可以导出并加以利用。如果模块导出大量对象,另一模块想引入所有导出的对象,就必须使用如下声明:

import * as allFromModule1 from './module1.js';

 allFromModule1这一别名将指向所有从module1导出的对象。在导入模块中,它们作为属性可被访问。

可编程式的按需导入

如果想基于某些条件或等某个事件发生后再加载需要的模块,可通过使用加载模块的可编程API(programmatic API)来实现。使用System.import方法,可按程序设定加载模块。这是一个异步的方法,并返回Promise。

该方法的语法示例如下:

System.import('./module1.js')    .then(function(module1){        //use module1    }, function(e){        //handle error    });

如果模块加载成功且将导出的模块成功传递给回调函数,Promise将会通过。如果模块名称有误或由于网络延迟等原因导致模块加载失败,Promise将会失败。

ES6模块使用现状

到目前为止,所有浏览器还不能自然支持ES6模块,所以在浏览器加载之前,我们需要使用转译器(transpiler)将代码转换成ES5。直到现在,我一直使用Traceur作为我的转译器,建议大家使用相同的工具将模块代码转化为浏览器可识别的代码。让我们看看编译ES6模块的几种不同的方法。

使用Traceur动态编译ES6模块

当浏览器加载脚本后,我们可以使用Traceur的客户端库动态编译ES6模块。使用该方法,运行模块无需运行任何命令。我们要做得就是,在页面上加载Traceur库,及添加代码脚本来运行WebPageTranscoder。

<script>    new traceur.WebPageTranscoder(document.location.href).run();</script>

现在,我们就可以在script标签内,将类型指定成模块,以此导入任何一个ES6文件。

<script type="module">    import './modules/import1.js';</script>

类型指定为模块的任何脚本标签将被ES6客户端库获取并处理。上面代码块中的导入语句将发送AJAX请求,捕获相应的JavaScript文件,并载入它。如果模块内部引用了另一个模块,单独的AJAX请求将发出,以加载与引用模块相对应的文件。

使用Traceur命令编译ES6模块

使用Traceur命令可以将ES6模块编译成AMD或者CommonJS模块。这个方法有两大优点。

  1. 模块完成编译,浏览器不必执行额外动作;
  2. 如果应用已经使用ES5及AMD(或CommonJs)模块系统构建了一半,程序的另一半也可以使用ES6,并被编译为这些模块系统中的任何一个,而不是立即把整个应用编译成ES6。

为了使用编译完成的AMD/CommonJs的模块,我们需要包含支持模块系统的库。我个人比较倾向AMD,所以我将在这里介绍一下它。CommonJS模块的步骤和这个差不多。

下面这句命令是用来让包含ES6模块的文件夹编译成AMD,并把它们存储在一个单独的文件夹:

traceur --dir modules es5Modules --modules=amd

使用CommonJs,你需要在上面命令中使用commonjs代替modules。

在这里,modules指的是包含ES6的文件夹,es5Modules指的是输出目录。如果查看es5Modules文件夹下的任何文件,你将看到该AMD定义块。require.js支持AMD,所以我们可以在HTML页面中,使用script引入require.js,并用data-main属性指明开始文件,就像下面这样:

<script src="bower_components/requirejs/require.js" data-main="es5Modules/import2.js"></script>

使用Traceur Grunt Task编译ES6模块

使用命令编译模块很累而且更容易出错。我们可以使用grunt-traceur自动化编译过程。此时,你需要安装NPM包。

npm intall grunt-traceur –save

Grunt任务所需数据与提供给命令的数据一样。下面是任务的一些配置:

traceur: {  options: {    modules: "amd"  },  custom: {    files: [{      expand: true,      cwd: 'modules',      src: ['*.js'],      dest: 'es5Modules'    }]  }}

现在你可以在控制台里使用下面的命令来运行上面的Grunt任务:

grunt traceur

正如你所看见的那样,它和我们使用命令所产生的效果是一样的。

结论

任何一个大型应用中,模块化十分必要。ES6模块为JavaScript提供了该特性,这些模块提供了众多选择来导出和引入对象。我很期待该特性被浏览器支持的那一天,到时我们无需加载任何第三方库即可创建、加载JavaScript模块。目前流行的客户端MV*框架Angular.js在其2.0版本(目前还在开发中)中就使用了ES6的模块化。

让我们开始使用模块系统,从而让我们的代码更具组织和可读性。(编译:肖元州,审校:陈秋歌)

原文链接:Modules in ECMAScript 6 (ES6)

执行一程序并等待其结束-Delphi资料 制作一个不在任务栏及任务列表中显示的幽灵程序-Delphi资料 抓获全屏-Delphi资料 子目录级的文件查询的实现-Delphi资料 Delphi中ChartFX构件使用详解 Delphi中动画设计 Delphi中对Jpeg格式文件的处理... Delphi中多媒体组件使用解析 Direct3D起步:教程以及资源指南-Delphi资料 播放背景音乐-Delphi资料 弹出、关闭CD-ROM驱动器-Delphi资料 检测声卡存在-Delphi资料 控制声音音量-Delphi资料 让pc speaker美妙动听-Delphi资料 闪动标题栏-Delphi资料 使用 DirectX 优化声音特性-Delphi资料 修改Delphi 3图形处理中的错误 用Delphi 3.0编制MP3音乐点歌台 用Delphi编制MP3音乐点歌台 用Delphi编制趣味动画鼠标 用Delphi开发屏幕保护预览程序 用DEPHI3.0实现动画ABOUT窗口-Delphi资料 在Delphi下用Direct Sound 实现混音器组件 在Delphi中使用DirectX BDE的替代品大全(按数据库类型分)-Delphi资料 BDE的替代品大全(按应用类型分)-Delphi资料 bde的组态文件-Delphi资料 DBGrid中的下拉列表和查找字段编程方法-Delphi资料 Delphi 3.0 中 连 接 数 据 库 的 三 种 方 式 Delphi 3.0中连接数据库的三种方式 Delphi 4中开发数据库控件的方法 主扳、CPU、硬盘、光驱,升级方案大比拚!!!!! 一个极菜的问题:怎么确定文档的大小? zf925(天下哪来那么多高手),你的回答我以看见了,但你的帖子贴的不全,你的原代码的例子没有, 设备管理器里面断口显示的是端口COM1和COM2,但是我的调只解调器里面的断口却是COM3和COM4,到底怎么回事呢?? :哪位大侠有多媒体方面编程的经验?请帮忙查看一下,谢谢。 DELPHI有史以来最大的难题! 二级联动菜单怎么搞啊??各位大虾救急啊!!! 请赐教 如何建立mts與com,dcom,com+通信,其中每種方式有何不同之處? 有个有关j2ee应用服务器的问题,很困惑!(急,一定给分!) 学习c和c++学要学习汇编吗????? 我先试一 下 关于得到文件的名字? 用5行代码就让系统重起的帖子怎么找不着了?谁告诉我?加分了!! 素女经 如何修改SQL数据库表中的数据 在对话框里输出文字?不要控件!!不要static 控件 一个关于打印的怪问题! 如何将数据库通过JDBC接收并将字段关键字连成一棵树(每一分支最多64节点) 救急!!!!!!!小妹我遇到一点问题! 今年就业形势“大好”! ******* 马上就给分,所以给的少了点,大家别介意 ******** 大家给点意见 请关注一个初学者的问题?我学sql但是不知未来的发展趋势!? 图形数据窗口(line 星)点太大,如何缩小 救急!!!!小妹我遇到一点问题! 用bcb制作动态网页 数据窗口 Graph 类型 line 样式 如何学c语言? Delphi中如何获的其它应用程序中的内容? 显示颜色变成只有16色和2色? DWORD 参数传递的问题。 那里有播放AVI文件的程序?谢谢! 参数传递问题!!大侠帮帮我 请帮我修改一下源代码(delphi)请帮忙改一下,让它打印了不往里(数据库)存。 BIOS设置,用电脑是不是可以当闹钟呢? 五笔输入法忽然不能用了 救就我,为什么Frame的客户区变小了?关于切分窗口 怎样查找某一个目录下一个表是否存在? 请问有用过李阳疯狂英语的朋友吗?请说说到底怎么样? 我想向各位大侠请教一个问题? 如何屏蔽TEXTBOX的回车响应? 关于《各位学习编程的目的是什么》的总结 m_pusrrcdset->m_pDatabase->ExecuteSQL("")为什么不行?老是ASSERT错误 请问我刚入bcb的大门,有什么好的参考书可以看看吗? 有没有人知道计算机等级考试四级怎么查分啊? 如何将几个数组的信息写成一个.txt文本文件 笔试题请教? 请教一个小问题! 好难呀好难呀!!!!! 怎么区分小麦和稻子 海子的代表诗篇?一首最著名的? 填上合适的词语:( )态度 ( )作用 鼓舞( )填上合适的词语:( )态度 ( )作用 鼓舞( )请选择恰当模拟声音的词语填空:毕毕剥剥 扑踏扑踏 嗡嗡 呼呼 笃笃 叮咚叮咚 咯吱咯吱 一块圆柱体木块竖着切成四块,表面积增48平方厘米;横着切成三块,表面积增加50.24平方厘米;削成一个最大圆锥体,体积减少了多少立方厘米? 空气中的灰尘有哪些危害? 已知集合A={α|2kπ≤α≤(2k+1)π,k∈Z},B={α|-4≤α≤4},则A∩B=非常疑惑的是 这里的α是表示弧度角度还是单纯的一个常数呢 好纠结 希望在解决题目的同时能帮我讲讲怎么判断一个数什么时候 小麦和大米有什么区别?为什么? 麦子已经成熟了,真是丰收在望.这句话哪儿错了 阅读“冬日雏菊自芬芳”第三自然段,请问小雏菊生长在一个怎样的环境中?作者为什么要特意写出这样的环境? 有一根圆柱体的木料,如果底面直径竖直平均分成四块,表面积增加144平方厘米.如果平均截成4个小圆柱体,表面积会增加169.56平方厘米,这根木料原来的体积是多少? 用几句花描写麦子成熟后田野的景色,要用上打比方的方法 "我是班长"最后一个自然段起到了什么作用? 将一个圆柱体沿上下底面的圆心切成4块,表面积增加48平方厘米,如果将圆样切成3个小圆柱体,表面积增加50.24求圆柱的表面积 有树有麦子有鸟怎么写句子 搭石最后一自然段起什么作用 经济 发展 .help help我对中国近代经济发展历史感兴趣.(1000字——) 描写棉花成熟时的样子的语句 写叶子的古诗词五首以上 假如大气中没有灰尘,强烈的阳光将使人无法睁开眼睛,这是灰尘的什么作用 灰尘的好处快些,我有急用 写叶子的诗句描写叶子的不论今、古、中、外诗歌散文均可最好附有赏析要附有赏析 用颜色来描写下列:(嫩绿)的秧苗 ()的稻谷 ()的大豆 ()的玉米 灰尘有什么作用? 求带“叶”字的诗句和写叶子的诗句有急用,今天必须回答上! 灰尘对人类或大自然有什么好处? 灰尘有哪些作用 在括号里填上合适的词语 ()的树叶风格 在灰尘比较多的环境下工作吃什么对身体有好处 灰尘有那些好处 以知集合A={α|2kπ 在粉尘严重的环境工作,应该吃点什么比较好呢? 灰尘对我们有什么好处说全点,不要抄小学语文课本上的那个 如何准确辨别雏菊、矢车菊和大波斯菊?各自的花语又是什么? 我的工作环境污染有点严重,吸入的粉尘多.请问吃什么食物可以排出肺内的灰尘呀. 麦子怎么组词. 第九题,为什么当A等于空集时,k+1大于2k? 设向量a=3i+2j, b=2i-j,求(1/3a-b)-(a-2/3b)+(2b-a)O(∩_∩)O谢谢解答3分之一a 关于麦子的好词好句 一.在下面的空白处填上适当的词语,使句子变成拟人句.1猫要是 ,能比谁都 .2秋天到了,高 求一段描写冬天小麦的句子求一段描写冬天小麦的段落 雏菊什么意思 雏菊的英文咋写 赞美秋天的诗 雏菊的含义..请问?具体一点 . “稻谷成熟了”拟人句怎么写? 灰尘有什么好处快! 我知道有两个意思,一个是 纯洁 ,另一个可就不那么纯洁了哦,是雏菊的意思.那么我想问雏菊是什么意思 雏菊的英文名称 有谁知道海子诗中的“麦地”,“马”,“麦子”,“大地”等各象征什么?他诗里有很多让我困惑的东东,谢谢帮忙! 雏菊 含义他发短信的暗号 韩国电影的英文介绍我们上课要用,越详细越好.(不仅仅是剧情)最好是有中文对照的, 求海子诗 麦子熟了 读了几变就是不懂 ,喜欢海子的, 雏菊的两层含义!雏菊第一层含义是:离别.第二层含义是什么? 雏菊的英语怎么拼? 求海子经典诗句最好多点 仔细品味一下词语所表达的意思 (1)挺拔俊秀的椰子树,不时在海风中摇曳着碧玉般的树冠.(摇曳着)(2)海滩上玉屑银末般的细沙,金灿灿亮闪闪的,软软地暖暖地搔着人们的脚板,谁都想 雏菊英语怎么说 已知向量i,j是互相垂直的单位向量,a=3i-4j,a+b=4i-3j(1)求向量a,b的夹角的余弦值;(2)对非零向量p,q,如果存在不为零的常熟α,β,使αp+βq=0,那么称向量p,q是线性无关的,向量a,b是线性相关还是 海子的最经典的诗句 填上合适的词语( )的大厦,( )的香气,( )的椰树,( )的国槐,( )的油松( )的气质,( )的树冠
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn