js模块导入导出——exports、module.exports、export、export default、的使用和区别
一.简介
1.module.exports和exports是commonjs的规范
2.export和export default是es6的规范
3.require是amd规范引入方式
4.import是es6的语法标准
export | exportdefault | module.exports | |
来源 | es6(esm) | es6(esm) | commonjs的规范(smj) |
单文件存在个数 | 多个 | 1个 | 1个 |
导入方式 | import {} | import +名称 | import、require |
esm和cmj主要区别:
① CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
② CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
二.module.exports和exports的使用
module变量代表当前模块,这是个对象,会创建exports属性(默认空对象)
//hello.js var sayHello = function(){ console.log('sayHello') } var sos=110; var app={ name:'App' } module.exports={
sayHello,
sos,
app
}
exports是module.exports的一个引用
//导出方式1 exports.sayHello=function(){
console.log('sayHello')
}
exports.app={name:'App'}
导入方式都是一样的
//require.js let hello = require('./hello'); hello.sayHello() console.log(hello.sos)
//导入方式2
import {sayHello} from './hello'
注:
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的导出不同
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库