Es6中的模块化:暴露(export)和引入(import)

  • 三种暴露方式:1.分别暴露 2.统一暴露 3. 默认暴露

代码如下:

// 暴露数据的三种方法
// 1.分别暴露
// export let school = '五邑大学';

// export function say(){
//     console.log('欢迎来到邑大!');
// }

// export function jod() {
//     console.log('这里可以帮你找到心仪的工作!');
// }

// 2.统一暴露
// export {school , say , jod};

// 3.默认暴露
export default{
    school : '五邑大学',
    say : function(){
        console.log('欢迎来到邑大!');
    },
    jod : function(){
        console.log('这里可以帮你找到心仪的工作!');
    }
   
}
  • 三种引入方式:1.通用引入 2. 解构赋值形式引入 3.简单形式引入(但是只针对默认暴露)

代码如下:

<!-- 浏览器中一般是之间在script标签中引入路径即可 -->
<!-- 一定要添加 type="module" 这个属性 -->
<script  type="module">
    // 引入一般有三种方法:
    // 1.通用的引入方法
    // import * as m from "./m.js";
    // console.log(m);

    // 2.解构赋值的形式
    // import {school , say , jod} from "./m.js";
    // console.log(school); // 五邑大学
    // console.log(say);//ƒ say()
    // console.log(jod);//ƒ jod()
    // 默认暴露
    // import{default as m} from "./m.js";

    // 3.简单形式 但是只能针对默认暴露
    import m from "./m.js";
    console.log(m);//{school: '五邑大学', say: ƒ, jod: ƒ}
</script>

运行结构如下:(三种运行结果均是如此)

image