exports与module.exports的区别,以及export与export.defult的区别

exports与module.exports的区别,以及export与export.defult的区别

 

在 JS 模块化编程的模块引入上, 主要有两种方式:

  • CommonJS 模块标准
  • ES6 moduel 特性

1. CommonJS

模块引入:require()

模块导出:exports 或者 module.exports

exports 与 module.exports 区别

1.1 exports 方式:

a.js(导出):

const name = 'cedric' 

exports.name = name  

b.js(引入):

const a = require('./a.js')
console.log(a)      // { name: 'cedric' }


// 或者
// const { name } = require('./a.js')
// console.log(name)      // 'cedric'

1.2 module.exports 方式:

  • 方式一(不推荐):

a.js(导出):

const name = 'cedric' 

module.exports = name

b.js(引入):

const name = require('./a.js')

console.log(name)     // 'cedric' 
  • 方式二(推荐):

a.js(导出):

const name = 'cedric' 

module.exports = {
    name
}

b.js(引入):

const a = require('./a.js')
console.log(a)     // { name: 'cedric' }


// 或者
// const { name } = require('./a.js')
// console.log(name)      // 'cedric'

1.3 注意:

  • exports 返回的是模块函数,module.exports 返回的是模块对象本身,返回的是一个类
  • CommonJS 方式普遍用于node中模块的编写
  • 一个模块文件中可以有多个exports输出,但只能有一个module.exports输出

1.4 当有多个变量或函数需要输出时:


使用 exports

a.js:

const name = 'cedric'
const age = 18

function fun () {
    console.log('abc')
}

exports.name = name
exports.age = age
exports.fun = fun

b.js:

const a = require('./a.js')

a.fun()  // abc
console.log(a)   // { name: 'cedric', age: 18, fun: [Function: fun] }

使用 module.exports

a.js:

const name = 'cedric'
const age = 18

function fun () {
    console.log('abc')
} 

module.exports = {
    name,
    age,
    fun,
}

b.js:

const a = require('./a.js')

a.fun()  // abc
console.log(a)   // { name: 'cedric', age: 18, fun: [Function: fun] }

2. ES6 moduel

  • 模块引入:import
  • 模块导出:export 或者 export default

2.1 注意

  • 在一个文件或模块中,export可以有多个,export default 只能向外暴露一次
  • 通过export方式导出,在导入时要加{ },export default则不需要
  • Node 不支持 ES6 moduel 特性,解决方法是用 babel 编译

export与export.defult的区别

2.2 export

a.js(导出):

export const name = 'cedric'

export function fun () {
    console.log('abc')
} 

导入:

import { name, fun } from './a'

console.log(name) // cedric
console.log(fun)  // fun: [Function: fun]
fun()             // abc

2.3 export default

a.js(导出):

function fun () {
    console.log('abc')
}

export default fun

// 或者:
// export default function fun () {
//     console.log('abc')
// }

导入:

import fun from './a'
 
console.log(fun)  // fun: [Function: fun]
fun()             // abc

关于export default 中的 default

实际上,a.js 文件的 export default 输出一个叫做 default 的变量,所以,当import的模块引入 a.js 时,系统允许你为它取任意变量名。所以,如下一般会使用方式:

a.js(导出):

export default () => {
    console.log('abc')
}

导入:

import 任意名称 from './a'
 
console.log(任意名称)  // () => { console.log('abc'); }
任意名称()             // abc 

posted on   漫思  阅读(2)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2023-02-15 “开源 core-js 也许是我一生中最大的错误”
2023-02-15 如何解决Reporting Services目录数据库文件存在的问题
2023-02-15 怎么处理Reporting Services目录数据库文件存在的问题?
2023-02-15 Redis配置以及通过C#访问小试
2023-02-15 从 Newtonsoft.Json 迁移到 System.Text.Json
2023-02-15 动态Entity Framework查询:Dynamic Query 介绍
2023-02-15 asp.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
点击右上角即可分享
微信分享提示