返回介绍

介绍 ES Modules(模块)

发布于 2025-01-23 23:27:41 字数 3780 浏览 0 评论 0 收藏 0

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(模块) 系统及语法详解

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文