ES6模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的优势有以下几点：

1) 防止命名冲突

2) 代码复用（把功能代码封装成一个文件 对外暴露一个接口）

3) 高维护性

模块功能主要由两个命令构成： export 和 import。

 export 命令用于规定模块的对外接口

 import 命令用于输入其他模块提供的功能

1. 暴露方式:

m1

//分别暴露

export let school = 'sgg';

export function teach(){

    console.log('我们')

}

m2

//统一暴露

let school = 'sgg';

function findJob(){

    console.log('我们')

}

export{school, findJob}

m3

//默认暴露

export default {//default后面跟上要暴露的数据 可以是数字 字符串或对象（居多）

    school:'atguigu',

    change:function(){

        console.log('women');

    }

}

导入方式：

        //引入m1.js模块内容

        import * as m1 from "./m1.js";

        console.log(m1);

        //引入m2.js模块内容

        import * as m2 from "./m2.js";

        console.log(m2);

        //引入m3.js模块内容

        import * as m3 from "./m3.js";

        console.log(m3);

        m3.default.change(); //默认暴露要通过default来调用方法

引入语法：

//1.通用的导入方式

        //引入m1.js模块内容

        import * as m1 from "./m1.js";

        console.log(m1);

        //引入m2.js模块内容

        import * as m2 from "./m2.js";

        console.log(m2);

        //引入m3.js模块内容

        import * as m3 from "./m3.js";

        console.log(m3);

        m3.default.change();

       

//2.解构赋值方式

        import {school,teach} from './m1.js'

        console.log(school);

        console.log(teach);

        import {school as guigu,findJob} from './m2.js'

        console.log(guigu);

        console.log(findJob);

        import {default as m3} from './m3.js'//不能把default当做名字 要取别名

        console.log(m3);

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

        import m3 from "./m3.js";

        console.log(m3);

使用es6模块化的两种方式：

1. 直接在标签里写

<script type="module">

…………

</script>

1. 用标签src属性 引入口文件 type=“module”

<script src="./app.js" type="module"></script>