ES6的模塊化（export導出）

 ES6 Module把一個文件當作一個模塊，每個模塊有自己的獨立作用域，那如何把每個模塊聯系起來呢？核心點就是模塊的導入（import）與導出（export）。

模塊化的好處：

• 防止命名沖突
• 代碼復用
• 高維護性

暴露也就是導出（export）有三種方式：1.分別暴露 2.統一暴露 3.默認暴露

分別暴露：在需要暴露的變量或者方法前面加上export關鍵字，我們新建一個m1.js文件寫上如下代碼

//分別暴露
export let team='RNG'

export function play(){
    console.log('this is a team of LPL')
}

function own(){
    console.log('不想被暴露');
}

這個時候再在頁面上對這個文件進行引入，同樣新建一個頁面 main.html，通過import關鍵字進行引入

    <script type="module">
        // 引入模塊化js
        import * as m1 from './modulesJs/m1.js'
        // 調用暴露的方法
        m1.play(); // thi is a team of LPL
        // m1.own() // 由於未暴露own方法這個地方就會報錯 m1.own is not a function
        console.log(m1)
    </script>

同理書寫統一暴露m2.js代碼如下：

// 統一暴露
let name = 'IG'
function discription() {
    console.log('we are the champion');
}

//以對象的形式進行暴露
export {
    name,
    // 並且可以通過as取一個別名
    discription as dis
}

引入m2.js的方法不變

    <script type='module'>
        import * as m2 from './modulesJs/m2.js'
        m2.dis() // we are the champion
        console.log(m2.name) // IG
    </script>

最后默認暴露（暴露一個default對象）

// 默認暴露
export default {
    name: 'EDG',
    say() {
        console.log('it is a good team');
    }
}

    <script type='module'>
        import * as m3 from './modulesJs/m3.js'
        // 默認暴露的模塊JS在調用的時候多了一個default節點
        m3.default.say() // it is a good team
        console.log(m3.default.name) // EDG
    </script>