ES6新增的模块化

在引入模块化之前，引入外部js文件通过

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

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

模块化的特点：

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

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

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

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

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

导出（export）

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

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

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

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

导入（import）

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

如

 使用格式：

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

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

代码说明

文件1.js：

    export var a=10

 文件2：

当单独导出的数据较多时，我们不用写很多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：

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

例如：

文件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：