ES6新增的模块化

在引入模块化之前，引入外部js文件通过<script src="文件路径"></script>

通过这个方法导入的js文件，js文件中声明的全局变量 就会污染当前html文件的全局。

在ES6时，引入了模块化来解决这个缺陷，每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

模块化的特点：

1、避免了变量的全局污染;

2、ES6 的模块自动开启严格模式，不管有没有在模块头部加上 'use strict';

3、模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等；

4、每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

模块化分为导入与导出两个模块

导出（export）

有两种导出   单独导出和默认导出（与default联合使用）

单独导出的必须要用导出的标识符来按需导入,可以有多个单独导出；

export default默认导出 只允许导出一个或0个。

<script>
    //单独导出可以有很多个 ，可以导出各种各样的数据
    export var a=10
    export var fn=function() {}
    export var arr=[1,2,3]
    export var obj={name:"xl",age:11}
    //等等
    
    //默认导出只能有一个
    export default {a,fn,arr,obj}
 //这里导出的是一个对象，包含了前面的每一项数据，这个写法是es6新出的对象字面量，可以将变量直接写在对象内{a}就等于{a:10}
</script>

 当一个模块导出后，需要使用该模块的数据，就要在文件中导入该导出的模块。

导入（import）

import与from关联使用，此时script标签的type必须设置为module ，

如<script type="module"></script>

 使用格式：

import 接收的标识符 form "导出文件的路径"

说明：如果导出中是单独导出的，这里接收设置的标识符必须导出的标识符相同而且要写在{}内，默认导出的不作需求。

代码说明

文件1.js：

    export var a=10

 文件2：

<script type="module">
   import {a} from "./文件1.js" //假设在同一文件夹下
    //此时就可以使用a了
    console.log(a) //10
</script>

当单独导出的数据较多时，我们不用写很多import,只需要根据我们的需求，将导出的标识符写在{ }内用逗号隔开按需导入即可，代码说明：

文件3.js：

     var obj={name:"karen"}
     export var num=100
     export function  tool () {return obj}
     export var arr=[1,2,3]
     export var str = "hello world"

 文件4：

<script type="module">
    //根据我们需要的数据按需导入，注意这里标识符也要相同
   import {num,tool,str} from "./文件3.js" //假设在同一文件夹下
    console.log(num) //100
    console.log(tool()) //{name1:"karen"}
    console.log(str) //hello world
</script>

当我们使用默认导出一个对象数据时，我可以用 一个自定义标识符接收，需要里面的那一个数据时，直接用语法糖点语法获取。

例如：

文件5.js:

     var obj={name:"karen"}
     var num=100
     function  tool () {return obj}
     var arr=[1,2,3]
     var str = "hello world"
     export default {num,tool,arr,str}

 文件6：

<script type="module">
    
   import con from "./文件5.js" //假设在同一文件夹下 用con接收对象
    //使用num数据
    console.log(con.num) //100
   //使用str数据
    console.log(con.str) //hello world
</script>