大家好，我是猫小白，本文是前端混同知识点 第一问 ，全文浏览大概须要3 分钟。

我想大家在日常工作中做了很多我的项目，敲了很多代码，然而有时候很多根底的知识点是十分含糊的，或者说是处于混同、搞不清楚的状态，当然包含我在内。

当初一个我的项目的周期很短，借用咱们老板的一句话（应该不会被看到吧）:客户大多数都不晓得本人想要什么啥子，你只有搞快点（周五我要看，没问题涩）做进去给他体验一哈，他才晓得本人应该要啥子货色。所以为了赶进度，大部分工作都是在ctrl+c+ctrl+v。以至于很多基础知识都会淡忘甚至疏忽，可是往往出问题的中央都是因为这些小细节。

所以我想写一个【混同系列】，在我本人学习的过程中，把前端开发过程中容易搞混同，或者容易记错的一些知识点整顿分享进去给大家，大家在评论区能够留言本人容易混同的知识点，一起提高一起学习。

好让咱们开始 【混同系类】 第一问：

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

这三个货色其实是 两个 概念的辨别：
先来看一个表格：

这样看其实还是挺清晰的，不同标准应用的关键词和个性不同而已，咱们在应用这些关键词的时候辨别本人是什么环境下写的代码。

• 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 程序拆分成多个独自模块，并能按需导入的规范。和 webpack，babel 不同的是，esm 是 javascript 的规范性能，在浏览器端和 nodejs 中都已失去实现。应用 esm 的益处是浏览器能够最优化加载模块，比应用库更有效率。通过 import, export 语法实现模块变量的导入和导出

划重点：commonjs中应用 require 和 modelue.exports 实现模块的导入导出，esm 应用 import, export导入导出。

esm的 export 反对：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 defaul t 前面能够间接追随：变量、具体值、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模块标准规定，在 html 中 script标签设置 type='module' 能够书写 ESM 模块代码，包含导入性能：

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

以上。

篇幅无限，有很多没有写到的中央，不过用于辨别这两者来说，曾经足够了。

下一篇写什么好呢？欢送各位大佬评论留言或指出谬误~，感激！

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

往期精彩：

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

2. 什么是迭代器（iterator）？Generator 和它有什么关联