2.1JavaScript语言的ES6 Module

1.目录结构

模块就是一个以 .js 扩展名结尾的文件。

与 <script type="module"> 关联或通过 import 语句导入或通过 export 语句导出的 JavaScript 文件都会被认为是模块文件。

在以下示例中，模块文件为 main.js、canvas.js、square.js。

index.html
main.js
modules/
  canvas.js
  square.js

//index.html(省略部分代码)
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <script type="module" src="main.js"></script>
  </head>
  <body>
  </body>
</html>

//main.js(省略部分代码)
import { create, createReportList } from './modules/canvas.js';
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
import randomSquare from './modules/square.js';

//canvas.js(省略部分代码)
export { create, createReportList };

//square.js(省略部分代码)
export { name, draw, reportArea, reportPerimeter };
export default randomSquare;

2.导出(export)

在模块中定义的模块成员的可见性对外部来说都是私有(private)的，所以如果想在外部使用它们，首先需要在模块中将它们显式导出，然后在外部显式导入它们。不同的导出方式对应着不同的导入方式。

模块中可同时存在命名导出和默认导出，但是为了减少命名导出和默认导出之间潜在的混淆，一些团队选择在整个项目中只坚持使用命名导出或默认导出中的其中一种，或者在整个项目中使用命名导出或默认导出两种但避免在单个文件中混合使用它们。

2.1命名导出(named export)

命名导出顾名思义只支持命名的模块成员的导出，不支持匿名的模块成员或字面量的导出。目前，命名导出支持命名的类、变量、常量、函数的导出。

//直接在想到导出的模块成员前添加export关键字。
export class 类名 {
  //类体
}

export const 常量名 = 值;

export function 函数名(参数) {
  //函数体
}

//在文件末尾使用一个export关键字将想要导出的模块成员导出。
class 类名 {
  //类体
}

const 常量名 = 值;

function 函数名(参数) {
  //函数体
}

//注意：函数名后没有圆括号。
//导出单个
export { 类名 };
export { 类名 as 类别名 };
export { 常量名 };
export { 常量名 as 常量别名 };
export { 函数名 }
export { 函数名 as 函数别名 };

//导出多个
export { 类名, 常量名, 函数名 };
export { 类名 as 类别名, 常量名 as 常量别名, 函数名 as 函数别名 };

2.2默认导出(default export)

命名导出只支持命名的模块成员导出，而默认导出支持不仅仅限于命名的模块成员的任意为值的表达式的导出。

default 是别名，所以一个模块文件中只能有一个默认导出，不然会发生别名冲突。

//直接在想到导出的模块成员前添加export default关键字。
//导出命名类
export default class 类名 {
  //类体
}

//导出匿名类
export default class {
  //类体
}

//此语法错误，默认导出支持任意为值的表达式，不支持赋值表达式。
export default const 常量名 = 值;

//导出命名函数
export default function 函数名(参数) {
  //函数体
}

//导出匿名函数
export default function (参数) {
  //函数体
}

//导出数值字面量
export default 123;

//导出字符串字面量
export default 'foo';

//导出正则表达式字面量
export default /[a-z]*/;

//导出对象字面量
export default { foo: 'foo' };

//在文件末尾使用一个export关键字将想要导出的模块成员导出。
class 类名 {
  //类体
}

const 常量名 = 值;

function 函数名(参数) {
  //函数体
}

//注意：函数名后没有圆括号。
//default是别名
export { 类名 as default };
export { 常量名 as default };
export { 函数名 as default };

//简写
export default 类名;
export default 常量名;
export default 函数名;

3.导入(import)

模块说明符 外围的引号支持单引号('模块说明符')或双引号("模块说明符")。

模块说明符 必须是一个以“/”开头的绝对路径，或者是一个以“./”或“../”开头的相对路径，又或者是一个带有协议及主机名的完整URL。ES6 模块规范不支持类似“util.js”的非限定模块说明符。

//模块说明符格式
/模块.js
./模块.js
https://example.com/模块.js

3.1命名导入(named import)

//命名导出对应的导入方式
//注意：函数名后没有圆括号。
//导入单个
import { 类名 } from '模块说明符';
import { 类名 as 类别名 } from '模块说明符';
import { 常量名 } from '模块说明符';
import { 常量名 as 常量别名 } from '模块说明符';
import { 函数名 } from '模块说明符';
import { 函数名 as 函数别名 } from '模块说明符';

//导入多个
import { 类名, 常量名, 函数名 } from '模块说明符';
import { 类名 as 类别名, 常量名 as 常量别名, 函数名 as 函数别名 } from '模块说明符';

//导入全部
//创建了一个对象字面量，赋给名称为“别名”的常量，导入的全部模块成员作为此对象字面量的属性，所以可以通过“对象.属性”的方式调用模块成员。
import * as 别名 from '模块说明符';

3.2默认导入(default import)

//默认导出对应的导入方式
//注意：函数名后没有圆括号。
//导入单个(可用于命名的模块成员、匿名的模块成员、字面量)
import { default as 别名 } from '模块说明符';

//导入单个(只可用于命名的模块成员)
//注意：没有花括号。
import 类名 from '模块说明符';
import 常量名 from '模块说明符';
import 函数名 from '模块说明符';

3.3导入整个模块

如果想导入没有任何导出的模块中的成员，则可以在 import 关键字后写出模块说明符直接导入整个模块即可。

注意，对于有导出的模块也可以使用这种语法。

import '模块说明符';

3.4使用importmap导入

//index.html(省略部分代码)
<!DOCTYPE html>
<html lang="zh-CN">
  <head>

    <!-- 必须在<script type="module">之前 -->
    <script type="importmap">
    <!-- JSON对象 -->
    {
      "imports": {
        <!-- 属性值为解析以后实际的模块说明符 -->
        <!-- 属性名的末尾不带正斜杠 -->
        "lodash": "/node_modules/lodash-es/lodash.js",
        "lodash/fp": "/node_modules/lodash-es/fp.js",
        <!-- 属性名和属性值的末尾都带正斜杠 -->
        "lodash/": "/node_modules/lodash-es/"
      }
    }
    </script>

    <script type="module" src="main.js"></script>
  </head>
  <body>
  </body>
</html>

//main.js
//映射到"/node_modules/lodash-es/lodash.js"
import _ from "lodash";

//映射到"/node_modules/lodash-es/fp.js"
import fp from "lodash/fp";

//映射到"/node_modules/lodash-es/fp.js"
import fp from "lodash/fp.js";

4.await关键字

await 关键字不仅仅可以被使用在 async 函数体内，还可以被使用在模块文件的顶层(在模块成员的外部，直接在模块文件下)。

//语法一
const colors = fetch("../data/colors.json").then((response) => response.json());

export default await colors;

//语法二
const response = await fetch("../data/colors.json");
const colors = await response.json();

export default colors;

原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/javascript/javascriptlang/3556.html

2.1JavaScript语言的ES6 Module

1.目录结构

2.导出(export)

2.1命名导出(named export)

2.2默认导出(default export)

3.导入(import)

3.1命名导入(named import)

3.2默认导入(default import)

3.3导入整个模块

3.4使用importmap导入

4.await关键字

相关推荐

2.3JavaScript原始类型之符号(Symbol)

1.8JavaScript语言的语句(Statement)

2.1JavaScript语言的ES6 Module

发表回复