对比ES6和CommonJS

文章目录

前言
CommonJs 用法
- 导出
- 导入
- 动态导入
- 值的改变
Es Module 用法
- 导出
- 导入
- 值的改变
- `export` 和 `export default` 的区别
CommonJs 和 Es Module对比

前言

js早期没有模块体系，都是通过script标签引入js代码，当项目越来越大时，会出现一些问题，比如：

变量污染，因为js都是顶层作用域
当js文件相互依赖时，问题会更复杂，引入顺序出错时，会报很多错

为了解决以上问题，就出现了模块化，nodejs使用commonJs模块化规范；es6使用Es Module模块化规范。

CommonJs 用法

导出

可以通过 module.exports进行单个导出，多个导出，或者混合导出

common.js 文件

   // 单个导出let a = 1module.exports.a = a// 多个导出let a = 1let b = 2function add(val1,val2){a = val1b = val2return a+b}module.exports ={a, b, add}// 混合导出let a = 1let b = 2function add(val1,val2){a = val1b = val2return a+b}module.exports ={b, add}module.exports.a = a

导出也可以直接用exports，省略module

   let a = 1exports.a = a

注意

导出不可以直接给 exports赋值,因为本质上导出的是module.exports，当给exports重新赋值对象，exports就会指向新的一块内存空间，它与module.exports的连接就断开了。

具体原因可查看： http://t.zoukankan.com/jianxian-p-12150940.html

// 这样导出的内容会是空对象let a = 1let b = 2exports = {a, b}

导入

通过require引入

let commons = require('./commons')
console.log(commons) // {a: 1}

动态导入

因为代码发生在运行时，所以可以动态加载代码

    let lists = ["./index.js", "./config.js"]lists.forEach((url) => require(url)) // 动态导入

值的改变

通过add方法修改common.js文件中的a,b值，a,b 不会发生变化

let commons = require('./commons')
let result = commons.add(9,0)
console.log('index2===>',result,commons.a, commons.b) // 9 1 2

注意

导入的值是拷贝的，所以可以修改拷贝的值，这会引起变量污染，比如先引入index1.js 再引入index2.js
多次加载同一个js，只会加载一次

// index1.js
let commons = require('./commons')
commons.a = 11// index2.js
let commons = require('./commons')
console.log(commons.a) // 11

Es Module 用法

导出

导出分为两种：export 和 export default，两者可以同时存在

ESmodule.js 文件

// 导出单个export var a = 4// 导出多个
var a = 4
var b = 22
function add(val1,val2){a = val1b = val2return val1+val2
}
export  {a, b, add
}
// 或者
export default{a, b, add
}

导入

如果是export导出，则用如下方式导入

import {a, b, add}  from './ESmodule'
add(7,7)
console.log('index1====>', a) // index1===> 7// 或者import * as all from './ESmodule'
console.log('index1====>', all.a) // index1===> 4

如果是export default导出, 则用如下方式导入

    import esData  from './ESmodule'esData.a = '111'esData.add(7,7)console.log('index1====>', esData.a) // index1===>'111'

如果既有export又有export default导出，则用如下方式导入

// 导出
export var a = 4
var b = 22
function add(val1,val2){a = val1b = val2return val1+val2
}
export default  {b  add
}
// 导入import esData， {a}  from './ESmodule'console.log(a, esData.b) // 4 22

值的改变

当是export导出

导出值是值的引用，并且内部有映射关系，所以在导入文件中，不能直接修改值，否则会报错
但是可以通过导出文件的方法，修改导出文件的变量，这样会导致污染变量

   // 导出文件 ESmodule.jsvar a = 4var b = 22function add(val1,val2){a = val1b = val2return val1+val2}export  {a, b, add}// 导入文件import {a, b, add}  from './ESmodule'a = 4// 不可以直接修改，会报错add(7,7)console.log('index1====>', a) // 通过add方法将ESmodule.js中的a的值改变了，这时输出7

当是export default导出

导出值是浅拷贝，所以可以在导入文件中直接修改值
但是不能修改导出文件的值

  //导出文件 ESmodule.jsvar a = 4var b = 22function add(val1,val2){a = val1b = val2return val1+val2}export default{a, b, add}// 导入文件import esData  from './ESmodule'esData.a = 4console.log('index1====>', esData.a) // 可以在导入文件中直接修改值 输出4add(7,7)console.log('index1====>', a) // 通过add方法不能将ESmodule.js中的a的值改 输出4

