由import和require引出的JS模块化Module

问题来源import的大括号、import和require
在学习的过程中，经常发现import的内容会加个花括号

import {XXX} from 。。。

一开始觉得是不是解构赋值呢？可是我们大多数情况下根本不知道API内部的结构怎么进行结构赋值呢？

然后，在一些早一些的材料中发现引入文件都是用的require，但是自己开发时发现用的都是import，这二者又是什么关系呢？

由这两点出发开始查阅资料发现引出了一个大的概念JS模块化Module。

模块化规范

模块化有很多规范require和import都是其中的一种

• CommonJS :Node.js
• AMD（异步模块定义）:require.js
• CMD（阿里推出的，很早就不维护了）:sea.js
• ES6

ES6的模块化规范（使用import）

import的大括号中的内容和原文件中的文件中的属性名必须是完全一样的，不然会找不到（针对一个对象的解构赋值）。

1、最基本的方式

导出：
export const a = xxxx;
export const b = xxxx;
导入：
import {a,b} from 'xxxxxx';

2、统一导出（稍微方便点，一般使用这个不用第一种）

导出：
const a = 1;
const b = 2;
const c = 3;
const d = function(){};
export {a,b,c,d};

import {a,b,c,d}

3、取名字（和结构赋值中的方法不同，要使用as）

import {
    a as aa,
    b as bb
}

注意起了别名之后原来的名字就不能使用了！！！

4、解答第一个问题：我们不一定了解内部的全部结构
有时候我们用import引入是直接用一个自己取的名字引入的而且不用写大括号。这个时候就要讲到一个关键字default（在使用脚手架时见到过）。

注意：export在一个模块中可以使用很多次，但是default只能用一次。
注意要先定义好再导出，不能：

export default const a = 1;

导出：
export default {
      a,
      b,
      c,
      d
}
导入：
import aa from 'xxxx'

console.log(aa.a);

也可以使用*代表所有内容。

import * as mod from 'xxxx'

但是使用属性的方法不同，因为这个时候返回的是一个model.

console.log(mod.default.a);

5、二者混用

导出：
export default a;
export const b = 1;
导入：
import aaa,{bbb} from 'xxxxx';

关于require

所以require和import都是为了实现模块化，只不过是标准不一样罢了。
对于二者之间的区别还是要了解一下：
1、require是需要赋值的，在运行中才会执行。而import不需要赋值，在编译时就会执行。
2、require可以看做是一个全局的方法，但是import必须要写在顶部（毕竟编译的顺序是从上到下）。