文档章节

新的 JavaScript 模块系统

eonezhang
 eonezhang
发布于 2015/10/27 17:17
字数 1147
阅读 1480
收藏 7

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:范洪春
链接:http://zhuanlan.zhihu.com/FrontendMagazine/19850058
来源:知乎

下一代 JavaScript 为我们带来了模块系统,它很大程度上受到了 Node.js 模块的启发。下面解释下它如何工作的。

创建模块

我们要开发一个简单的  asap 模块,它允许你安排一些马上执行的任务,不过是通过异步的方式。在 Node.js 中,你可以使用 process.nextTick,但是在不同的浏览器中就有很多不同的实现方案。我们将创建一个可以工作在任何环境下的模块。


开始,我们为这个模块创建一个文件。命名成 asap.js。这个模块只提供了一个简单的函数,在 JavaScript 中称作默认的 export。可以使用 export default 从模块中 export 一个默认值。


var asap;var isNode = typeof process !== "undefined" &&
    {}.toString.call(process) === "[object process]";if (isNode) { 
    asap = process.nextTick;} else if (typeof setImmediate !== "undefined") { 
    asap = setImmediate;} else { 
    asap = setTimeout;}export default asap;

导入模块

我们可以使用 import 语法导入 asap 到另外一个模块:


import asap from "asap";asap(function() {
    console.log("hello async world!");});

这种语法获得了从 asap export 的默认函数,并把它存储在一个名为asap的变量中,然后我们就可以去调用这个函数。


具名 export

一些模块需要输出多个export,这样他们的使用者可以通过名字来单独引用。

比如 jQuery 有一个单独的主要的export(jQuery函数),和一些其他的具名的export(ajax,getJSON,animate等)。在 Node.js 中,mkdirp 模块有一个单独默认export,可以递归地创建目录,还有一个叫做 sync 的具名export,做的事情一样,只不过是异步的方式。


在我们的示例中,除了默认的export之外,asap 模块可能会提供一个 later 函数,在其他网络请求或者UI工作完成后执行某个函数。


我们的模块看起来和之前的类似,除了增加了一个的新的export申明。


var asap;var isNode = typeof process !== "undefined" &&
    {}.toString.call(process) === "[object process]";if (isNode) {
    asap = process.nextTick;} else if (typeof setImmediate !== "undefined") {
    asap = setImmediate;} else {
    asap = setTimeout;}export default asap;export var later = isNode ? process.setImmediate : asap;

具名import

既然我们export了 later,就可以把它导入到另一个模块中。


import { later } from "asap";later(function() { 
    console.log("Running after other network events");});

更有意思的是,你可以使用同一个import,同时导入默认的export和数个具名的export:

import asap, { later } from "asap";

有它就够了!

快捷方式

给具名的导入重命名

有些时候当导入一个具名的export时,想需要给它起一个局部的名字。


import { unlink as rm } from "fs";rm(filename, function(err) {
    /* check errors */});

导入成命名空间

可以把一个模块的所有具名export导入到一个单独的局部命名空间,这可能更加的方便。


import * as fs from "fs";fs.unlink(filename, function(err) {
    /* check errors */});

简短的具名export

你可以在JavaScript中任意声明(像var或者function)一个具名的export,添加export前缀就行。


// exports this function as "requestAnimationFrame" export function requestAnimationFrame() {
    // cross-browser requestAnimationFrame }// exports document.location as "location" export var location = document.location;

这对一些新的声明同样有效,比如 class 和 let。


// exports this class as "File" export class File() {
    /* implementation */}// exports "0.6.3" as "VERSION" export let VERSION = "0.6.3";

这些命名在模块的局部作用域中同样也可以访问,所以你可以在其他的函数里使用它们。


具名export分组

你可以导出任意个局部变量。

export { getJSON, postJSON, animate };function getJSON() {
    // implementation }function postJSON() {
    // implementation }function animate() {
    // implementation }

你可以把已经分组的export声明放在文件中的任意位置,同样如果愿意,你可以在你的模块的顶部把import和export。


特性

JavaScript 模块有很多不错的特性,可以平滑且无缝在重要的场景中使用,包括重构和工具。

  • JavaScript模块支持同时在默认export和具名export之间的晚绑定轮询。都可以工作。

  • JavaScript模块区分了存在于默认export(和它们的原型链)和其它具名export,避免冲突。

  • JavaScript模块使得仅仅通过语法就可以准确地判定你导入了哪些变得更加容易。增加了错误信息,但也使得创建类似browserify和JSHint这类工具更加的容易,并且在没有警告的情况下稳定的工作。

日志

这个库的将会更加的详细,但是这些也是我们全心全意要做的。


本文转载自:http://zhuanlan.zhihu.com/FrontendMagazine/19850058

eonezhang
粉丝 5
博文 96
码字总数 45228
作品 0
架构师
私信 提问
NativeScript —— 初级入门(跨平台的手机APP应用)《一》

NativeScript 入门 1. NativeScript简介 NativeScript是一个相当新的开源开发系统,几乎完全用JavaScript创建跨平台移动应用程序,带有一些可选的CSS和XML来简化显示布局的开发。您可以在htt...

丶大皮球
2018/09/25
0
0
NODE高级编程阅读笔记系列(一)

本篇涉及以下主题 node简单介绍 事件驱动编程 模块化 缓冲区处理 Node简单介绍 直接用官方的那句话: Node.js 是一种建立在Google Chrome's V8 引擎上的non-blocking(非阻塞),event-driven(...

可爱的圣诞老人
2018/05/23
0
0
《JavaScript框架设计》赠书活动

今日将赠出《JavaScript框架设计 》5本。 参与方法:第一步:扫描下方二维码 第二步扫描后关注我们的微信公众账号 3.回复书名 完成这三步即可参与。活动截止至明天晚上10:00 内容简介: 《J...

生气的散人
2014/08/19
333
1
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
2018/06/21
0
0
致我们学前端的小时光—corejs与env、runtime的不解之缘

前言 最近在看致我们暖暖的小时光,有点不可自拔。 文章具有翻译向,具体的可以看文末的链接。 随着ES6的正式发布,以及ES2016、ES2017...每年的稳定更新,还有新提案的不断出现,使得JavaS...

supot
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
4
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部