`export` 和 `export default` 的区别

导出次数不同：export可以导出多次， export default只能导出一次
导入方式不同：export在导入时要加{ }，export default则不需要，并可以起任意名称
值的改变不同：export只能在导出文件中改变值，export default只能在导入文件中改变值

CommonJs 和 Es Module对比

	Es Module	CommonJs
输出方式	export（输出多个） export default（输出一个）	exports(输出多个) module.exports(输出一个)
加载	可以单独加载某个方法（接口）	加载整个模块，即把所有的接口都加载出来
加载时机	解析阶段生成接口并对外输出	运行阶段加载模块
值的变化	输出的是值的引用，原来模块的值改变，则该加载值也变	输出的值是拷贝的，已经加载的值，会使用缓冲，即原来模块的值改变，不会影响已经加载的该值
this指向	指向undefned	指向该当前模块

对比ES6和CommonJS相关推荐

ES6模块加载方案 CommonJS和AMD ES6和CommonJS
目录 CommonJS CommonJS和AMD的对比 ES6和CommonJS 改成ES6 exports和module.exports CommonJS 每个文件就是一个模块,有自己的作用域.在一 ...
es6和commonJs的区别
一.export语句的区别: ES6 和 CommonJS 是两种不同的 JavaScript 模块化规范,它们的 export 语句有一些区别: export 关键字:在 ES6 中,使用 expo ...
ES6模块化+CommonJS
ES6 模块化简介在ES6模块化规范诞生之前,JavaScript社区已经尝试提出了AMD.CMD.CommonJS等模块化规范. 但是,这些由社区提出的模块化标准,有一定的差异性和局限性,并不是浏 ...
ES6与CommonJS的模块化加载
两个差异 CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. 什么是值的拷贝,值的引用? 所谓值的拷贝,是在栈内存当中实现的,是一个复制的过程,复制之后两个值互不影响值的引用 ...
es6 混合commjs_Webpack打包ES6和CommonJs混合React
在学习React过程中一直都是用ES6和ES7中的特性,使用原先的基本配置已经不能满足要求了.必须对现有的配置进行升级. 下面我说一下我的React环境的升级过程. 最开始我们使用 # npm ins ...
es6与java的相似度,特斯拉Model Y对比蔚来ES6！这次对比结果出乎意料
[汽车之家车型PK] 刚进入2021年,车市热点就已经来了.元旦第一天,特斯拉(中国)Model Y已正式公布售价,33.99万-36.99万元的价格确实给了大家一个惊喜:但着急买车的朋友不要忘了, ...
模块打包之CommonJS与ES6模块比较初探
Time: 20190920 模块是具有特定功能的组成单元,不同模块负责不同的工作,然后会以某种方式联系到一起,形成完整的程序逻辑. CommonJS CommonJS是2009年社区提出的,包含模块 ...
Webpack 打包commonjs 和esmodule 模块的产物对比
这篇文章不涉及 Webpack 的原理,只是观察下 Webpack 对 commonjs 和 esmodule 模块打包后的产物,读完后会对模块系统有个更深的了解. 环境配置 Webpack 只配置入 ...
es6 - 解构赋值
一我们为什么要使用解构在学习ES6新的特性解构赋值之前,我们先来看看为什么要使用解构,以前如果我们需要获取对象或者数组里面的数据,并且把它们存入数组,需要写很多代码.如下 const person ...

对比ES6和CommonJS

文章目录

前言

CommonJs 用法

导出

导入

动态导入

值的改变

Es Module 用法

导出

导入

值的改变

`export` 和 `export default` 的区别

CommonJs 和 Es Module对比

对比ES6和CommonJS相关推荐

最新文章

热门文章

对比ES6和CommonJS

文章目录

前言

CommonJs 用法

导出

导入

动态导入

值的改变

Es Module 用法

导出

导入

值的改变

export 和 export default 的区别

CommonJs 和 Es Module对比

对比ES6和CommonJS相关推荐

最新文章

热门文章

`export` 和 `export default` 的区别