ES6(十: import 模块加载)

最新推荐文章于 2024-08-16 00:07:59 发布

Justin0223

最新推荐文章于 2024-08-16 00:07:59 发布

阅读量4.1k

点赞数 3

分类专栏： ECMAScript6 文章标签： cmd amd import

本文链接：https://blog.csdn.net/u010377383/article/details/78107027

版权

ECMAScript6 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

（一）设计思想

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

CommonJS和AMD（现在基本快被放弃的加载方式）模块，都只能在运行时确定这些东西。比如， CommonJS模块就是对象，输入时必须查找对象属性

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

上面代码的实质是整体加载fs 模块（即加载fs 的所有方法），生成一个对象（_fs ），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6模块不是对象，而是通过export 命令显式指定输出的代码，输入时也采用静态命令的形式。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs 模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”，即ES6可以在编译时就完成模块编译，效率要比CommonJS模块的加载方式高。
当然，这也导致了没法引用ES6模块本身，因为它不是对象。

（二）export 命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export 关键字输出该变量。

下面是一个JS文件，里面使用export 命令输出变量。

因为不推荐单独每个都命令输出，所以建议在底部一起命令输出。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

export命令除了输出变量，还可以输出函数或类（class）。

export function multiply (x, y) {
    return x * y;
};

上面代码对外输出一个函数multiply 。

通常情况下， export 输出的变量就是本来的名字，但是可以使用as 关键字重命名。

function v1() { ... }
function v2() { ... }
export {
    v1 as streamV1,
    v2 as streamV2,
    v2 as streamLatestVersion
};

上面代码使用as 关键字，重命名了函数v1 和v2 的对外接口。重命名后， v2 可以用不同的名字输出两次。

（三）import 命令

（1）import 命令接受一个对象（用大括号表示）

里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js ）对外接口的名称相同。

// main.js
import {firstName, lastName, year} from './profile';

（2）为输入的变量重新取一个名字

import命令要使用as 关键字，将输入的变量重命名。

import { lastName as surname } from './profile';

（3）import 命令具有提升效果

会提升到整个模块的头部，首先执行。

foo();
import { foo } from 'my_module'; // 会提升到顶部

（4）import 语句会执行所加载的模块

加载所以模块，但是不会输出任何值。

import 'lodash'
import 'style.scss'

（四）模块的整体加载

这种用法多用于常量定义方式（当然对函数，类都可以使用）。

// profile.js
const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;
export {firstName, lastName, year};

分别用两种加载方式举例

// main.js （逐一加载）
import { firstName, lastName } from './circle';
console.log("姓名： " + firstName);

// main.js （整体加载）
import * as userName from './circle';
console.log("姓名： " + userName.firstName);

（五）export default命令

使用import 命令的时候，开发者需要知道所要加载的变量名或函数名，否则无法加载。

为了解决这种情况，就要用到export default 命令，为模块指定默认输出。

当然，一个模块只能有一个默认输出，因此export deault 命令只能使用一次。
所以， import 命令后面才不用加大括号，因为只可能对应一个方法。

export default 命令用在匿名函数前

// export-default.js
export default function () {
    console.log('foo');
}

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

上面代码就是将一个函数定义成默认，然后输出。不需要知道函数名，而且import后面不加大括号。

export default 命令用在非匿名函数前

// export-default.js
export default function foo() {
    console.log('foo');
}
// 或者写成
function foo() {
    console.log('foo');
}
export default foo;

上面代码中， foo 函数的函数名foo ，在模块外部是无效的。加载的时候，视同匿名函数加载。

下面比较一下默认输出和正常输出

// 输出
export default function crc32() {
    //TODO
}
// 输入
import crc32 from 'crc32';
// 输出
export function crc32() {
    //TODO
};
// 输入
import { crc32 } from 'crc32';

在一条import语句中，同时输入默认方法和其他变量

可以写成下面这样。

import customName, { otherMethod } from './export-default';

小结

本质上， export default 就是输出一个叫做default 的变量或方法，然后系统允许你为它取任意名字。

（六）解析ES6模块加载实质

前言：

CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。

CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

// 01-require-lib.js

