学习内容:
模块化的规范
1、CommonJS : Node.js
这是出现的比较早的一种规范,他是在Node.js中的一种模块化规范,他的局限性是基于Node虽然能在服务器端实现模块的同步加载,但仅仅局限在服务端。
所以又产生了AMD的规范。
2、AMD : require.js
AMD是require.js在推广过程中对模块化定义的规范化产出。记得以前用到前端框架时,总要引入一个require.js,就可以实现模块化。AMD叫异步模块定义,可以定义回调函数,回调函数里面可以等到模块加载完成,再在回调函数里面实现想要的功能。AMD推崇的是依赖前置,提前执行。与AMD对应的还有CMD。
3、CMD : sea.js
CMD是sea.js在推广过程中对模块化定义的规范化产出。sea.js是阿里推出的,现已不再运维。CMD推崇依赖就近,延迟执行。
上面三种都是出现比较早的模块规范化,2015年出现了ES6。
4、ES6
2015年推出了ES6的模块化规范,正式纳入JS标准。
下面来学习在ES6中如何导入导出模块。
export/import
当用export 关键字导出模块的时,比如 :
export a = 7
则在import时,导入的名称和导出的名称必须完全一样(上面导出a,下面必须导入a才行),否则找不到,如:
import {a} from './module.js' // "./"表示当前文件夹下,后缀名js可以不写
console.log(a);
console.log(aa);
-----------------------------------------------
7
Uncaught ReferenceError: aa is not defined
再来看,如果export导出了多个模块,有变量和方法,如:
export const a = 7;
export const b = 6;
export const sum = (x, y) => x + y;
import时,{}里面可以用逗号分隔,如:
import { a, b, sum } from "./module.js"; // "./"表示当前文件夹下,后缀名js可以不写
console.log(a);
console.log(b);
console.log(sum(1, 2)); // 和正常的方法调用一样
--------------
7
6
3 // 1 + 2
如果export是对象的话,需要在对象上加上{},如:
const obj = {
name : 'Sure'
}
export {obj}
import:
import {obj} from './module'
console.log(obj);
--------------------
{name: 'Sure'}
也可以一次导出多个,如:
const a = 7;
const b = 6;
const sum = (x, y) => x + y;
const obj = {
name: "Sure",
};
export { a, b, sum, obj };
再复杂一点,加一个类进去,如:
export
class Person {
constructor(name) {
this.name = name;
}
showName() {
console.log(this.name);
}
}
export { Person };
import
import { Person } from "./module.js"; // "./"表示当前文件夹下,后缀名js可以不写
let p = new Person('Sure')
console.log(p.name);
import时可以使用别名,用as即可,但是as以后,之前的变量名就不可以用了,如:
import { a as aa } from "./module";
console.log(aa);
console.log(a);
----------------------------------------------------
7
Uncaught ReferenceError: a is not defined
另一种导出方式,export default ,注意:每个module只能有一个default。
const a = 7;
export default a
导入:
import abc from './module'
console.log(abc);
------
7
export default导出全部的内容:
const a = 7;
const b = 6;
const sum = (x, y) => x + y;
const obj = {
name: "Sure",
};
class Person {
constructor(name) {
this.name = name;
}
showName() {}
}
export default { a, b, sum, obj, Person };
导入时,moduleObj这个名称可以随意定义:
import moduleObj from "./module.js"; // "./"表示当前文件夹下,后缀名js可以不写
console.log(moduleObj);
--------------------------------------------
{a: 7, b: 6, obj: {…}, sum: ƒ, Person: ƒ}
Person: ƒ Person(name)
a: 7
b: 6
obj: {name: 'Sure'}
sum: ƒ sum(x, y)
还有一种导入方式,是用在导出内容特别多时,import * as :
注意看下面的输出。
import * as mod from './module'
console.log(mod);
--------------------------------------------------------------------------------------
Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}
default: {a: 7, b: 6, obj: {…}, sum: ƒ, Person: ƒ}
__esModule: true
Symbol(Symbol.toStringTag): "Module"
[[Prototype]]: Object
上面的输出可以这样取值:
import * as mod from './module'
console.log(mod.default.a);
console.log(mod.default.sum(1,2))
------
7
3