[JavaScript知识库]ES6的模块导入和导出

js在之前的版本中是不支持模块的概念的，一般我们在开发中为了我们的的项目能够多人协作开发，并且每个人定义的变量不会被他人所覆盖，我们会通过一些方式进行控制

1. 把我们的代码写到一个自执行的函数中，然后在函数中定义我们的变量名和方法名，然后我们把这些方法和变量存到一个对象中，最后通过一个对象名把它挂载到window对象上，供外界使用。这种情况虽然解决了大部分的命名冲突问题，但是还会有冲突的出现，他也没有真正的实现模块化。
2. 后来一些js社区出现了一些模块化的解决方案，require.js、sea.js

ES6的真正意义上规范了模块化。

它提供两个方法，导入模块import、导出模块export，导入导出模块也分为很多种

导出模块

分别导出模块,语法：

// module_1.js
// 导出方法
export function fun(){
  console.log('function');
}
// 导出变量
export const a = '我是字符串';

// 导出类
export class Person{
  constructor(j){
    this.name = j.name,
    this.age = j.age;
  }
}

统一导出模块语法：

// module_2.js
// 统一暴漏
// 导出方法
function fun(){
  console.log('function');
}

// 导出变量
const a = '我是字符串';

// 导出类
class Person{
  constructor(j){
    this.name = j.name,
    this.age = j.age;
  }
}
// 这里是es6简写形式
export {fun, a, Person};
// 页可以给上边的名称从新命名
export {fun as abc, b, Person}

默认导出

// module_3.js
// 使用default关键字，来执行默认导出，默认导出只能有一个
export default {
  fun: function(){
    console.log('fun')
  },
  a: '我是字符串',
  person: class Person{
    constructor(j){
      this.age = j.age;
      this.name = j.name;
    }
  }
}

模块的导入

统一导入，通用导入方式

// 导入
import * as module_1 from './module_1.js';
import * as module_2 from './module_2.js';
import * as module_3 from './module_3.js';
// 使用
console.log(module_1);
// 对象形式，{fun:function(), a: '', person: class}
console.log(module_2);
// 对象形式，{fun:function(), a: '', person: class}
console.log(module_3);
// 对象形式，{default: {fun:function(), a: '', person: class}}

此导入方式可以导入上边所有导出的写法，导入的是所有导出的一个结合，

分别导入，结构赋值导入

// 这是利用es6的对象结构赋值，把导出的多有成员项结构出来
import {fun, a, Person} from './module_1.js';

// 这种方式也是，module_2导出的是一个对象，所以直接把对象的项结构出来
//由于上边导入的模块有相同的名字，所以我们可以使用as给导出的项取别名
import {fun as fun1, a as a1, Person as person1} from './module_2.js';

// 由于module_3使用的是default关键字默认导出，
// 所以es6在导出的时候把，default作为键名导出的项对象集合作为键值进行导出
// 这里导入的时候使用 as关键字进行别名设置，这里不能直接写defautl关键字进行导入
import { default as module3} from './module_3.js';

简单导出，只是针对默认导出方式
// 可以省略default，和 as关键字，直接使用别名进行导入
import module3 from './module_3.js';

模块导入导出的使用

ES6的模块导入导出，只有现在的新版本chrome浏览器支持这种写法，同时也可以使用script直接引入，引入方式

<!--如果要在浏览器中直接使用，需要给标签设置一个
type="module"属性来告诉浏览器次引入是ES6的模块语法形式-->
<script src="main.js" type="module"></script>