JavaScript-ES6-模块化语法3 ways to export3 ways to import

74 阅读 0 评论 49 点赞

我是靠谱客的博主活力花生，最近开发中收集的这篇文章主要介绍JavaScript-ES6-模块化语法3 ways to export3 ways to import，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

模块化语法export & import

3 ways to export
3 ways to import

3 ways to export

// export separately

export let name = 'michael'

export function myFunction(){
    console.log("here is the function from mode01.js")
}

// export unifiedly
let name = 'michael'

function myFunction(){
    console.log("here is the function from mode02")
}
export {
    name, myFunction
}

// defaulct export
export default {
    name: "michael",
    myFunction: function() {
        console.log("here is the my function from mode03")
    }
}

3 ways to import

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        // 1. common import
        // import * as mode01 from "./src/js/mode01.js"
        // import * as mode02 from "./src/js/mode02.js"
        // import * as mode03 from "./src/js/mode03.js"
        // console.log(mode01)
        // console.log(mode02)
        // console.log(mode03)

        // 2. assign by deconstruct
        // import {name, myFunction} from "./src/js/mode01.js"
        // import {name as nameFromMode02, myFunction as myFunction02} from "./src/js/mode02.js"
        // import {default as mode03} from "./src/js/mode03.js"

        // 3. easily import which only works for default export
        import mode03 from "./scr/js/mode03.js"
        console.log(mode03)
    </script>
</body>
</html>