JavaScript文件引入、CommonJs和Es Module

JavaScript文件引入

　　早期通過script標簽引入js文件，但當項目越來越龐大時，隨着引入js文件的增加，會出現以下問題：

• js文件作用域都是頂層，將造成變量污染
• js文件變多，項目變得不好維護
• js文件依賴問題，引入順序錯，代碼全報錯

 

為了解決上述問題，出現了CommonJs和Es Module

• 解決變量污染問題，每一個文件都是獨立的作用域，所以不存在變量污染
• 解決代碼維護問題，一個文件里代碼非常清晰
• 解決文件依賴問題，一個文件里可以清楚看到依賴了那些其他文件

CommonJs

　　CommonJs使用module.exports導出變量及函數，可以導出任意類型的值；也可省略module關鍵字，直接寫exports導出。支持混合導出。

　　CommonJs使用require導入，如果想要單個的值，可以通過解構對象來獲取

// commonjs.js
module.exports = {
    name: 'ame',
    age: 24,
    sex: 'male'
}

exports.name = 'maybe'

// getdata.js
let {name, age, sex} = require('./commonjs.js')
console.log(name);

　　不管是CommonJs還是Es Module都不會重復導入，即只要該文件內加載過一次這個文件了，再次導入一次是不會生效的

　　CommonJs支持動態導入，即只有執行到require時才執行文件導入

　　CommonJs導入的是值的拷貝，所以可以修改拷貝值，但這樣可能會引起變量污染

 

Es Module

　　Es Module導出分為兩種：單個導出(export)和默認導出(export default)，支持混合導出，如果文件中有混合導入，則必須先導入默認導出的，再導入單個導入的值

　　Es Module使用import進行導入，如果要單個導入則必須使用{}

　　export導出的是值的引用，並且內部有映射關系，而且導入的值不能進行修改即為只讀狀態

　　Es Module的import只能聲明在文件的最頂部，不能動態加載語句

　　

export const name = "ame"
export const age = 24

export default {
    fn() {}，
}

import { name, age } from './index.js'
console.log(name, age) // "ame" 24

// 如果里面全是單個導出，我們就想全部直接導入則可以這樣寫
import * as all from './index.js'
console.log(all) // {name: "ame", age: 24}