介绍 ES Modules(模块) – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第34节,你可以查看该手册的完整目录。

ES Modules 是用于处理模块的 ECMAScript 标准。 虽然 Node.js 长期使用 CommonJS 标准,但浏览器从未有过模块系统。 每个主要决策(如模块系统)必须首先由 ECMAScript 标准化,然后由浏览器实施。

这个标准化过程在 ES6 中完成,浏览器开始实施这个标准,试图以相同的工作方式保持一致性,,现在 Chrome,Safari,Edge 和 Firefox(从 60 版本开始)支持ES 模块。

模块非常酷,因为它们允许你封装各种功能,并将这些功能作为库公开给其他 JavaScript 文件。

ES 模块语法

导入一个模块可以用 import

import package from 'module-name'

然而 CommonJS 使用:

const package = require('module-name')

一个模块是一个 JavaScript 文件,通过 export 导出一个或多个值(对象,函数或变量)。举个例子,这个模块模块导出一个返回字符串大写的函数:

uppercase.js 文件:

export default str => str.toUpperCase()

在此示例中,模块定义了单个默认导出(default export),因此它可以是匿名函数。 否则,它需要一个名称来区分其它的导出。

现在,任何其他 JavaScript 模块都可以通过 import 来导入 uppercase.js 提供的功能。

HTML页面可以使用带有特殊 type="module" 属性的 <script> 标记添加模块:

<script type="module" src="index.js"></script>

注意:此模块导入的行为类似于 defer 脚本加载。请参阅 详解 script 标签(async,defer,integrity,crossorigin 和 onerror 属性)

特别要注意:任何使用 type="module" 加载的脚本都是以 严格模式(strict mode) 加载的。

在这个例子中,uppercase.js 模块定义了一个默认导出,所以当我们导入这个模块时,可以为它指定一个你自己喜欢的名称:

import toUpperCase from './uppercase.js'

然后我们可以使用它:

toUpperCase('test') //'TEST'

你还可以使用绝对路径来导入模块,以便引用其它域名中定义的模块:

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

这种导入语法也是有效的:

import { foo } from '/uppercase.js'
import { foo } from '../uppercase.js'

但是下面的导入语法是无效的:

import { foo } from 'uppercase.js'
import { foo } from 'utils/uppercase.js'

路径必须是绝对路径,或在名字前加上 ./ 或者 /

其它 导入(import)/导出(export) 方法

我们在上面看到了这个例子:

export default str => str.toUpperCase()

上面的代码会创建一个默认导出(export)。但是下面的代码我们可以看到,在文件中,你可以使用以下语法导出多个内容:

const a = 1
const b = 2
const c = 3

export { a, b, c }

另一个模块可以使用以下代码导入所有上面这些导出:

import * from 'module'

你可以使用解构分配仅导入其中一些导出:

import { a } from 'module'
import { a, b } from 'module'

为方便起见,你可以使用 as 重命名任何导入(import):

import { a, b as two } from 'module'

你可以按名称 导入(import) 默认导出(default export) 和任何 非默认导出(non-default export),例如常见的 React 导入:

import React, { Component } from 'react'

你可以在 此处 查看 ES 模块的示例。

跨域资源共享 CORS

通过 CORS 获取模块,意味着如果你从其它域名引入脚本,他们必须有一个有效的 CORS 头允许跨站点加载(像 Access-Control-Allow-Origin: *)。

不支持模块的浏览器怎么办?

结合使用 type=modulenomodule

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

总结

ES模块是现代浏览器中引入的最大功能之一。 他们是ES6的一部分,但实施它们的道路还很漫很长。

我们现在可以使用它们了! 但我们还必须记住,拥有多个模块会对我们的页面产生性能影响,因为这是浏览器必须在运行时执行的一步。

即使 ES 模块已经浏览器中可用,可很大程度上依然要依靠 webpack ,但是直接用语言构建这样的功能对于统一模块在客户端和 Node.js 上的工作方式来说是巨大的挑战。

更多完整的 ES6 Modules(模块) 介绍请查看 ES6 Modules(模块)系统及语法详解


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(2) 打赏
未经允许不得转载:WEB前端开发 » 介绍 ES Modules(模块) – JavaScript 完全手册(2018版)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