module.exports、exports、export、export default之间的关系和区别

对于module.exportsexportsexportexport default之间的关系以及他们的区别一直处于懵逼状态的小伙伴,本篇文章带你走进新大陆。

首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念。此处会产生一个疑问,为什么会出现模块化这种东西,模块化规范又是指的什么?

:很久以前,开发网页要通过命名空间的方式来组织代码,例如 jQuery 库将它的 API 都放在了 window.$ 下,在加载完 jQuery 后,其他模块再通过 window.$ 去使用 jQuery。这样做有很多问题,其中包括:

1、命名空间冲突,两个库可能会使用同一个名称,例如 Zepto(http://zepto.com) 也是放在 window.$ 下
2、无法合理地管理项目的依赖和版本
3、无法方便地控制依赖的加载顺序

当项目变大,这种方式将变得难以维护,需要用模块化的思想来组织代码。

模块化的特点:

1、提升开发效率:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。
2、方便后期维护:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。

模块化的规范:

 服务器端规范主要是CommonJS,node.js用的就是CommonJS规范。

 客户端规范主要有:AMD(异步模块定义,推崇依赖前置)、CMD(通用模块定义,推崇依赖就近)。AMD规范的实现主要有RequireJS,CMD规范的主要实现有SeaJS。但是SeaJS已经停止维护了,因为在ES6中已经有了模块化的实现,随着ES6的普及,第三方的模块化实现将会慢慢的淘汰。

本文主要介绍的也是CommonJS和ES6,所以其他的规范请允许我无耻的忽略了,下面进入正题:

一、CommonJS模块规范

CommonJS的核心思想是通过require方法来同步加载依赖的其他模块,通过module.exports到处需要暴露的接口。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

module.exports:

// utils.js
let appid = '123456'
let bar = function (id) {
	return `编号:${id}` 
}
// 通过module.exports将appid与bar暴露出去
module.exports = {
	appid , bar
}

----------------------------------------------------

 let utils = require('./utils') // 通过require引入utils
 console.log(utils.appid) // 12345
 console.log(utils.bar(2)) // 编号:2

exports:

为了方便,Node为每个模块提供一个exports变量指向module.exports。这等同在每个模块头部,有一行这样的命令。

let exports = module.exports;

!!! 这里要注意:

不能直接将exports变量指向一个值,因为这样等于切断了exports与module.exports的联系。

let exports = module.exports
let appid = '123456'
// 错误写法
exports = {
	appid
}
// 正确写法
exports.appid = appid
二、ES6模块规范

不同于CommonJS,ES6使用 export 和 import 来导出、导入模块。

export:

// utils.js
export const appid = '123234'
export function getAppid() {
  return '123456'
}

-------------------------------------------------
// 导出的几种方式:
import { appid , getAppid } from './utils' // 导入多个导出
import * as utils from 'utils' // 作为命名空间导入整个模块
console.log(appid) // 123234
console.log(getAppid ()) // 123456

export default:

使用export default命令,为模块指定默认输出,这里要注意错误的一种写法:

// 错误写法
export default const appid = '123456'
// 正确写法
const appid = '123456'
export default appid

----------------------------------------------------

import utils from './utils' // 导入默认值
console.log(utils) // 123456

顺便介绍一下import常用的几种写法:

import { foo, bar } from ‘./utils’ // 导入多个导出
import * as utils from ‘utils’ // 作为命名空间导入整个模块
import utils from ‘utils’ // 导入默认值
import utils , { foo , bar } from ‘./utils’ // 导入多个导出与默认导出
import { foo , bar } , * as utils from ‘utils’ // 导入命名空间整个模块与多个导出
import(’./utils’).then (res) => { // do something} // import动态导入函数,当使用它的时候,会返回一个promise。
let module = await import(’./utils’) // 支持await关键字

三、相关文档

CommonJS规范,http://javascript.ruanyifeng.com/nodejs/module.html
ES6 Module 的语法,http://es6.ruanyifeng.com/#docs/module
Import用法介绍,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

本月开始学习小程序,会总结小程序专栏文章

  • 7
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小小白zyw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值