ES6模块与CommonJS模块有什么区别？

小咪咪 2023-08-17 15:55 147阅读 0赞

ES6 Module和CommonJS模块的区别：  
CommonJS是对模块的浅拷贝，ES6 Module是对模块的引用,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似const  
import的接口是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向,可以对commonJS对重新赋值（改变指针指向），  
但是对ES6 Module赋值会编译报错。

<script type="text/javascript">
                // CommonJS是对模块的浅拷贝
                // lib.js
                var counter = 3;
                function incCounter() {
                    counter++;
                }
                module.exports = {
                    counter: counter,
                    incCounter: incCounter
                };
                // main.js
                var mod = require('./lib');
                
                console.log(mod.counter);  // 3
                mod.incCounter();
                console.log(mod.counter); // 3
            </script>
            <script type="text/javascript">
                // ES6 Module是对模块的引用
                // lib.js
                export let counter = 3;
                export function incCounter() {
                  counter++;
                }
                
                // main.js
                import { counter, incCounter } from './lib';
                console.log(counter); // 3
                incCounter();
                console.log(counter); // 4
            </script>
            <script type="text/javascript">
                // m1.js
                export var foo = 'bar';
                setTimeout(() => foo = 'baz', 500);
                
                // m2.js
                import {foo} from './m1.js';
                console.log(foo); //bar
                setTimeout(() => console.log(foo), 500); //baz
            </script>

ES6 Module和CommonJS模块的共同点：  
CommonJS和ES6 Module都不可以对引入的对象进行赋值，即对对象内部属性的值进行改变。  
但是可以添加属性

<script type="text/javascript">
                // lib.js
                export let obj = {};
                
                // main.js
                import { obj } from './lib';
                
                obj.prop = 123; // OK
                obj = {}; // TypeError
            </script>

转载于:https://www.cnblogs.com/wangxi01/p/11590106.html

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 CommonJS与ES6模块化规范

CommonJS规范 1. 暴露单个关键字 exports.xxx = xxx const sum = (a,b) => {

￡神魔★判官ぃ/ 2023年10月11日 15:19/ 0 赞/ 58 阅读

相关 ES6模块与CommonJS模块有什么区别？

ES6 Module和CommonJS模块的区别： CommonJS是对模块的浅拷贝，ES6 Module是对模块的引用,即ES6 Module只存只读，不能改变其值，具体

小咪咪/ 2023年08月17日 15:55/ 0 赞/ 148 阅读

相关 commonJS和ES6模块化的区别

commonJS和ES6模块化一、简述区别 1.语法差异 2. 什么是运行时加载呢？ 3. 什么是编译时加载或静态加载呢？

朴灿烈づ我的快乐病毒、/ 2022年12月27日 11:07/ 0 赞/ 252 阅读

相关 ES6 模块与 CommonJS 模块的差异

它们有三个重大差异。 CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

Myth丶恋晨/ 2022年11月19日 04:24/ 0 赞/ 188 阅读

相关前端模块化(CommonJS、AMD、CMD、ES6模块化区别)

文章目录一、模块化的理解 1.什么是模块? 2.模块化的进化过程 2.1全局function模式 : 将不同的功能封

快来打我*/ 2022年11月14日 15:59/ 0 赞/ 553 阅读

相关 CommonJs模块规范和ES6模块规范

引用 [https://blog.csdn.net/zhushikezhang/article/details/79667870][https_blog.csdn.net_zh

曾经终败给现在/ 2022年10月27日 02:30/ 0 赞/ 331 阅读

相关 es6模块与 commonJS规范的区别

文章转载自：[https://www.jianshu.com/p/16af8b54384a][https_www.jianshu.com_p_16af8b54384a] co

清疚/ 2022年09月16日 13:26/ 0 赞/ 256 阅读

相关 ES6 模块与 CommonJS 模块的差异

前面我们已经对ES6的模块化规划和CommonJs的模块化规范已经介绍过了，所以今天我们主要聊聊这两种模块化的差异，如果对这两种模块化规范不是特别了解的，可以点击[ES6模块化

朱雀/ 2022年05月24日 20:28/ 0 赞/ 280 阅读

相关 ES6模块和CommonJS模块相互转换

ES6模块和CommonJS模块相互转换这里写目录标题 ES6模块和CommonJS模块相互转换写在前面 ES6模块和Commo

梦里梦外;/ 2021年07月26日 14:16/ 0 赞/ 745 阅读

相关 ES6 模块化与 CommonJS 模块化区别

ES6 模块化与 CommonJS 模块化区别在最近的项目中关于 ES6 的 import、export 和 CommonJS 中的 module.exports、re...

朱雀/ 2020年07月01日 18:29/ 0 赞/ 923 阅读