ES6的模块化设计思想是静态的，也就是说，模块的依赖关系和输出、输出的变量都是在编译时确定的。CommonJS和AMD模块都是在运行时确定的。ES6模块不是对象，而是通过export显示指定的输出代码，再通过import命令输入。//Moduleinputimport{start,address}from'util'上面的moduleinput加载了两个方法，即使util模块中还有其他方法，也不会加载，只会加载上面介绍的两个方法，这个加载称为“在编译时加载”或静态加载。需要注意的是，ES6模块自动采用严格模式，无论是否在header中添加“usestrict”，都会启用严格模式。严格模式的限制如下：1.变量在使用前必须先声明。2、函数参数不能有同名属性，否则会报错。3.不能使用with语句。4、只读属性不能赋值，否则会报错。number，否则会报错6.不可删除的属性不能删除，否则会报错7.变量不能删除deleteprop，会报错，只能删除属性deleteglobal[prop]8.eval不会在其外层作用域引入变量9、eval和arguments不能重新赋值10、arguments不会自动反映函数参数的变化11、不能使用arguments.callee12、不能使用arguments.caller13、禁止this指向全局对象14,不能使用fn.caller和fn.arguments获取Function调用栈15.增加了保留字（如protected、static和interface）。export和import命令模块主要由export和import组成。export指定模块的对外接口，import用于导入模块提供的功能。Moduleexport//utilmodule//typefunctiontype(a){returntypeofa}//calculatefunctionsum(a,b){returna*b}//判断是否为数组functionisArray(a){returnainstanceofArray}export{type,sum}//导出模块按需导入import{type,sum}from'./util'letnum=sum(10,5)console.log(num)//50以上两个methods是以可选的方式导出的，也就是说import导入模块时，只会加载export导出的方法，import不会加载其他方法，importutil模块可以导入需求，而你需要的模块是导入的，其他没有导入的模块是不会加载的，这就是静态加载的好处。除了export{xxx,xxx}这种按需导出，ES6还提供了exportdefault的默认导出，以及默认的导出方式。导入时不需要跟在导出名称后面，可以自定义名称接收导出方式。//util模块//calculatefunctionsum(a,b){returna*b}//判断是否为数组functionisArray(a){returnainstanceofArray}exportdefaultsum//defaultexportimportaaafrom'./util'//导入的时候可以自定义名字letnum=aaa(10,5)console.log(num)//50其实这个默认就是一个叫default的变量，这个变量可以任意命名，当importing，任何名称都可以匹配默认导出的方法。按需和默认导出export{xxx,xxx}和exportdefaultdefaultexport可以同时使用//utilmodulefunctiontype(a){returntypeofa}functionsum(a,b){returna*b}functionisArray(a){returnainstanceofArray}export{type,sum}exportdefaultisArray//importimport{type,sum}from'./util'importaaafrom'./util'模块的整体加载以上导出方法都是加载模块中对应的方法，模块整体加载要用*，即全部加载，语法如下import*asutilfrom'./util';//useinpageletnum=util.sum(10,5)console.log(num)//50这种写法是将模块作为一个整体加载，用*指定一个对象，所有输出值都是加载到这个对象上。通过object.method名称获取对应的方法。需要注意的是，ES6模块是静态分析的，不允许更改模块，所以不允许这样写：util.sum='hello'//报错util.sum=function(){}//报错模块之间也可以继承模块继承，假设模块A继承模块B//一个模块functionsum(a,b){returna*b}functionisArray(a){returnainstanceofArray}export*from'B'//导出模块B的所有属性和方法，忽略模块中的默认方法export{sum}exportdefaultisArrayexport*该命令会忽略模块B的默认方法，因为模块A内部有自己的默认方法.模块重命名//utilmoduleexport{sumas}//pageimport{s}from'./util'//根据需要导入命名方法模块importimport()通常导入需要在页面的顶层imported，import执行优先级最高，例如：lets=sum(10,5)import{sum}from'./util'上面的写法是允许的，程序会执行importintroduction，和然后执行lets=sum(10,5)，但是这种写法默认会导入模块，而且会在顶层导入。es6提供了一个动态导入函数：import()，在程序执行到语句时会导入，同步执行。import()返回一个Promise，因此可以使用then方法和async-await。承诺写作import('./util.js').then(el=>{console.log(el.t(100));//numberconsole.log(el.sum(10,5));//50})async-awaitwritingasyncfunctiongetImport(){let{sum}=awaitimport('./util.js')console.log(sum(2,8));}getImport()//16也是可能通过解构获取import('../module/import.js').then(({sum})=>{console.log(sum(20,5));//100})如果模块是默认的默认导出，其实默认就是一个键名import('../module/import.js').then((e)=>{console.log(e.default([1,2,3]));//true})default也可以以命名形式导入（别名）import('../module/import.js').then(({default:isA})=>{console.log(isA([1,2,3]));//true})import.meta在使用模块时，有时候需要知道模块本身的信息（比如模块的路径），import命令新增一个meta属性import.meta，可以返回当前模块的信息。注意：import.meta只能在模块内使用，在模块外使用会报错//utilmodulefunctionsum(a,b){returna*b}functiongetMeta(){returnimport.meta//获取当前模块元信息}export{sum,getMeta}//console.log(import.meta);//import.meta只能在模块内使用，在模块外使用会报错import('./util.js').then(el=>{console.log(el.getMeta());//{url:'http://127.0.0.1:5500/module/import.js',resolve:?}})案例源码：https://gitee.com/wang_fan_w/es6-science-institute如果您觉得本文对您有帮助，请点亮star
