ES6 module
ES6 module说明
在 ES6 之前,社区制定了一些模块加载方案,最主要的有CommonJS
和AMD
两种。前者用于服务器
,后者用于浏览器
。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
由于 ES6 模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
除了静态加载带来的各种好处,ES6 模块还有以下好处。
- 不再需要 UMD 模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点。
- 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者 navigator 对象的属性。
- 不再需要对象作为命名空间(比如 Math 对象),未来这些功能可以通过模块提供。
export命令
export 命令用于规定模块的对外接口。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用 export 关键字输出该变量。下面是一个 JS 文件,里面使用 export 命令输出变量。
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export 的写法,除了像上面这样,还有另外一种。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
上面代码在 export 命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在 var 语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
export 命令除了输出变量,还可以输出函数或类(class)。
export function multiply(x, y) {
return x * y;
};
通常情况下, export 输出的变量就是本来的名字,但是可以使用 as 关键字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
需要特别注意的是, export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
// 正确
export function f() {};
// 正确
function f() {}
export {f};
另外, export 语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
// 上面代码输出变量 foo ,值为 bar ,500 毫秒之后变成 baz 。
//这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新
最后, export 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错
import命令
使用export
命令定义了模块的对外接口以后,其他JS
文件就可以通过import
命令加载这个模块。
// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
如果想为输入的变量重新取一个名字, import 命令要使用 as 关键字,将输入的变量重命名。
import { lastName as surname } from './profile.js';
import 命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。但是,如果 a 是一个对象,改写 a 的属性是允许的。
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
a.foo = 'hello'; // 合法操作
注意, import 命令具有提升效果,会提升到整个模块的头部,首先执行。
import 语句会执行所加载的模块,因此可以有下面的写法。
import 'lodash';
如果多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。
模块的整体加载
除了指定加载某个输出值,还可以使用整体加载,即用星号
( * )指定一个对象,所有输出值都加载在这个对象上面。
import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
注意,模块整体加载所在的那个对象(上例是 circle ),应该是可以静态分析的,所以不允许运行时改变。
export default 命令
使用 import 命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到 export default 命令,为模块指定默认输出。
其他模块加载该模块时, import 命令可以为该匿名函数指定任意名字。
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'
下面比较一下默认输出和正常输出
// 第一组
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
export default 命令用于指定模块的默认输出。**显然,一个模块只能有一个默认输出,因此 export default 命令只能使用一次。**所以,import命令后面才不用加大括号,因为只可能唯一对应 export default 命令。
import()
动态加载
import
命令会被JavaScript
引擎静态分析,先于模块内的其他语句执行( import 命令叫做“连接” binding 其实更合适)
在ES2020
引入 import()
函数,支持动态加载模块
import 命令能够接受什么参数, import() 函数就能接受什么参数,两者区别主要是后者为动态加载。import() 返回一个 Promise 对象
const main = document.querySelector('main');
import( ./section-modules/${someVariable}.js )
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
Commonjs
说明
- 每个文件都可以作为一个模块
- 在服务器端:模块的加载是运行时同步加载的
- 在浏览器端:模块需要提前编译打包处理(浏览器大多不认识)
基本语法
暴露模块
暴露的本质都是暴露exports这个对象
- module.exports = value
- exprots.xxx = value
引入模块
require(xxx)
-
当xxx为第三方模块的话,xxx为模块名
-
当xxx为自定义模块的话,xxx为模块文件路径
CommonJS 1.0 模块规范
简介:该规范解决了应该如何编写模块,以便在一类模块系统之间实现互操作,这些模块系统既可以是客户端也可以是服务器端,无论是安全的还是不安全的,都可以在今天实施,或者由具有语法扩展功能的未来系统所支持。这些模块具有最大范围的私密性,可以从其他模块导入单例对象并导出自己的API。隐含地,本规范定义了模块系统必须提供的最小功能,以支持可互操作的模块。
简言之:根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
模块上下文
- 在一个模块中,存在一个自由变量“require”函数
- 这个**“rquire”**函数接收一个模块标识符(解释如下“模块标识符”项)。
- **“rquire”**返回外部模块所输出的API。
- 如果出现依赖闭环(dependency cycle),那么外部模块在被它的传递依赖(transitive dependencies)所require的时候可能并没有执行完成,这种情况下“require“返回的对象必须至少包含此外部模块在调用require函数之前就已经准备完毕的输出。
- 如果请求模块不能返回,那么”require“必须抛出一个错误。
- 在一个模块中,存在一个名为”exports“的自由变量,它是一个对象,模块可以在执行的时候把自身API加入到其中。
- 模块必须使用**”exports“**对象来作为输出的唯一表示。
模块标识符
- 模块标示符是一个由正斜杠分隔的”terms“组成的字符串。
- 一个term的必须为驼峰样式标识符,或者为”.“或”…“。
- 模块标识符可以省略文件名的后缀。比如”.js“。
- 模块标识符可以是相对路径(relative)或者绝对路径(top-level)。如果模块标识符的开头是”.“或者”…“则此模块标识符为相对路径。
- 绝对路径必须是模块所在命名空间的根。
- 相对路径必须是相对于当前require的模块
示例代码
math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
program.js
var inc = require('increment').increment;
var a = 1;
inc(a); // 2
CommonJS 1.1 模块规范
CommonJS 1.1与 1.0相比主要在 模块上下文(Module Context)部分增加了一些规范。
模块上下文
- 在一个模块中,存在一个自由变量“require”函数。
- 这个“rquire”函数接收一个模块标识符。
- “rquire”返回外部模块所输出的API。
- 如果出现依赖闭环(dependency cycle),那么外部模块在被它的传递依赖(transitive dependencies)所require的时候可能并没有执行完成,这种情况下“require“返回的对象必须至少包含此外部模块在调用require函数之前就已经准备完毕的输出。
- 如果请求模块不能返回,那么”require“必须抛出一个错误。
- require有一个只读的、不可删除的”main“属性。”main“相当于程序根目录的module。如果设置了该属性,则其必须和根目录的module指向相同的对象。
require有个paths属性,该属性是一个具有优先秩序的路径数组,优先级从高到低,路径一直回朔到地根模块目录。- paths属性不会存在于沙盒中。
- 在所有模块中paths的attribute均指向相同的值。
- paths是无法被替换的。
- 当paths的attribute存在时,修改paths的内容可能会导致模块无法被正确的搜索到。
- 当paths的attribute存在时,它可能只包含了部分path,当模块加载器在使用这些路径之前或者之后,去检查其它的路径。
- 当paths的attribute存在时,它是模块加载器使paths规范化、标准化的依据。
- 在一个模块中,存在一个名为”exports“的自由变量,它是一个对象,模块可以在执行的时候把自身API加入到其中。
- 模块中必须使用exports对象作为唯一的导出对象。
- 在一个模块中,必须存在一个自由变量“module”,并且module是一个对象。
- module对象有一个只读的、不可删除的id属性。当执行require(module.id)时,可以通过该id找到对应的module并返回module exports出的对象。
- 当创建一个module对象时,该对象可以有一个URI属性。该属性指向对应的模块源文件。该URI不存在于沙盒中。
模块标识符
同CommonJS 1.0中 模块标识符 相关内容。
CommonJs
与Module
的区别
- 两者的模块导入导出语法不同,commonjs是module.exports,exports导出,require导入;ES6则是export导出,import导入。
- commonjs是运行时加载模块,ES6是在静态编译期间就确定模块的依赖。
- ES6在编译期间会将所有import提升到顶部,commonjs不会提升require。
- commonjs导出的是一个值拷贝,会对加载结果进行缓存,一旦内部再修改这个值,则不会同步到外部。ES6是导出的一个引用,内部修改可以同步到外部。
- 两者的循环导入的实现原理不同,commonjs是当模块遇到循环加载时,返回的是当前已经执行的部分的值,而不是代码全部执行后的值,两者可能会有差异。所以,输入变量的时候,必须非常小心。ES6模块是动态引用,如果使用import从一个模块加载变量(即import foo from‘foo’),那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
- commonjs中顶层的this指向这个模块本身,而ES6中顶层this指向undefined。
AMD模块化
AMD规范说明
AMD规范专门用来实现浏览器端的模块化,并且模块的加载是异步的;引入一个第三方的require.js脚本用来解析AMD规范编写的模块
基本语法
使用define用来暴露模块,使用require用来引入模块;require()异步加载模块,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题
暴露模块
define(function(){})
使用define(function(){})
函数定义模块;并且向外暴露
// 定义一个没有依赖模块的data.js模块
define(function(){
let name = '过青年';
function getName(){
return name;
}
console.log("我是data里的name:",name);
// 暴露模块,推荐暴露对象,因为对象是用来存储数据的
return {name,getName};
});
define([‘module’,‘module2’],function(){})
使用define(['module','module2'],function(){})
定义有依赖的模块,注意,数组里面的模块名只是一个代号,不一定要写模块名;不过推荐使用模块名作为代号,这样别人一看就知道引入了哪个模块,不用加后缀
// 定义一个有依赖模块的server.js模块
// 将依赖模块作为实参传递进去
define(['data'],function(data){
let age = 20;
function showName(){
return data.name;
}
console.log("我是在server里面输出的data.name:",data.name);
return {age,showName};
});
引入模块
在主模块app.js
中引入其他模块,使用require
函数;需要使用require.config
配置其他模块的路径
我们的路径是这样的
// app.js
(function(){
require.config({
// 基本路径
baseUrl:'./js/',
paths:{
data:'./module/data',
server:'./module/server'
}
});
require(['server'],function(server){
//会将模块当作参数传进来
console.log("我是在app.js里输出的server.age:",server.age);
console.log("我是在app.js里输出的data.name:",server.showName());
});
})()
原理
-
我们从HTML开始解析页面
-
HTML页面引入的require.js根据data-main属性发现主模块是js目录下的app.js
-
于是进入app.js页面进行解析;解析app.js页面,发现引入了一个叫server的模块,那么这个模块在哪里呢?通过app.js页面中的配置函数require.config()发现server这个模块在./js/module/server.js(我们写路径的时候不能加上后缀,因为解析时默认会添加后缀)
-
于是找到了这个模块,进入这个server模块,结果发现这个server模块又引入了一个叫data的模块,于是又通过app.js的配置函数找,发现data模块在./js/module/server.js中,于是加载这个模块
-
模块全部加载完成
在HTML中引用AMD模块化
AMD规范本来就是用来实现浏览器端的模块化的;而**require.js
**脚本就是这个规范的一种实现
https://requirejs.org/已下载
script
脚本中的data-main
属性值代表主模块,从主模块进入模块内部,依次加载其他模块的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AMD规范实现</title>
</head>
<body>
<script src="./js/libs/require.min.js" data-main="./js/app.js"></script>
<!--
控制台输出结果:
我是data里的name: 过青年
我是在server里面输出的data.name: 过青年
我是在app.js里输出的server.age: 20
我是在app.js里输出的data.name: 过青年
-->
</body>
</html>
总结及注意
- 使用AMD规范需要引入
require.js
——第三方编写的脚本 - 根据
data-main
确认主模块 - 根据主模块中的
require.config({ })
函数确定各模块的位置 require.config({ })
中各个模块的路径不能加后缀.js
- 加载模块时里面的内容会运行