Module模块化

引言

问：在ES6之前，JS是没有模块化加载方法的，那么JS都是怎么实现模块化的呢？
答：为了让JS能像其他语言一样实现模块化加载，社区内出现了CommonJS、AMD等模块加载语法标准，CommonJS主要是实现服务器的模块化加载，AMD主要是实现浏览器模块化加载。

requirejs

requirejs是实现了AMD语法标准的一个模块加载器:
1、从requirejs官网下载好require.js文件。
2、在index.html文件中用script标签引入require.js

为了不让浏览器在加载require文件时卡住，可以使用异步加载文件的方法：

async：是否异步加载；
defer：IE浏览器不支持async，支持defer；
故把defer也加上，实现各个浏览器的兼容。

// index.html
// data-main: 首个需要加载的文件


// main.js
// 设置好各个模块的配置信息
require.config({
    paths: {
        "moduleA": "a", // a.js
        "moduleB": "b"  // b.js(require会自动识别文件类型，所以不用带上文件后缀.js)
    }
});

require(["moduleA", "moduleB"], function(moduleA, moduleB) {
    console.log("This is main.js");
    console.log(`moduleA: ${JSON.stringify(moduleA)}`);
    console.log(`moduleB: ${JSON.stringify(moduleB)})`);
});

// a.js
define(function() {
    let a = {
        name: "a.js",
        message: "Hello a.js"
    }
    return a;
});

// b.js(在子模块中也可以引入其他文件)
define(["moduleA"], function(moduleA) {
    let b = {
        name: "b.js",
        message: "Hello b.js",
        importFile: moduleA.name
    }
    return b;
});

ES6：Module

ES6新增了模块化方法：import和export

// main.js
import {a} from "./a"
import {b} from "./b"

console.log(a); // {name: "a.js", message: "This is a.js"}
console.log(b); // {name: "b.js", message: "This is b.js", importFile: "a.js"}

// a.js
let a = {
    name: "a.js",
    message: "This is a.js"
}

export {a}

// b.js
import {a} from "./a"

let b = {
    name: "b.js",
    message: "This is b.js",
    importFile: a.name
}

export {b}

若浏览器不支持ES6语法，用babel进行转换，webpack+babel用法可见：webpack入门

Module语法

下面正式步入正题，介绍一下Module语法：

1、export

export能导出变量、对象、函数

// main.js

// 方式一：
export let m = 5;

// 方式二
let m = 5;
export {m}

// 方式三
let m = 5;
export {m as hello} // 此时对外的接口名称为hello

// 方式四
let m = 5;
let n = 5;
export {m, n}

2、import

// 方式一
import {m} from "./main.js"

// 方式二
import {m as hello} from "./main.js"
console.log(hello); // 对导入的数据名称重命名

// 方式三
import * as hello from "./main.js"
console.log(hello); // 将main.js文件中导出的数据全部导入

模块之间能动态加载数据：

// main.js
import {a} from "./a"
import {b} from "./b"

console.log(a); // {name: "a.js", message: "This is a.js"}
console.log(b); // {name: "b.js", message: "This is b.js", importFile: "a.js"}
setTimeout(function() {
    console.log(b);
}, 4000); // 此时打印结果为：{name: "b.js", message: "hello b.js", importFile: "a.js"}

// a.js
let a = {
    name: "a.js",
    message: "This is a.js"
}

export {a}

// b.js
import {a} from "./a"

let b = {
    name: "b.js",
    message: "This is b.js",
    importFile: a.name
}
setTimeout(function() {
    b.message = "hello b.js";
}, 3000);

export {b}

需要了解更多详细的Module语法知识：ES6入门