Es6模块化

ES6模块化是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要额外学习AMD,CMD或者CommonJS等模块化规范。

1. 默认导入/导出

语法：export default 成员对象

注意：在一个模块里边只能默认导出一次

1. 单个数据

默认导出单个数据

test.js

const fn=()=>{
    console.log('111')
}

export default fn

默认导入单个数据

语法：import 接受名称 from '模块标识符'

注意：接收的名称可以任意命名，只要合法即可。

import fn from './test.js'

// 自定义别的名称也行
// import onFn from './test.js'

console.log(fn)		// fn: ƒ

2. 多个数据

默认导出多个数据

const num=66
const arr=[1,2]
const obj={a:1}
const fn=()=>{
    console.log('111')
}

export default {
    num,
    arr,
    obj,
    fn
}

默认导入多个数据

import test from './test.js'

console.log(test)	//{num: 66, arr: Array(2), obj: {…}, fn: ƒ}

2.按需导入/导出

1. 按需导出

语法：export 按需导出的成员

test.js

export const num=10
export const obj={a:1}
export const fn=()=>{
	console.log('11')
}

2. 按需导入

import {num,obj,fn} from './test'
console.log(num)	// 10
console.log(obj)	// {a:1}
console.log(fn)		// fn:ƒ

3.import()

1. import()和import主要区别为前者是动态加载。
2. import()返回一个Promise对象，import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。
3. import()类似于Node的require方法，区别主要是前者是异步加载，后者是同步加载
4. import()通常用于按需加载、条件加载、动态的模块路径

常在vue中用作组件懒加载

components: {
	Copm1: () => import("路径/Comp1.vue"),
	Copm2: () => import("路径/Comp2.vue")
},