文章目錄
1. 模塊化相關規範
1.1 模塊化概述
傳統開發模式的主要問題
① 命名衝突
② 文件依賴
通過模塊化解決上述問題
- 模塊化就是把單獨的一個功能封裝到一個模塊（文件）中，模塊之間相互隔離，但是可以通過特定的接口公開內部成
員，也可以依賴別的模塊 - 模塊化開發的好處：方便代碼的重用，從而提升開發效率，並且方便後期的維護
1.2 瀏覽器端模塊化規範
1. AMD
Require.js (http://www.requirejs.cn/)
2. CMD
Sea.js (https://seajs.github.io/seajs/docs/)
1.3 服務器端模塊化規範
1. CommonJS
① 模塊分爲 單文件模塊 與 包
② 模塊成員導出：module.exports 和 exports
③ 模塊成員導入：require(‘模塊標識符’)
1.4 大一統的模塊化規範 – ES6模塊化
在 ES6 模塊化規範誕生之前，Javascript 社區已經嘗試並提出了 AMD、CMD、CommonJS 等模塊化規範。
但是，這些社區提出的模塊化標準，還是存在一定的差異性與侷限性、並不是瀏覽器與服務器通用的模塊化標準，例如：
- AMD 和 CMD 適用於瀏覽器端的 Javascript 模塊化
- CommonJS 適用於服務器端的 Javascript 模塊化
因此，ES6 語法規範中，在語言層面上定義了 ES6 模塊化規範，是瀏覽器端與服務器端通用的模塊化開發規範。
ES6模塊化規範中定義：
- 每個 js 文件都是一個獨立的模塊
導入模塊成員使用import關鍵字暴露模塊成員使用export關鍵字
1. Node.js 中通過 babel 體驗 ES6 模塊化
① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
②npm install --save @babel/polyfill
③ 項目跟目錄創建文件 babel.config.js,拷貝下方代碼到其中
const presets = [
["@babel/env", {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}]
];
module.exports = { presets };
④在項目目錄中創建index.js文件作爲入口文件， 在index.js中輸入需要執行的js代碼，例如：
console.log("ok");
⑤ 打開終端，輸入命令：npx babel-node ./index.js
1. 默認導出 與 默認導入
- 默認導出語法
export default默認導出的成員 - 默認導入語法
import 接收名稱 from '模塊標識符'
// 當前文件模塊爲 m1.js
// 定義私有成員 a 和 c
let a = 10
let c = 20
// 外界訪問不到變量 b ,因爲它沒有被暴露出去
let b = 30
function show() {}
// 將本模塊中的私有成員暴露出去，供其它模塊使用
export default {
a,
c,
show
}
//index.js
// 導入模塊成員
import m1 from './m1.js'
console.log(m1)
// 打印輸出的結果爲：
// { a: 10, c: 20, show: [Function: show] }
注意：每個模塊中，只允許使用唯一的一次 export default，否則會報錯！
2. 按需導出 與 按需導入
- 按需導出語法
exportlet s1 = 10 - 按需導入語法
import{ s1 }from‘模塊標識符’
// 當前文件模塊爲 m1.js
// 向外按需導出變量 s1
export let s1 = 'aaa'
// 向外按需導出變量 s2
export let s2 = 'ccc'
// 向外按需導出方法 say
export function say = function() {}
//index.js
// 導入模塊成員
import { s1, s2 as ss2, say } from './m1.js'
console.log(s1) // 打印輸出 aaa
console.log(ss2) // 打印輸出 ccc
console.log(say) // 打印輸出 [Function: say]
注意：1.每個模塊中，可以使用多次按需導出，接收時用{}來包裹
2.當有默認導入的數據與按需導入的數據時，要先導入默認的
`
3. 直接導入並執行模塊代碼
有時候，我們只想單純執行某個模塊中的代碼，並不需要得到模塊中向外暴露的成員，此時，可以直接導入並執行模塊代碼。
// 當前文件模塊爲 m2.js
// 在當前模塊中執行一個 for 循環操作
for(let i = 0; i < 3; i++) {
console.log(i)
}
//index.js
// 直接導入並執行模塊代碼
import './m2.js'