模塊化開發(fā)
特點
- 延遲解析
- 默認(rèn)嚴(yán)格模式
使用步驟
1.通過export導(dǎo)出成員
2.在另一個文件當(dāng)中通過import接收成員
3.引用通過webpack編譯后生成的bundle.js文件
舉例：
- a.js
export let a = { name: "aaa" };
export const b = 111;
// 導(dǎo)出成員a和b
- b.js
import * as a from './a'
// 導(dǎo)入a.js里的所有成員，注意相對路徑需要加`./`這樣的定位符
console.log(a.a, a.b);
// 輸出導(dǎo)入的成員
- webpack.config.js
module.exports = {
mode: 'development',
entry: './b.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
}
}
導(dǎo)入webpack生成的文件后可以發(fā)現(xiàn)輸出了a和b的值象浑。
注：
注意相對路徑需要加./這樣的定位符察滑，因為模塊化需要在node環(huán)境下使用嗤瞎，如果不加定位符姻檀，則默認(rèn)去依賴模塊當(dāng)中尋找，而不會去相對路徑下找
默認(rèn)成員default
在模塊化當(dāng)中還可以導(dǎo)出默認(rèn)成員default巍扛，則通過導(dǎo)入模塊成功語法時连茧，只導(dǎo)入默認(rèn)成員default的值，舉例：
- a.js
export default "aaa";
// 導(dǎo)出默認(rèn)成員"aaa"
- b.js
import a from './a'
// 導(dǎo)入默認(rèn)成員default园蝠，并命名為a渺蒿，相當(dāng)于下面這個意思
// import default as a from './a'
console.log(a);
這種語法在vue的組件化工程當(dāng)中很常見
導(dǎo)入成員語法
前面介紹了兩種語法，一種是導(dǎo)入全部：
import * as xxx from './xxx'
還有導(dǎo)入默認(rèn)默認(rèn)成員語法：
import xxx from './xxx'
如果希望導(dǎo)入指定的成員也可以：
import {xxx, yyy as zzz} from './xxx'
// 導(dǎo)入./xxx文件里的xxx和yyy成員彪薛，并將yyy改名為zzz
還有導(dǎo)入如CSS文件茂装、圖片文件等模塊時（在模塊化開發(fā)下一些靜態(tài)文件都稱為模塊），因為這些文件里可能不存在成員啥的善延，所以可以只導(dǎo)入少态，舉例：
import './xxx'
還有異步引入，使用import方法易遣，舉例：
let x = import('./xxx')
// 當(dāng)需要用到的時候引入彼妻，簡化代碼體積
// 傳回來的是個Promise對象，需要使用await關(guān)鍵字等待
模塊化導(dǎo)入路徑問題
-
'xxx'：直接從npm依賴?yán)飳ふ蚁嚓P(guān)模塊 -
'./xxx'/../xxx：從相對路徑當(dāng)中尋找相關(guān)模塊 -
@/xxx：從src目錄下尋找相關(guān)模塊
其他
自定義實現(xiàn)模塊管理
let myModule = (function() {
const moduleMap = {};
// 定義一個對象管理所有模塊
function define(name, dependencies, action) {
// 定義模塊方法豆茫，依次傳入模塊名侨歉、依賴的模塊，以及對應(yīng)的操作行為
dependencies.map((dependency, index) => {
// 獲取當(dāng)前模塊依賴的模塊
if (!(dependency in moduleMap)) throw Error(`模塊：${dependency}不存在!`)
dependencies[index] = moduleMap[dependency];
})
moduleMap[name] = action(...dependencies);
// 執(zhí)行模塊行為
}
return {
define
}
})();
// 定義模塊math揩魂，暴露出add和sub方法
myModule.define("math", [], function() {
return {
add(x, y) {
return x + y;
},
sub(x, y) {
return x - y;
}
};
})
myModule.define("utils", [], function() {
return {
toLower(val) {
return val.toLowerCase();
}
};
})
// 定義模塊test幽邓，依賴math和utils模塊，并使用這兩個模塊提供的方法
myModule.define("test", ["math", "utils"], function(math, utils) {
console.log(math.add(1, 2));
console.log(math.sub(1, 2));
console.log(utils.toLower("Me"));
})
html里使用模塊
在<script>標(biāo)簽中設(shè)置屬性type="module"即可火脉，此時就可以用模塊化相關(guān)的代碼的牵舵，舉例：
<script type="module">
import { Test } from "./test.js";
console.log(Test);
</script>
動態(tài)按需加載模塊
通過import方法實現(xiàn)（返回promise對象），舉例：
<script type="module">
let a = 1;
if (a === 1) {
import("./test.js").then(data => {
console.log(data.Test);
})
}
</script>
注：
因為import語句只能放在最外層倦挂，不能放在內(nèi)部畸颅，所以這里使用import方法
