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 '地址'