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

一.简介
1.module.exportsexportscommonjs的规范
2.exportexport defaultes6的规范
3.requireamd规范引入方式
4.importes6的语法标准

  export exportdefault module.exports
来源 es6(esm) es6(esm) commonjs的规范(smj)
单文件存在个数 多个 1个 1个
导入方式 import {} import +名称 import、require

 

esm和cmj主要区别:

① CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

② CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

二.module.exportsexports的使用

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不能导出匿名函数,因为他本身就是模块的一个属性,只能导出具名函数或者变量。

三.exportexport 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的导出不同

posted on   逍遥云天  阅读(2213)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示