require() ,module.exports ,expor

简介
本文为自己对require() ，module.exports， exports，import， import（），export， export default的使用及区别的总结。

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()动态加载，加载完返回一个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
2. export和export default接收方式不同， export defrault导出的可以用任意变量接受，
export必须名字对应，即对象结构的方式接受。
import xx ,{hello,str,defaul,arr} from './aa';
import静态导入参考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import)

以上为总结的全部内容，参考如下
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