module.exports = {
    number: 3,
    incCounter: function () {
        this.number++;
    }
};
// 01-require.js
const lib = require('./01-require-lib');
const number = lib.number;
const incCounter = lib.incCounter;

console.log(number); // 3
incCounter();
console.log(number); // 3

上面代码说明， counter 输出以后， 01-require-lib.js 模块内部的变化就影响不到number值。

模块加载命令import 时，不会去执行模块，而是只生成一个动态的只读引用。
等到真的需要用到时，再到模块里面去取值，

换句话说， ES6的输入有点像Unix系统的”符号连接“，原始值变了，输入值也会跟着变。因此， ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

// lib.js
export let number= 3;
export function incCounter() {
    number++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

上面代码说明， ES6模块输入的变量counter 是活的，完全反应其所在模块lib.js 内部的变化。

再举一个出现在export 一节中的例子。

// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

// m2.js
import {foo} from './m1.js';
console.log(foo); // bar
setTimeout(() => console.log(foo), 500);

上面代码中， m1.js 的变量foo ，在刚加载时等于bar ，过了500毫秒，又变为等于baz 。

（七）循环加载

CommonJS模块的加载原理

CommonJS的一个模块，就是一个脚本文件。 require 命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

上面代码中，该对象的id 属性是模块名， exports 属性是模块输出的各个接口， loaded 属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。

以后需要用到这个模块的时候，就会到exports 属性上面取值。即使再次执行require 命令，也不会再次执行该模块，而是到缓存之中取值。

也就是说， CommonJS模块无论加载多少次，都只会在第一次加载时运行一
次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

CommonJS模块的循环加载

CommonJS模块的重要特性是加载时执行，即脚本代码在require 的时候，就会全部执行。

一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。

让我们来看， Node官方文档里面的例子。

脚本文件a.js 代码如下。

exports.done = false;
const b = require('./b.js');
console.log('在 a.js 之中， b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');

上面代码之中， a.js 脚本先输出一个done 变量，然后加载另一个脚本文件b.js 。注意，此时a.js 代码就停在这里，等待b.js 执行完毕，再往下执行。

再看b.js 的代码。

exports.done = false;
const a = require('./a.js');
console.log('在 b.js 之中， a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕')

上面代码之中， b.js 执行到第二行，就会去加载a.js ，这时，就发生了“循环加载”。系统会去a.js 模块对应对象的exports 属性取值，可是因为a.js 还没有执行完，从exports 属性只能取回已经执行的部分，而不是最后的值。

a.js 已经执行的部分，只有一行。

exports.done = false;

因此，对于b.js 来说，它从a.js 只输入一个变量done ，值为false 。然后， b.js 接着往下执行，等到全部执行完毕，再把执行权交还给a.js 。于是， a.js 接着往下执行，直到执行完毕。

我们写一个脚本main.js ，验证这个过程。

const a = require('./a.js');
const b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);

执行main.js ，运行结果如下。

$ node main.js
在 b.js 之中， a.done = false
b.js 执行完毕
在 a.js 之中， b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true

上面的代码证明了两件事。一是，在b.js 之中， a.js 没有执行完毕，只执行了第一行。二是， main.js 执行到第二行时，不会再次执行b.js ，而是输出缓存的b.js 的执行结果，即它的第四行。

exports.done = true;

总之， CommonJS输入的是被输出值的拷贝，不是引用。

另外，由于CommonJS模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。

var a = require('a'); // 安全的写法
var foo = require('a').foo; // 危险的写法
exports.good = function (arg) {
    return a.foo('good', arg); // 使用的是 a.foo 的最新值
};
exports.bad = function (arg) {
    return foo('bad', arg); // 使用的是一个部分加载时的值
};

上面代码中，如果发生循环加载， require(‘a’).foo 的值很可能后面会被改写，改用require(‘a’) 会更保险一点。

ES6模块的循环加载

ES6模块是动态引用，遇到模块加载命令import 时，不会去执行模块，只是生成一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

// a.js
import {bar} from './b.js';
export function foo() {
    bar();
    console.log('执行完毕');
}
foo();
// b.js
import {foo} from './a.js';
export function bar() {
    if (Math.random() > 0.5) {
        foo();
    }
}