1 module 模块化
js module
- ES6 的模块化分为导出(export)与导入(import)两个模块。
- 模块导入导出各种类型的变量,如字符串,数值,函数,类。
- export、import 都处于模块顶层
1.1 export
-
export
输出变量、函数、类
- export 语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
- 对应的
import
语句需要使用大括号。
export var xxx = 123;
export var yyy = 'aaa';
export function multiply(x, y) {
return x * y;
};
export const multiply = (x, y) { }
var xxx = 123;
var yyy = 'aaa';
function multiply(x, y) {
return x * y;
}
export { xxx, yyy, multiply };
export { multiply as ccc };
export 1;
var m = 1;
export m;
1.2 import
-
import
输入其他模块提供的功能
- import 命令具有提升效果,会提升到整个模块的头部,首先执行
- 只读属性:import 命令输入的变量都是只读的,可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。
- 单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import
- 静态执行特性:import 是静态执行,编译阶段执行的,所以不能使用表达式和变量
import { xxx, yyy, multiply } from "./profile.js";
import { xxx as surname } from "./profile.js";
import * as circle from "./circle";
import { a } from "./xxx.js";
a = {};
import { a } from "./xxx.js";
a.foo = "hello";
1.3 export default
export default function () {
console.log('foo');
}
function foo() {
console.log('foo');
}
export default foo;
export default var a = 1;
export var a = 1;
export default 42;
export 42;
1.4 export 与 import 在同一模块使用
import customName from "./export-default";
export default function (obj) {}
export function each(obj, iterator, context) {}
export { each as forEach };
import _, { each, forEach } from "lodash";
function add(x, y) {
return x * y;
}
export { add as default };
import { default as foo } from "modules";
export { foo, bar } from "my_module";
import { foo, bar } from "my_module";
export { foo, bar };
export * from "my_module";
1.5 import()
import(./xxx.js)
- 参数 specifier,指定所要加载的模块的位置
- import 命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载。
- import()返回一个 Promise 对象
- 它是运行时执行,什么时候运行到这一句,就会加载指定的模块。
- import()函数与所加载的模块没有静态连接关系,这点也是与 import 语句不相同。
- import()类似于 Node.js 的 require()方法,区别主要是前者是异步加载,后者是同步加载。