ES 标准模块化规范概述和导入导出

开发 前端
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的 import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

[[405075]]

本文转载自微信公众号「勾勾的前端世界」,作者西岭。转载本文请联系勾勾的前端世界公众号。

ES 标准模块化规范-概述

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的 import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。

如果你希望外部能够读取模块内部的某个变量,就必须使用 export 关键字导出该变量。想要是要其他模块导出的内容, 就必须使用 import 导入。

导入 (Importing)

导入的值不能重新分配,尽管导入的对象和数组可以被修改(导出模块,以及任何其他的导入,都将受到该修改的影响)。在这种情况下,它们的行为与 const 声明类似。

  • 命名导入 (Named Imports)

从源模块导入其原始名称的特定项目。

  1. import  { something } from'./module.js'

从源模块导入特定项,并在导入时指定自定义名称。

  1. import { something as somethingElse } from'./module.js'
  • 命名空间导入 (Namespace Imports)

将源模块中的所有内容作为对象导入,将所有源模块的命名导出公开为属性和方法。默认导出被排除在此对象之外。

  1. importas module from'./module.js' 

上面的 “something” 的例子将被附加到作为属性的导入对象上。

  1. “module.something”。 
  • 默认导入 (Default Import)

导入源文件的默认导出。

  1. import something from'./module.js'
  • 空的导入 (Empty Import)

加载模块代码,但不要创建任何新对象。

  1. import './module.js'

这对于 polyfills 是有用的,或者当导入的代码的主要目的是与原型有关的时候。

导出 (Exporting)

  • 命名导出 (Named exports)

导出具体声明的值:

  1. var something =true
  2. export { something }; 

在导出时重命名:

  1. export { something as somethingElse }; 

声明后立即导出:

  1. // 这可以与 `var`, `let`, `const`, `class`, and `function` 配合使用 
  2. exportvar something =true
  • 默认导出(Default Export)

导出一个值作为源模块的默认导出:

  1. exportdefault something; 

当源模块只有一个导出时,才建议使用此做法。

将默认和命名导出,并放在同一模块中是不好的,尽管它是符合规范的。

 

责任编辑:武晓燕 来源: 勾勾的前端世界
相关推荐

2021-07-14 09:26:51

UPS电源模块化

2012-11-08 09:45:44

JavaScriptrequireJS

2023-07-10 10:21:21

JavaScript模块化规范

2010-01-21 09:27:30

模块化的优点NetBeans

2019-08-28 16:18:39

JavaScriptJS前端

2020-12-23 14:18:43

JavaScript模块导出

2010-08-02 08:54:53

Flex模块化

2017-04-10 14:23:01

typescriptjavascriptwebpack

2013-08-20 18:18:55

CSS模块化Normalize.c

2020-09-17 10:30:21

前端模块化组件

2013-08-20 15:31:18

前端模块化

2017-05-18 10:23:55

模块化开发RequireJsJavascript

2020-09-18 09:02:32

前端模块化

2015-10-10 11:29:45

Java模块化系统初探

2022-03-11 13:01:27

前端模块

2021-12-02 05:57:04

模块化UPS电源

2021-12-24 07:10:36

架构分层模块化

2018-12-18 11:20:28

前端模块化JavaScript

2018-03-21 21:31:28

Java9编程Java

2022-09-05 09:01:13

前端模块化
点赞
收藏

51CTO技术栈公众号