为什么ES模块比CommonJS更好?

2024-06-16 17:20:33

ES6 模块与 CommonJS 模块的差异

1.CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。请看下面这个模块文件lib.js的例子。

// lib.js
var counter = 3;
function incCounter() { counter++;
}
module.exports = { counter: counter,   incCounter: incCounter,
};

上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后，在main.js里面加载这个模块。

// main.js
var mod = require('./lib');  console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块（动态绑定）。

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

// 不能这样写
const flag = true
if (flag) { import $ from 'jquery'
}
// 但是可以这样写
if (flag) { const $ = require('jquery')
}

为什么ES模块比CommonJS更好?

ES模块是官方标准，也是JavaScript语言明确的发展方向，而CommonJS模块是一种特殊的传统格式，在ES模块被提出之前做为暂时的解决方案。ES模块允许进行静态分析，从而实现像 tree-shaking 的优化，并提供诸如循环引用和动态绑定等高级功能。

什么是 ‘tree-shaking’?

Tree-shaking, 也被称为 "live code inclusion," 它是清除实际上并没有在给定项目中使用的代码的过程，但是它可以更加高效。

完

为什么ES模块比CommonJS更好?相关推荐

漫画：深入浅出 ES 模块
翻译自:ES modules: A cartoon deep-dive (https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-div ...
[译] 漫画：深入浅出 ES 模块
原文地址:ES modules: A cartoon deep-dive 原文作者:Lin Clark 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m- 译者:st ...
ES Module 和 CommonJS
一.前言早期的 JavaScript 作为一种脚本语言,其产生的目的只是为了简单的表单验证或动画实现. 并且不需要分离多个 js 文件来写,功能相对简单.只需要内嵌一个 script 标签即可. a ...
Nodejs模块、自定义模块、CommonJs的概念和使用
场景 CommonJs JavaScript 是一个强大面向对象语言,它有很多快速高效的解释器.然而, JavaScript 标准定义的API 是为了构建基于浏览器的应用程序.并没有制定一个用于更广泛 ...
ES6模块与commonJS模块的差异
参考: 前端模块化 ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案. 其模块功能主要由两个命令构成:export和import.export命 ...
模块化:ES Module与commonJS
模块化以及模块化开发: 模块化开发的目的是将程序划分成一个个小的结构,这个结构有属于自己的代码逻辑,有自己的作用域,不会影响到其他的结构,这个结构希望暴露的变量,函数,对象给其他结构使用,也可以通过某 ...
了解一下ES module 和 Commonjs
最近测试了几个 ES module 和 Commonjs 的例子,理解了之前不太理解的概念,记录一下.要是想多了解的可以去看看阮老师的 Module 那部分.会贴一小部分的代码,不会贴所有验证的代码. ...
ES module和commonJS循环引用问题
ES module和commonJS在对于循环引用模块的问题上处理方式不太相同,这是因为它们链接模块的机制不同,具体参考文章: 文章地址: ES module和commonJS循环引用问题
ES Module 和 CommonJS 学习笔记（二） —— NodeJS 中使用 ESM 和 CJS
在 NodeJS 中使用 ES6 模块当前较新版本的 NodeJS 支持 ESM 和 CJS ,但默认使用的是 CJS 规范去解析 JS 代码,直接使用 CJS 是没有任何问题的,而使用 ESM 需 ...

最新文章

热门文章