1.介绍

说明：ES6之前主要有CommonJS和AMD两种，前者用于服务器，后者用于浏览器。 ES6在语言标准的层面上，实现了模块功能，取代了CommonJS和AMD，成功服务器和浏览器通用的模块解决方案。 ES6设计思想就是尽可能的静态化，使得编译确定模块的依赖关系，CommonJS 和 AMD 模块，都只能在运行时确定这些东西。CommonJS 模块就是对象，输入时必须查找对象属性。

2.CommonJS模块

let {name,study,love}=require("student")

说明：其实上面的用解构的方法，将name,study,love变量从student中提取出来。ES6模块不是对象，而是通过export命令显示指定输出的代码，再通过import命令输入。ES6可以在编译时就完成模块加载，效率很高，导致了ES6模块本身不能引用，因为它不是对象。

3.严格模式

ES6语法中模块自动开启严格模式
函数的参数不能有同名属性，否则报错
不能对只读属性赋值，否则报错
变量必须声明后再使用
禁止this指向全局对象

注意：ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

4.export命令

说明：说明：export命令用于规定模块的对外接口。一个模块就是一个独立的文件，文件的内部的所有变量，外部无法获取，必须通过export暴露。

good.js

 const name="李四"
 const age=18
 const love="每天学习前端"
export {name,age,love as love1}
export default function(){
    console.log("默认暴露");
}

引入的文件

 import { name, age, love } from "./goodDay.js"
console.log(name, age, love); //李四 18 每天学习前端

注意：ES6暴露的基本变量类型也是对象，export命令除了输出变量，还可以输出函数或类，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

5.import

说明：使用export命令定义了模块的对外接口后，其他JS文件就可以通过import命令加载这个模块。

const name1="李四"
const age1=18
export {name1,age1} 

// 上面的代码放在另一个文件

import { name1, age1 } from "./路径" //路径写全，不能省略./

//as关键字可以将输入的变量重命名
// import { myName as name1 } from "./路径"

注意： import变量输入的变量都只是可读，是不可以在加载模块中修改的，如果import输入的对象，那么可以修改对象的属性,一般不修改，容易混淆。import命令具有提升效果，会提升到整个模块的头部，首先执行。import是静态执行，所有不能使用表达式和变量进而赋值等操作。import语句是 Singleton 模式。(它确保一个类只能有一个实例，并提供一个全局访问点。称为单例)。

6.模块的整体加载

说明：指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

school.js

 export function student() {
    
            }
export function age() {
    
            }

加载这个模块

import * as school from "路径"

注意：意思是引入所有的通过school变量保存。

7.export.default

说明：import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了不用阅读文档就能加载模块，就要用export default命令，为模块指定默认输出。

shcool.js

 export default function () {
   
           }

说明：上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

         import sch from "路径"
          sch()

  function foo() {
          console.log('foo');
        }
        
        export default foo;

注意： import命令可以为该匿名函数指定任意名字。 export default命令用在非匿名函数前，也是可以的。foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

        import yx, { name, age, love } from "./goodDay.js"
        //   执行默认暴露函数
        yx()
        // 正常暴露
        console.log(name); //李四

8.export与import的复合写法

说明：在一个模块之中，先输入后输出同一个模块，import语句可以与export写在一起。

    import {name1,age1} from "路径"
        export {name1}

9.模块可以继承

10. 适合场合

按需加载
条件加载
满足条件语句后自动加载

11.import.meta

说明：只能在模块内部使用，这个属性返回一个对象有两个属性。

11.1import.meta.url

说明：import.meta.url返回当前模块的 URL 路径

11.2import.meta.scriptElement

说明：import.meta.scriptElement，import.meta.scriptElement是浏览器特有的元属性。

ES6中Module语法