ES6—class与模块化

 

ES6中的模块功能主要由两个命令构成：export和import。

 

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能，二者属于相辅相成、一一对应关系。

一、什么是模块

模块实质上是对业务逻辑分离实现低耦合高内聚，也便于代码管理而不是所有功能代码堆叠在一起，模块真正的魔力所在是仅导出和导入你需要的绑定，而不是将所有的东西都放到一个文件。

在理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。

二、export 导出 命令

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar, foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

 

在export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

 

 

 

 

 直接在export的地方定义导出的函数，或者变量

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

 

不需要知道变量名字（相当于是匿名的）的情况，可以 直接把开发的接口给export。如果一个js模块文件就只有一个功能， 那么就可以使用export default导出。

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

这样做的好处是其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

 

export也能默认导出函数， 在import的时候， 名字可以自定义， 因为每一个模块的默认接口就一个

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

 

使用通配符* ，重新导出其他模块的接口

//lib.js
export * from "./other";
//如果只想导出部分接口， 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

 

三、import 导入命令

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

import { formatFn as fn0 } from 'lib.js';

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。