commonjs模块和es6模块的区别?

commonjs模块和es6模块最主要的区别:commonjs模块是拷贝,es6模块是引用,但理解这些,先得理解对象复制的问题,在回过头来理解这两模块的区别。

一、基本数据类型的模块

./a1.js es6模块

export var a1 = 1;
setTimeout(() => a1 = 2, 500);

./a2.js commojs模块

var a2 = 2;
module.exports = a2;

setTimeout(() => a2 = 3 ,500);

./index.js 输出

import { a1 } from ‘./a1‘;
const a2 = require(‘./a2‘);

setTimeout(() => console.log(a1, a2), 1000); // 2,2

现在修改一下./index.js

import { a1 } from ‘./a1‘;
// const a2 = require(‘./a2‘);

// a1 = 1; //编译报错
var a2 = require(‘./a2‘);
a2 = ‘a2‘;

setTimeout(() => console.log(a1, a2), 1000); // 2 ‘a2‘

得出结论是:es6模块是引用,且只存在只读状态,不能修改其变量值(说的更准确点,不能修改其变量的指针指向,但可以改变内部指针指向,在复杂数据类型的模块会讲解);commonjs是拷贝,且能修改其值(者就叫修改指针指向),至于是深拷贝还浅拷贝,也会在在复杂数据类型的模块会讲解

一、复杂数据类型的模块

./a1.js es6模块

export const person = {
    name: ‘lc‘,
    friends: [‘xm‘,‘xh‘]
};
setTimeout(() => person.name =‘liangcheng‘, 500);

./a2.js commojs模块

var dog = {
    name: ‘xsz‘, // 不要猜测是谁的名字
    owner: [‘lc‘]
};
module.exports = dog;

setTimeout(() => dog.name = ‘xushizhou‘ ,500);

./index.js 输出

import { person } from ‘./a1‘;
const dog = require(‘./a2‘);

setTimeout(() => console.log(person.name, dog.name), 1000); //liangcheng xushizhou

得到结论:两者都动态修改其内属性或者元素的值,也就是说commonjs是浅拷贝

总结一下:

es6模块的特点:

  1. 静态化,必须在顶部,不能使用条件语句,自动采用严格模式
  2. treeshaking和编译优化,以及webpack3中的作用域提升
  3. 外部可以拿到实时值,而非缓存值(是引用而不是copy)

es6模块和commonjs模块的区别:

  1. 可以对commonjs模块重新赋值,对es6模块重新赋值会编译报错
  2. commonjs是对模块的拷贝(浅拷贝),es6是对模块的引用(也就是说,es6模块只存只读,不能改变其值,具体点就是指针指向不能变,类似const)

es6模块和commonjs模块的相同点:

  1. 两者都可以对对象内部属性的值进行改变

原文地址:https://www.cnblogs.com/liangcheng11/p/8417557.html

时间: 2024-10-09 05:52:23

commonjs模块和es6模块的区别?的相关文章

Es6模块语法

/** * Created by Administrator on 2017/4/15. */ /*---------------------export命令---------------------*/ //Es6 的模块加载 //defer是"渲染完再执行",async是"下载完就执行". //浏览器对于带有type="module"的<script>,是异步加载,等同于打开了<script>标签的defer属性. /

关于commJS 和 es6 的一些区别

CommonJS模块与ES6模块的区别 本文转自 https://www.cnblogs.com/unclekeith/archive/2017/10/17/7679503.html CommonJS 对于基本数据类型,属于复制.即会被模块缓存.同时,在另一个模块可以对该模块输出的变量重新赋值. 对于复杂数据类型,属于浅拷贝.由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块. 当使用require命令加载某个模块时,就会运行整个模块的代码. 当使用require

对于模块加载:ES6、CommonJS、AMD、CMD的区别

运行和编译的概念 编译包括编译和链接两步. 编译,把源代码翻译成机器能识别的代码或者某个中间状态的语言. 比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.还简单的作一些比如检查有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程. 链接,是把编译生成的二进制文件,组合成为一个系统可以执行的可执行文件. 运行: 把编译出来的可执行文件代码在系统中执行的过程,此时被装载到内存中. (代码保存在磁盘上没装入内存之前是个死家伙.只有跑到内存中才变成活的). 运行时类型检查就

ES6 模块与 CommonJS 模块的差异

ES6 模块与 CommonJS 模块的差异 区别 CommonJS 模块 ES6 模块 原因 起作用的时机 CommonJS 模块是运行时加载(运行时) ES6 模块是编译时输出接口(编译时) CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成.而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成. 模块输出 CommonJS 模块输出的是一个值的拷贝 ES6 模块输出的是值的引用 出处:http://es6.

面向未来的 ES6 模块标准

既然模块化已经越来越重要,那么从语言层面上直接去解决这个问题就显得很有必要(况且其他语言早就有了).于是 ES6 直接在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案. 设计思想 简单来说,ES6 模块的设计思想就是:一个 JS 文件就代表一个 JS 模块.在模块中你可以使用 import 和 export 关键字来导入或导出模块中的东西. ES6 模块主要具备以下几个基本特点: 自动开启严格模式,即使

理解ES6的模块(Understanding ES6 Modules)

理解ES6的Modules 原文出处: Understanding ES6 Modules. 基础(Basic) 在ES6中,每个模块的都是定义在它自己的文件中.在模块中定义的变量或者是函数在外部都是不可见的, 除非你显示的使用export来导出它们. 这意味着你可以在你的模块中编写代码, 然后只导出那些需要被其他部分可以访问的部分几个. ES6模块是使用原生的定义方式进行定义的. 如果想从一个模块中导出某个变量, 只需要使用关键词export. 相似的, 如果想要使用来自另外一个模块中的变量,

ES6模块的import和export用法总结

ES6之前以前出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs前者主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件

【转】Commonjs规范及Node模块实现

前言: Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于javascript的,在javascript中的顶层对象是window,而在node中的顶层对象是global [注意]实际上,javascript也存在global对象,只是其并不对外访问,而使用window对象指向global对象而已 在javascript中,通过var a = 100:是可以通过wi

ES6模块的import和export用法

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以