ES6 module 简单整理

shots

16.11.11

过了又一个关棍节,感觉。。。。不好

参考:阮一峰ES6

CommonJS 的模块规范

CommonJS对模块的定义非常简单,主要分为模块引用、模块定义和模块标志

模块的引用

var math = reqiure('math');

require()接受模块的标志符。以此引入一个模块的API到当前的上下文中。

模块的定义

上下文提供exports对象用于导出当前模块的方法和变量,并且它是唯一导出的出口。
module对象,它代表模块自身。而exports是module的属性。

模块的标识

模块标识就是传递给require()方法的参数。必须符合小驼峰命名的字符串。

CommonJS的模块导出和引用机制使得用户完全不必考虑变量污染。

ES6 module

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

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

// 等同于 这种方式称为“运行时加载”
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

exports

exports && module.exports

直接复制给exports,会报错。


exports= function(){
    //
}

因为exports对象是通过形参的方式传入的,直接赋值形参会改变形参的作用,但并不能改变作用域外的值。

如果要达到require引入一个类的效果,请赋值给module.exports对象,这个迂回的方案不改变形参的引用。

export

需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

import

使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。
import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块s对外接口的名称相同。

模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

export default

export default 一个模块只有一个。为模块指定默认输出。

使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

以下比较默认输出和正常输出:

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

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

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

模块的继承

ES6模块加载的实质

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

ES6模块加载的机制,与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。

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

ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个动态的只读引用。等到真的需要用到时,再到模块里面去取值,换句话说,ES6的输入有点像Unix系统的“符号连接”,原始值变了,import输入的值也会跟着变。因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

循环加载

CommonJS的加载原理

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

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

该对象的id属性是模块名,exports属性是模块输出的各个接口,loaded属性是一个布尔值,表示该模块的脚本是否执行完毕。

以后需要用到这个模块的时候,就会到exports属性上面取值。即使再次执行require命令,也不会再次执行该模块,而是到缓存之中取值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。

<mark>CommonJS模块的重要特性是加载时执行,即脚本代码在require的时候,就会全部执行。一旦出现某个模块被"循环加载",就只输出已经执行的部分,还未执行的部分不会输出。</mark>

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

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

//main.js
var a = require('./a.js');
var 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

ES6处理“循环加载”与CommonJS有本质的不同。ES6模块是动态引用,如果使用import从一个模块加载变量(即import foo from 'foo'),那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。

// a.js如下
import {bar} from './b.js';
console.log('a.js');
console.log(bar);
export let foo = 'foo';

// b.js
import {foo} from './a.js';
console.log('b.js');
console.log(foo);
export let bar = 'bar';

$ babel-node a.js
b.js
undefined
a.js
bar

跨模块常量

上面说过,const声明的常量只在当前代码块有效。如果想设置跨模块的常量(即跨多个文件),可以采用下面的写法。

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3
阅读 4.1k

前端学习二三事
一腔热血、无数沮丧、勿忘初心、路在远方

前端开发前进者

53 声望
1 粉丝
0 条评论
你知道吗?

前端开发前进者

53 声望
1 粉丝
宣传栏