js模块导入导出——exports、module.exports、export、export default、的使用和区别-526互联

一.简介
1.module.exports和exports是commonjs的规范
2.export和export default是es6的规范
3.require是amd规范引入方式
4.import是es6的语法标准
二.module.exports和exports的使用

module变量代表当前模块，这是个对象，会创建exports属性（默认空对象）

//hello.js
var sayHello = function(){
    console.log('sayHello')
}
var sos=110;
var app={
    name:'App'
}

exports.sayHello=sayHello;
exports.sos=sos;
exports.app=app;
//或者直接export.app={...}

exports是module.exports的一个引用

//导出
exports.sayHello=function(){
    console.log('sayHello')
}

exports.app={name:'App'}

导入方式都是一样的

//require.js
let hello = require('./hello');
hello.sayHello()
console.log(hello.sos)

注：

1.把exports理解为module.exports的一个子项就好了，无论使用哪个，require最终引入的都是module.exports；

2.exports不能导出匿名函数，因为他本身就是模块的一个属性，只能导出具名函数或者变量。

三.export和export default的使用

//export default 
let name='jack';
let sayHello=function(){
    console.log('hello')
}
export default{
    name,
    sayHello
}

export default name1='jerry'
export default {name2:'bob'}
export default {fn:function(){
    console.log('hello')
}}

//引入
import test from 'app.js'//test可以随意取名字
test.sayHello();

//export
export let name='jack';
export function sayHello(){
    console.log('hello')
}

//引入
import {name,sayHello} from 'app.js'
import {sayHello as fun1} from 'app.js'
import * as app from 'app.js'
sayHello();

注意事项：

1.import和export命令只能在模块的顶层

2.export default只能导出一个元素，export可以导出多个

3.export default 可以导出对象、变量、函数等，可以不具名，但是export导出的必须具名

4.export default和export的导出不同