模块化（module）

一，模块化介绍

1.历史上，JavaScript 一直没有模块（module）体系，ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

2.模块化的作用就是将一个大程序拆分成互相依赖的小文件。

3.ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";

4.ES6 模块化基本由两个命令完成：export 和 import

二，模块的导出 export

1.export 规定模块对外接口,下面两种写法皆可

// detalis.js
{
	export var name='max';
	export var age =27;
}

//details.js
{
	var name='max';
	var age =27;
	export {name,age}
}

2.错误的写法

{
	var a = 1;
	export a; // 报错

	var a = 1;
	export {a}; // 正确
}

3.默认导出export default，一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致

export default function a(){
    return "默认导出一个方法"
}
import myFn from "./test.js";//注意这里默认导出不需要用{}。

4.整体导出* 可以用*实现整体导出

{
	export * as ex from 'kkk.js'
}

5.export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

三，模块的导入 import

1.import用于导入模块的功能，后面的from可以接受路径也可以接受模块名，如果是模块名则必须有相关配置文件指示模块名路径。

2.对于不是使用default导出的，我们必须使用原名导出，对于使用default导出的，不能使用{}包裹起来导出。

{
	import { name, age } from './details.js'  // 相对路径
	import Vue from 'vue' // 模块名
}

对于使用export default 导出的

{
	import name from './details.js'  // 不用使用括号
}

3.对于不是使用default导出的，我们必须使用原名导出,但是我们可以用 as 为引入的模块更名

{ 
	import { name as n } from './details.js'
}

4.import 语句是静态分析的，在编译时就会执行，会被提到文件头部。

四，import()函数

1.import命令：import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行，放在代码块或者条件语句中会报错。

2.import()函数：import()函数是在运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。

3.import()函数接受的参数是需要导入模块的路径，返回一个Promise对象，因此可以进行Promise的所以操作。Promise对象返回的参数就是导出的模块

import('modules.js').then(module=>{...})

4.基于运行时加载，我们可以完成下面的操作
（1）按需加载

if(needModule){
	import('modules.js').then({a,b}=>{...})
}

（2）条件加载

if(needa){
	import('modules.js').then(a=>{...})
}else{
	import('modules.js').then(others=>{...})
}

（3）动态的模块路径

const fn =(location)=>location
import(fn()).then(others=>{...})