ES6 模块与 CommonJS 模块的差异
ES6 模块与 CommonJS 模块完全不同。它们有两个重大差异
CommonJS 输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,ES6静态分析,动态引用,输出的是值的引用,值改变,引用也改变,即原来模块中的值改变则该加载的值也改变。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
CommonJS 加载的是整个模块,即将所有的接口全部加载进来,ES6 可以单独加载其中的某个接口(方法),
CommonJS this 指向当前模块,ES6 this 指向undefined
CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。
例子
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
ES6模块化
// 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
Tips:
从上面我们看出,CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。而ES6 模块是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。
另外CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
目前阶段,通过 Babel 转码,CommonJS 模块的require命令和 ES6 模块的import命令,可以写在同一个模块里面,但是最好不要这样做。因为import在静态解析阶段执行,所以它是一个模块之中最早执行的。
ES6 模块与 CommonJS 模块的差异的更多相关文章
- ES6模块与CommonJS模块的差异
ES6模块与CommonJS模块的差异 讨论 Node 加载 ES6模块之前,必须了解 ES6模块与 CommonJS模块完全不同. 它们有两个重大差异. CommonJS模块输出的是一个值的拷贝,E ...
- ES6模块与CommonJS模块有什么区别?
ES6 Module和CommonJS模块的区别: CommonJS是对模块的浅拷贝,ES6 Module是对模块的引用,即ES6 Module只存只读,不能改变其值,具体点就是指针指向不能变,类似c ...
- commonJS模块规范 和 es6模块规范 区别
ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口. Commo ...
- commonjs模块和es6模块的区别?
commonjs模块和es6模块最主要的区别:commonjs模块是拷贝,es6模块是引用,但理解这些,先得理解对象复制的问题,在回过头来理解这两模块的区别. 一.基本数据类型的模块 ./a1.js ...
- es6 模块和commonjs规范模块的区别
相关代码地址:https://github.com/blank-x/blog-code/tree/main/1-module 引入变量 es6 导入变量只是一个符号链接,是个常量,类似于const 声 ...
- es6 模块与commonJS的区别
在刚接触模块化开发的阶段,我总是容易将export.import.require等语法给弄混,今天索性记个笔记,将ES6 模块知识点理清楚 未接触ES6 模块时,模块开发方案常见的有CommonJS. ...
- commonjs模块和es6模块的区别
commonjs模块与es6模块的区别 到目前为止,已经实习了3个月的时间了.最近在面试,在面试题里面有题目涉及到模块循环加载的知识.趁着这个机会,将commonjs模块与es6模块之间一些重要的的区 ...
- CommonJS 模块规范 1.1.1
本规范致力于描述一类可以同时适用于客户端和服务器端的模块系统.该系统中的模块拥有自己的作用域,可以从其他模块导入单例对象,或者对外提供 API. Require require 是一个函数对象. re ...
- "浏览器端" 使用 commonjs 模块规范开发网页应用,像开发 node 那样开发网页应用
Containjs 1.0 Containjs 是什么? Containjs 是一个基于 Commonjs 模块管理规范的 浏览器端 的 JavaScript 模块加载器(目前为非标准的,代码会持续迭 ...
随机推荐
- 微软笔记工具OneNote
闲来无事,就在网上找找记笔记的软件工具.发现了微软的OneNote. 门槛还是比较高的:需要微软账户,安装也比较慢.不过用起来体验不错.除了干净的界面,功能也不错,还能同步到云端,这样你随时随地都可以 ...
- Makefile ------ 在Makefile中进行宏定义-D
在Makefile中我们可以通过宏定义来控制源程序的编译.只要在Makefile中的CFLAGS(变量名随意)中通过选项-D来指定你于定义的宏即可. 如:CFLAGS += -D _YUQIANG在编 ...
- Springmvc和poi3.9导出excel并弹出下载框
Springmvc 和 poi3.9 用java程序从数据库导出数据到excel(在博客园的第一篇原创博客) @RequestMapping(value = "/importexcel.ht ...
- java的排序类 Collections
场景:比如说有一个List<Student> 里面有许多学生 我们想让这些学生按照年龄的大小排序 我们可以用java自带的 java.util.Collections 工具类来实现 Col ...
- window下nginx负载均衡简单配置-----权重的实现
下面介绍一个在window下的nginx的负载均衡配置. 需要你在你的电脑上跑两个tomcat.一个8080,一个9080. 需要一个nginx服务器. 需要修改本机的host 注意:我们这里配置不会 ...
- POJ - 2828 Buy Tickets(线段树单点更新)
http://poj.org/problem?id=2828 题意 排队买票,依次给出当前人要插队的位置,每个人有个编号,然后问你最后整个的序列是什么? 分析 最后一个人的要插入的位置是确定的,所以逆 ...
- POJ No.3255 Roadblocks 求次短路径
#define _CRT_SECURE_NO_WARNINGS /* 7 10 0 1 5 0 2 2 1 2 4 1 3 2 2 3 6 2 4 10 3 5 1 4 5 3 4 6 5 5 6 9 ...
- Python中变量的属性以及判断方法
1.变量的属性 在Python中,创建一个变量会给这个变量分配三种属性: id ,代表该变量在内存中的地址: type,代表该变量的类型: value,该变量的值: x = 10 print(id(x ...
- VUE优秀的组件库总结
VUE组件库 vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/z ...
- 使用ResourceBundle读取配置文件
在Java语言中,使用一种以.properties为扩展名的文本文件作为资源文件,该类型的文件的内容格式为类似: 12 #注释语句 some_key=some_value 形式.以#开头的行作为注释行 ...