《深刻理解ES6》筆記——用模塊封裝代碼（13）

模塊的定義

模塊是自動運行在嚴格模式下而且沒有辦法退出運行的JavaScript代碼。

模塊能夠是函數、數據、類，須要指定導出的模塊名，才能被其餘模塊訪問。

//數據模塊
const obj = {a: 1}
//函數模塊
const sum = (a, b) => {
  return a + b
}
//類模塊
class My extends React.Components {

}

模塊的導出

給數據、函數、類添加一個export，就能導出模塊。一個配置型的JavaScript文件中，你可能會封裝多種函數，而後給每一個函數加上一個export關鍵字，就能在其餘文件訪問到。

//數據模塊
export const obj = {a: 1}
//函數模塊
export const sum = (a, b) => {
  return a + b
}
//類模塊
export class My extends React.Components {

}

模塊的引用

在另外的js文件中，咱們能夠引用上面定義的模塊。使用import關鍵字，導入分2種狀況，一種是導入指定的模塊，另一種是導入所有模塊。

一、導入指定的模塊。

//導入obj數據，My類
import {obj, My} from './xx.js'

//使用
console.log(obj, My)

二、導入所有模塊

//導入所有模塊
import * as all from './xx.js'

//使用
console.log(all.obj, all.sun(1, 2), all.My)

默認模塊的使用

若是給咱們的模塊加上default關鍵字，那麼該js文件默認只導出該模塊，你還須要把大括號去掉。

//默認模塊的定義
function sum(a, b) {
    return a + b
}
export default sum

//導入默認模塊
import sum from './xx.js'

模塊的使用限制

不能在語句和函數以內使用export關鍵字，只能在模塊頂部使用，做爲react和vue開發者的你，這個限制你應該很熟悉了。

在react中，模塊頂部導入其餘模塊。

import react from 'react'

在vue中，模塊頂部導入其餘模塊。

<script>
    import sum from './xx.js'
</script>

修改模塊導入和導出名

有2種修改方式，一種是模塊導出時修改，一種是導入模塊時修改。

一、導出時修改：

function sum(a, b) {
    return a + b
}
export {sum as add}

import { add } from './xx.js'
add(1, 2)

二、導入時修改：

function sum(a, b) {
    return a + b
}
export sum

import { sum as add } from './xx.js'
add(1, 2)

無綁定導入

當你的模塊沒有可導出模塊，全都是定義的全局變量的時候，你可使用無綁定導入。

模塊：

let a = 1
const PI = 3.1314

無綁定導入：

import './xx.js'
console.log(a, PI)

瀏覽器加載模塊

有用過webpack打包js模塊的同窗可能有經驗，使用webpack打包了多個js文件，而後放到HTML使用script加載時，若是加載順序不對，就會出現找不到模塊的錯誤。

這是由於模塊之間是有依賴關係的，就像你使用jQuery的時候，必須先加載jQuery的代碼，才能使用jQuery提供的方法。

加載模塊的方法，老是先加載模塊1，再加載模塊2，由於module類型默認使用defer屬性。

<script type="module" src="module1.js"></script>
<script type="module" src="module2.js"></script>

總結

模塊還有不少有意思的特性，對react和vue開發有必定經驗的人對這些基本知識應該瞭如指掌，新手不瞭解也不用太心急，寫幾個module.js作一下嘗試。若是瀏覽器報錯，不能識別export模塊，你可能須要先加載babel的js插件來編譯它。

=> 返回文章目錄