require和exports,module.exports。import和export,export default

##require和import

首先需要明确的是：

1. 他们都能帮助我导入一些模块
2. 他们的适用范围不一样，require通常来说是用在node中的，在浏览器方面，却不支持。import是es6定义的一个语法标准，具有普适性。

先讲讲require的用法(import会搭配export讲)

首先我们要知道，require导入的是一个对象(如下，我们在test1.js中导入test2.js)

//test2.js文件内是空的

//test1.js
let a = require('./test2.js')
console.log(a);

//结果 可以看到是一个对象
$ node test1
{}

这个时候我们就要问了 我们导出的这个对象，到底是一个什么？

首先我们理解一下原理

我们可以这么理解：在node中，每个文件的的最后，都会return一个module对象，这个module对象里面存在一个exports对象

也就是说 我们导出的是一个module对象

const mudule = {
    //存在不只一个exports对象，仅仅就讨论exports
    exports:{}
}
return module

这个时候有人就会好奇了，我为什么直接exports.xxx = xxx 这样写，也可以

因为为了简化代码

后来专门添加了一个exports对象等于module.exports对象

但是我们导出的还是一个module.exports对象

代码如下：

//test2.js
console.log(exports === module.exports);
//test1.js
let a = require('./test2.js')
console.log(a);
//结果
$ node test1
true
{}

上面为什么会打印输出两个值，一个是true一个是{}

因为根据导入模块的规则，遇见require的时候，会直接去它require的文件先执行，执行完成以后，才会执行本文件。test2.js中的文件的module.exports是一个空对象

这个时候，有人可能会问了，如果我直接给exports赋值 会怎么样？

//test2.js
exports = '123'
//test1.js
let a = require('./test2.js')
console.log(a);
//结果
$ node test1
{}

上面之所以是一个{}，是因为exports 和moxule.exports是对象，是引用类型，所以exports = module.exports是一个浅拷贝。当我们直接改变exports的值的时候 ，存储exports的内存地址的值就会重新指向一个存储我们给exports赋的值的内存地址。

如果不能理解的话，建议看一下js的浅拷贝的知识。网上有很多

export和export default(注意export后面没有s 别跟require里面的exports搞混淆了)

首先需要明确：

1. export 和export default都能导出常量，函数，文件，模块等
2. 在一个文件或者模块中，export 和import可以有多个，但是export default只能有一个
3. 通过export 方式导出的，再用inport 导入的时候，要加上{} 但是export default却不需要
4. export 和 export default可以混合使用

export使用

//导出
export const a = 'xxx'
//对应导入，注意与导出的名称，必须保持一致
import {a} from '地址'



//导出
export funtion a(){
}
//对应导入，注意与导出的名称，必须保持一致
import {a} from '地址'



//一个界面也可以导出多个
export const a = 'xxx'
export funtion b(){
}
//对应导入，注意与导出的名称，必须保持一致
import {a,b} from '地址'

因为export导出的模块，在引用的时候，必须跟导出的模块的名称一致，但是我们如果不想保持名称一致，怎么办？答案就是使用 as 关键字

//导出
export const a = 'xxx'
//导入。注意加上花括号,将导出的模块a 的名字换成 b
import {a as b} from '地址'

同时，如果我们导出的一个模块中，在某一个引入它的模块中，不是全部都需要，怎么办？答案就是按需导入

//导出
export const a = 'xxx'
export const b = 'xxx'
//导入，我们可以仅仅就引用 a 模块
import {a} from '地址'

当然也能混合使用export 和export default

const a= 'xxx'
export default a;
export const b = xxx

//导入 注意export导出的要加上{}
import {a} b from '地址'

export与import的复合 写法

export {foo,bar} from 'xxx'

上面这个东西也就等同于

import {foo,bar} from 'xxx'
export {foo,bar}

如果引入和导出默认的接口

export {default} from 'xxx'

具名接口改成默认接口(最常用到的)

export {xxx as default} from 'xxx'
//等同于 这个时候，讲export 转化为了export default,导入的时候，就需要按照export default的写法
import {xxx} from 'xxx'
export default xxx

//使用的话
import 自定义的名字 from '地址'