- 前言
- 关于 ECMASCRIPT 发展史和现状
- ES6 带来的重大特性
- ES2016(ES7)的改进
- ES2017(ES8)带来的重大新特性
- ES2018(ES9)带来的重大新特性
- JavaScript 编码风格指南
- JavaScript 词法结构(构建块)
- JavaScript 变量
- JavaScript 数据类型
- JavaScript 表达式
- 原型继承
- 如何使用 JavaScript 中的 Classes(类)
- JavaScript 异常处理
- JavaScript 中的分号(;)
- JavaScript 中的引号
- JavaScript 字面量模板(Template Literals)指南
- JavaScript 中的 function(函数)
- JavaScript 箭头函数(Arrow Function)
- JavaScript 中的闭包(Closures)
- JavaScript 数组(Arrays)
- JavaScript 中的循环(Loops)
- JavaScript 中的事件(Events)
- JavaScript 中的事件循环(Event Loop)
- JavaScript 异步编程和回调
- 理解 JavaScript 中的 Promises
- 用 async 和 await 编写现代 JavaScript 异步代码
- JavaScript 中的 循环(Loops) 和 作用域(Scope)
- JavaScript 定时器 setTimeout() 和 setInterval()
- JavaScript 中的 this
- JavaScript 严格模式(Strict Mode)
- JavaScript 中的 立即执行函数表达式(IIFE)
- JavaScript 中的数学运算符
- JavaScript 中的 Math 对象
- 介绍 ES Modules(模块)
- 介绍 CommonJS
- JavaScript 术语表
介绍 ES Modules(模块)
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=module
和 nomodule
:
<script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script>
总结
ES 模块是现代浏览器中引入的最大功能之一。 他们是 ES6 的一部分,但实施它们的道路还很漫很长。
我们现在可以使用它们了! 但我们还必须记住,拥有多个模块会对我们的页面产生性能影响,因为这是浏览器必须在运行时执行的一步。
即使 ES 模块已经浏览器中可用,可很大程度上依然要依靠 webpack ,但是直接用语言构建这样的功能对于统一模块在客户端和 Node.js 上的工作方式来说是巨大的挑战。
更多完整的 ES6 Modules(模块) 介绍请查看 ES6 Modules(模块) 系统及语法详解
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论