likes
comments
collection
share

【混淆系列】一问:module.exports、exports、export都是导出,有何区别?

作者站长头像
站长
· 阅读数 22
大家好,我是猫小白,本文是前端混淆知识点第一问,全文阅读大约需要3分钟。

我想大家在日常工作中做了很多项目,敲了很多代码,但是有时候很多基础的知识点是非常模糊的,或者说是处于混淆、搞不清楚的状态,当然包括我在内。

【混淆系列】一问:module.exports、exports、export都是导出,有何区别?

现在一个项目的周期很短,借用我们老板的一句话(应该不会被看到吧):客户大多数都不知道自己想要什么啥子,你只有搞快点(周五我要看,没问题涩)做出来给他体验一哈,他才知道自己应该要啥子东西。所以为了赶进度,大部分工作都是在ctrl+c+ctrl+v。以至于很多基础知识都会淡忘甚至忽略,可是往往出问题的地方都是因为这些小细节。

所以我想写一个【混淆系列】,在我自己学习的过程中,把前端开发过程中容易搞混淆,或者容易记错的一些知识点整理分享出来给大家,大家在评论区可以留言自己容易混淆的知识点,一起进步一起学习

好让我们开始【混淆系类】第一问

module.exports、exports、export有什么区别?

这三个东西其实是两个概念的区分:先来看一个表格:

规范名称导出关键词导入关键词重命名变量集体导出
commonjsmodule.exports / exportsrequire{A :B }不支持
esmexportimportas* as xxx

这样看其实还是挺清晰的,不同规范使用的关键词和特性不同而已,我们在使用这些关键词的时候区分自己是什么环境下写的代码。

  • nodejs(webpack,babel)->commonjs,
  • 浏览器(vue的script标签 或 html 中带type="module"的script标签中)-> esm。
  1. module.exports、exports是一伙的,他们都是基于commonjs规范来的。
  2. export是基于es6的esm(ECMA Script Modules)规范来的。

commonjs规范:

CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式,可以使每个模块它自身的命名空间中执行。该规范的主要内容是,模块必须通过 module.exports 导出对外的变量或接口,通过 require() 来导入其他模块的输出到当前模块作用域中。

列子:

// moduleA.js
module.exports.double = function( value ){
    return value * 2;
}
// moduleB.js
var { double } = require('./moduleA');
var res = double(4);
console.log(res) //8

为了方便,某些情况下module.exports可以简写为exports。其实一开始exports就是module.exports的引用。

module.exports===exports //true

所以上面的moduleA.js ,可以这样省略掉module

// moduleA.js
exports.double = function (value) {
    return value * 2;
}
// moduleB.js
var { double } = require('./moduleA');
var res = double(4);
console.log(res) //8

module.exports后面跟着赋值语句时,不能省略module.,为什么?我们接着看

一开始 module.exports全等于 exports 我们可以看成在文件开头有这样的代码:

module.exports = {};//方便理解 一开始是空对象
let exports = module.exports;
console.log(module.exports===exports)//true

所以在exports对象{}上添加任何的新属性,其实就是在module.exports上添加属性,因为我们知道node中对象也是引用类型的。

如:

exports.double = function (value) {
    return value * 2;
}

exports.PAI = 3.1415926535897932384626 //233,我可以背这么多位~
exports.add = function (a, b) {
    return a + b;
}

危!给exports赋值就不行了

module.exports = {};//方便理解 一开始是空对象
let exports = module.exports;

//给exports 赋值会切断和 module.exports 的联系

//这样 不要这样做~!
exports = {
    name: 'zhangsan'
}
//或这样  不要这样做~!
exports = function name(a) {}
//或这样  不要这样做~!
exports = 3.1415926535897932384626
console.log(module.exports); // 打印:{} 回到初始{}值
console.log(exports);  // 打印:3.1415926535897932384626

console.log(module.exports === exports); //false 你走的独木桥 我走我的阳关道 已经莫得关系了
 

如果要使用赋值来导出,可以这样导出一个对象:


// moduleA.js
module.exports = {
    name:'法外狂徒张三',
    age:'19',
    wife:'隔壁小红'
}

// moduleB.js
let { name, wife } = require('./moduleA');
console.log(name,age) //法外狂徒张三 隔壁小红

这样module.exports就能保证获取到值。

如何重命名

commonjs中重命名导出的变量用()符号:

let { name, wife:girlfriend } = require('./moduleA');

esm(ECMA Script Modules)规范

现在来说我们在编写vue或者react项目中熟悉的es6 module规范。

esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和webpackbabel不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以最优化加载模块,比使用库更有效率。通过importexport语法实现模块变量的导入和导出

划重点:commonjs中使用requiremodelue.exports实现模块的导入导出,esm 使用 importexport导入导出。

esmexport支持:let、var、const、function、class等 以下都是正确的导出方式:

var person = {
    name: '猫小白',
    text: a,
}
export {
    person,
}
export function showAge() {
    console.log(person.age);
}
export let city = '成都'
export const PAI = '3.141592653'
注意:export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 错误1
export 3.14;

// 错误2
var api = 3.14;
export api;
这俩种写法都是错误的,因为export后面直接跟了一个具体的,外部无法通过一个特定的标识(变量)来获取这个值。

export default 默认导出

commonjs规范先进一点的是 esm 提供了一种默认导出的方式。export default后面可以直接跟随:变量、具体值、function、calss

//正确
let a = '张三';

export default a
//正确
export default 3.14

export default function (a) {
    return a * a
}
//正确
let sum = function (a, b) {
    return a + b
}
export default sum
//正确
function calc(a, b) {
    return a + b
}
export default calc

如何重命名

ESM中提供了as关键词对导出的变量重命名,防止变量名重复。

import { wife as girlfrend } from "./moduleA.js";

想要导出所有方法或变量为指定的一个变量时,可以用 import * as mod from "xxxx"

import * as tool from "./moduleA.js";
console.log(tool.API) //3.141592

ESM模块规范规定,在htmlscript标签设置 type='module' 可以书写ESM模块代码,包括导入功能:

<script type="module">
    import { name,wife } from "./es6/moduleA.js"
    console.log(name,wife); //法外狂徒张三 小红
    //...其它代码
</script>

以上。

篇幅有限,有很多没有写到的地方,不过用于区分这两者来说,已经足够了。

【混淆系列】一问:module.exports、exports、export都是导出,有何区别?

下一篇写什么好呢?欢迎各位大佬评论留言或指出错误~,感谢!

肯请各位大佬,不要忘了给我点赞评论收藏

往期精彩:

1.【包真】我的第一次webpack优化,首屏渲染从9s到1s

2. 什么是迭代器(iterator)?Generator和它有什么关联