7.JS ES6模块化(1)

114 阅读1分钟

三种暴露方式:

1.分别暴露(模块m1)

export let school = '胶东大学';
export function teach() {
    console.log("胶东大学");
}

2.统一暴露(模块m2)

let school = '胶东大学';
function findSchool(){
    console.log("胶东大学");
}
export {school, findSchool};

3.默认暴露(模块m3)

export default{
    school: '胶东大学',
    change: function(){
            console.log("胶东大学");
            }
}

三种引入方式:

1. 通用的导入方式

<script type="module">
    //引入m1.js模块内容
    import * as m1 from"./src/js/m1.js";
    //引入m2.js模块内容
    import * as m2 from"./src/js/m2.js";
    //引入m3.js模块内容
    import * as m3 from"./src/js/m3.js";
    // 默认暴露方法调用加default;
    m3.default.change();
</script>

2.解构赋值形式

<script type="module">
    //引入分别暴露
    import {school, teach} from"./src/js/m1.js";
    //引入统一暴露
    import {school as School01, findSchool} from"./src/js/m2.js"; // 引入名冲突时可用别名
    //引入默认暴露
    import {default as m3} from"./src/js/m3.js"; //默认暴露引入需用别名
</script>

3.简便形式(针对默认暴露)

    import m3 from"./src/js/m3.js";