簡介
本文為自己對require() 彼绷，module.exports巍佑， exports，import寄悯， import（）萤衰，export， export default的使用及區(qū)別的總結猜旬。

1. module.exports 與exports與require()

（1）module.exports的使用

module.exports 導出的接口（可以是函數/對象/數組/字符串）

實例1 導出一個函數

var a=function(){ 
    console.log('我是a--賦值函數')
}
module.exports = a

實例2 導出一個數組

var arr=[1,2,3]
module.exports = arr

實例3 導出一個對象

var a=function(){
     console.log('我是a--賦值函數')
}

function b(){ 
    console.log('我是b函數')
}

var str='helle world'

var arr=[1,2,3]

module.exports = {a,b,str,arr}

（2）module.exports.屬性 或 exports.屬性 的使用
module.exports.屬性===exports.屬性脆栋，兩種寫法都是一樣的倦卖，這樣導出的模塊是一個實例化對象。

但是注意４徽Ｅ绿拧！
前提是該模塊中沒有使用 module.exports +導出模塊這種方式秦踪。即地（1）中描述的那種方式嘉竟。如果同時使用第（1）和第（2）中方式，則第二中方式導出的將會無效洋侨。

module.exports = {a,b,str,arr}
 exports.name=function(){}
 exports.age=function(){}

image.png

所以只能選擇其中一種方式進行導出舍扰。

（3）require的使用
語法1

require( [路徑]，callback)

第一個參數：在數組里面寫路徑希坚。
第二個參數：回調函數边苹。第一個參數返回的接口將作為回調函數的參數。
例子

導入部分代碼
require( ['./func1.js'] , function(a){console.log(a)} )

打印結果為

1.png

接口部分的代碼
var a=function(){ console.log('我是a--賦值函數')}
function b(){ console.log('我是b函數')}
var str='helle world'
var arr=[1,2,3]
module.exports = {a,b,str,arr}

語法2

require( './name.js')

如果不需要回調函數可直接這樣寫裁僧，也可先賦給一個變量个束。
如

var m=require( './name.js')
m.data()

注意注意！Ａ钠！茬底！
如果是通過第（1）中方式導出的，導出什么require的就是什么获洲，如果是第（2）種方式阱表，則是一個實例化對象。
第一種方式

function b(){ console.log('我是b函數')}
module.exports=b

require( './func1.js')()

image.png

第二種方式

function b(){ console.log('我是b函數')}
module.exports.func=b

var requiretest=require( './func1.js')
console.log(requiretest)
requiretest.func() //requiretest是一個對象贡珊，屬性func,值為函數

1.png

2. import 與import(),export與export default
（1）import 與import()一樣最爬，只是import()動態(tài)加載，加載完返回一個promise對象门岔，并將返回的接口作為then中回調函數的參數爱致。

import()
.then( module=>{console.log(module)} )
.catch( err=>{console.log(err.message)} )

import('./fun.js').then(function(a){console.log(a)})

例子

導入模塊
console.log(import('./fun.js'))
import('./fun.js').then(function(a){console.log(a)})

----------------------------------------------------------------------
接口模塊
export var hello=function(){
    alert('hello');
}
export var say=function(){
    alert('i love you');
}
export var haha=function(){
    alert('haha');
}
export default  haha=function(){
    alert('haha');
}
export var str='dddd'

1.png

2.png

注意點

import()加載模塊成功以后，這個模塊會作為一個對象寒随，當作then方法的參數糠悯。因此，可以使用對象解構賦值的語法妻往，獲取輸出接口互艾。

（2）export與export default
export導出方式1

export var hello=function(){
    alert('hello');
}
export var say=function(){
    alert('i love you');
}
export default  haha=function(){
    alert('haha');
}
export var str='dddd'

export導出方式2

var hello=function(){
    alert('hello');
 }
 var say=function(){
    alert('i love u');
 }
 var str='hahahah';
 var defaul={'name':'xm',age:1}
 var arr=[1,2,3]
 export {hello,str,defaul,arr}

注意：
1. export default相當于export { a as default} 即
export default {hello,str,defaul,arr}相當于
export { {hello,str,defaul,arr} as default }

var hello=function(){
    alert('hello');
 }
 var say=function(){
    alert('i love u');
 }
 var str='hahahah';
 var defaul={'name':'xm',age:1}
 var arr=[1,2,3]
//  export {hello,str,defaul,arr}
export default {hello,str,defaul,arr}//相當于export {a as default}

1.png

以上為總結的全部內容判帮，參考如下
http://www.cnblogs.com/pigtail/archive/2013/01/14/2859555.html
https://blog.csdn.net/ixygj197875/article/details/79263912
https://blog.csdn.net/qq_28702545/article/details/54892562
https://www.cnblogs.com/libin-1/p/7127481.html