第 22 章 Module 的语法

Module 的语法

1. 概述

  • ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入

2. 严格模式

  • ES6 的模块自动采用严格模式,严格模式的限制:
  • 变量必须声明后使用
  • 函数的参数不能有同名属性
  • 不能使用 with 语句
  • 不能对只读属性赋值
  • 不能使用前缀 0 表示八进制数
  • 不能删除不可删除的属性
  • 不能删除变量
  • eval 不会再它的外层作用域引入变量
  • eval 和 arguments 不能被重新赋值
  • arguments 不会自动更新函数参数的变化
  • 不能使用 arguments.callee
  • 不能使用 arguments.caller
  • 禁止 this 指向全局变量
  • 不能使用 fn.caller 和 fn.arguments 获取函数调用的堆栈
  • 增加保留字

3. export 命令

  • export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // profile.js
    // 输出变量
    export let firstName = 'Michael';
    export let lastName = 'Jackson';
    export let year = 1958;

    // 等同于
    let firstName = 'Michael';
    let lastName = 'Jackson';
    let year = 1958;

    export {firstNamem lastName, year};

    // 输出类
    function v1() { ... }
    function v2() { ... }

    export {
    v1 as streamV1,
    v2 as streamV2,
    v2 as streamLatestVersion
    };

4. import 命令

  • 使用 export 命令定义了模块的对外接口之后,其他 JS 文件可以通过 import 命令加载这个模块

    1
    2
    import {firstName, lastName, year} from './profile.js';
    import {lastName as surname} from './profile.js';
  • import 命令具有提升效果,会提升到整个模块的头部,首先执行。

5. 模块的整体加载

1
2
3
4
5
6
7
8
9
10
11
12
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}

// main.js
import * as circle from './circle';
console.log('圆的面积:' + circle.area(4));
console.log('圆的周长:' + circle.circumference(4));

6. export default 命令

1
2
3
4
5
6
7
8
// export-default.js
export default function() {
console.log('foo');
}

// import-default.js
import customName from './export-default'
customName(); // 'foo'

7. export 与 import 的复合写法

1
2
3
4
5
export {foo, bar} from 'my_module';

// 等同于
import {foo, bar} from 'my_module';
export {foo, bar};

8. 模块的继承

1
2
3
4
5
6
// circleplus.js
export * from 'circle';
export let e = 2.718;
export default function(x) {
return Math.exp(x);
}
-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!