ES6模块化

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。

ES6的模块化分为导出（export）与导入（import）两个模块

export的用法

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）
比如：
1.基本语法

/* 1.js */
console.log("1模块加载了");
export const a=12;
export const b=5;
export const c=101;

2.如果要输出多个变量可以将这些变量包装成对象进行模块化输出

/* 4.js */
import {
	a,
	b
} from './5.js';
const sum = () => {
	console.log(a + b);
	return a + b;
}
const show = () => {
	console.log('执行了show');
	return 1;
}
class Person { //类-->构造函数
	constructor(name, age) { //结构
		this.name = name;
		this.age = age;
	}
	showName() {
		return `我的名字是${this.name}`;
	}
}
export {
	a,
	b,
	sum,
	show
}
export default {
	Person
}

3.如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

/* aa.js */
const a=12;
const b=5;
const c=102;

export{
	a as aaa,  //as鍚庣殑鍒悕
	b as banana,
	c as cup
}

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

// 使用default的情况下，导入时import a 此时的a不需要花括号
export default 12;   //default 默认,缺省

import（导入）用法

用法一：

import {a,b,c} from './modules/1.js';
			console.log(a,b,c);

用法二：

// CDN 导入
			import 'https://code.jquery.com/jquery-3.3.1.js';
			setTimeout(()=>{
				$(function(){
					$('body').css('background','red');
				})
			},3000)

用法三：

// as 被导入变量的别名
			import {aaa as a,banana as b,cup as c} from './modules/2.js';
			console.log(a,b,c);

用法四：

// 将所有的导入内容作为一个对象 mod
			import * as mod from './modules/aa.js';
			console.log(mod);
			console.log(mod.aaa);