引言
問：在ES6之前攘烛，JS是沒有模塊化加載方法的舶赔，那么JS都是怎么實(shí)現(xiàn)模塊化的呢湃交？
答：為了讓JS能像其他語言一樣實(shí)現(xiàn)模塊化加載，社區(qū)內(nèi)出現(xiàn)了CommonJS藤巢、AMD等模塊加載語法標(biāo)準(zhǔn)搞莺，CommonJS主要是實(shí)現(xiàn)服務(wù)器的模塊化加載，AMD主要是實(shí)現(xiàn)瀏覽器模塊化加載掂咒。
requirejs
requirejs是實(shí)現(xiàn)了AMD語法標(biāo)準(zhǔn)的一個(gè)模塊加載器:
1才沧、從requirejs官網(wǎng)下載好require.js文件。
2绍刮、在index.html文件中用script標(biāo)簽引入require.js
<script src="require.js"></script>
為了不讓瀏覽器在加載require文件時(shí)卡住温圆，可以使用異步加載文件的方法：
<script src="require.js" defer async="true"></script>
async：是否異步加載；
defer：IE瀏覽器不支持async孩革，支持defer岁歉；
故把defer也加上，實(shí)現(xiàn)各個(gè)瀏覽器的兼容膝蜈。
// index.html
// data-main: 首個(gè)需要加載的文件
<script src="lib/require.js" defer async="true" data-main="js/main.js"></script>
// main.js
// 設(shè)置好各個(gè)模塊的配置信息
require.config({
paths: {
"moduleA": "a", // a.js
"moduleB": "b" // b.js(require會(huì)自動(dòng)識(shí)別文件類型锅移，所以不用帶上文件后綴.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 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 饱搏
若瀏覽器不支持ES6語法非剃，用babel進(jìn)行轉(zhuǎn)換，webpack+babel用法可見：webpack入門
Module語法
下面正式步入正題推沸，介紹一下Module語法：
1备绽、export
export能導(dǎo)出變量、對(duì)象鬓催、函數(shù)
// main.js
// 方式一：
export let m = 5;
// 方式二
let m = 5;
export {m}
// 方式三
let m = 5;
export {m as hello} // 此時(shí)對(duì)外的接口名稱為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); // 對(duì)導(dǎo)入的數(shù)據(jù)名稱重命名
// 方式三
import * as hello from "./main.js"
console.log(hello); // 將main.js文件中導(dǎo)出的數(shù)據(jù)全部導(dǎo)入
模塊之間能動(dòng)態(tài)加載數(shù)據(jù)：
// main.js
import {a} from "./a"
import 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); // 此時(shí)打印結(jié)果為：{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 深浮
需要了解更多詳細(xì)的Module語法知識(shí)：ES6入門
