ES6模块化-暴露和引入的使用

目录

暴露方式

1. 分别暴露

2. 统一暴露

3. 默认暴露

引入方式

1. 通用的导入方式

2. 解构赋值形式

3. 简便形式，只针对“默认暴露”

---

暴露方式

1. 分别暴露

        m1.js

export let school ='mySchool';
export function teach(){
    console.log("教学~");
}

2. 统一暴露

        m2.js

let school ='mySchool';
function findJob(){
    console.log("找工作!");
}
export {school， findJob};

3. 默认暴露

        m3.js

export default {
    school: 'mySchool',
    change: function(){
        console.log("改变! !");
    }
}

引入方式

1. 通用的导入方式

<script type="module">
    import * as m1 from "./src/js/m1.js"; // 引入 m1.js 模块
    // console.log(m1.school);
    // m1.teach();
    import * as m2 from "./src/js/m2.js"; // 引入 m2.js 模块
    // console.log(m2.school);
    // m2.findJob();
    import * as m3 from "./src/js/m3.js"; // 引入 m3.js 模块
    // console.log(m3.default.school);
    // m3.default.change();
</script>

2. 解构赋值形式

<script type="module">
    import {school, teach} from "./src/js/m1.js";
    // console.log(school);
    // teach();
    import {school as guigu, findJob} from "./src/js/m2.js";
    // console.log(guigu);
    // findJob();
    import {default as m3} from "./src/js/m3.js";
    // console.log(m3.school);
    // m3.change();
</script>

3. 简便形式，只针对“默认暴露”

<script type="module">
    import m3 from "./src/js/m3.js";
    // console.log(m3.school);
    // m3.change();
</script>