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

Wesley13
• 阅读 1120

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>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java 复制Map对象(深拷贝与浅拷贝)
java复制Map对象(深拷贝与浅拷贝)CreationTime2018年6月4日10点00分Author:Marydon1.深拷贝与浅拷贝  浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
JS 中的require 和 import 区别
在研究react和webpack的时候,经常看到在js文件中出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是@import1.ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。Require是CommonJS的语法,CommonJS的模块是对象,输入时
Wesley13 Wesley13
3年前
CommonJS,ES2015,AMD,CMD区别
本文你将学到:1.Rollup是什么2.CommonJS、AMD、CMD、UMD、ES6分别的介绍3.ES6模块与CommonJS模块的区别4.模块演进的产物——TreeShaking5.TreeShaking应该注意什么本文所有例子都存放于https://github.com/hua1995116
Stella981 Stella981
3年前
ES6 模块化(Module)export和import详解
ES6模块化(Module)export和import详解ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能
Stella981 Stella981
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这