本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。
es6与commonjs有什么区别
一、CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
commonjs的用法,我们一起来看一下
1.首先创建一个lib.js的文件
// lib.js const counter = 3; const incCounter = ()=>{ counter++ } module.exports = { counter, incCounter }
2.再次创建一个main.js,使用commonjs的方式导入
// main.js var lib = require('./lib'); console.log(lib) console.log(lib.counter); // 3 lib.incCounter(); console.log(lib.counter); // 3
lib.js模块加载以后,它的内部变化就影响不到输出的lib.counter了。这是因为mod.counter是一个原始类型的值,会被缓存;
esmodule的用法,我们一起来看一下
// lib.js export let counter = 3; export function incCounter () { counter++; }
// main.js import { counter, incCounter } from './util.mjs' console.log(counter); //3 incCounter() console.log(counter) //4
ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。
补充:通过esmodule导入的变量是不能重新赋值修改的。
二、CommonJS 模块是运行时加载,ES6 模块是编译时输出接口
// CommonJS模块 let { stat, exists, readFile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile;
上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。因此commonjs属于再运行时才会加载模块的方式。
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高;
三、CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段
同步加载:所谓同步加载就是加载资源或者模块的过程会阻塞后续代码的执行;
异步加载:不会阻塞后续代码的执行;
我们来看一个案例,创建如下的目录;
| -- a.js | -- index.js | -- c.js
// a.js console.log('a.js文件的执行'); const importFun = () => { console.log(require('./c').c); } importFun() module.exports = { importFun }
// index.js const A = require('./a'); console.log('index.js的执行');
// c.js console.log('c.js的运行'); const c = 3 module.exports = { c }
执行命令 node index.js
// a.js文件的执行 // c.js的运行 // 3 // index.js的执行
我们会发现,require的内容会阻塞后续代码的执行。因为c.js先打印出来,然后在是index.js的打印,所以说require()是同步加载的;
// a.js console.log('a.js文件的执行'); export const importFun = () => { import('./c.js').then(({c})=>{ console.log(c) }) } importFun()
// index.js import {importFun} from './a.js' console.log('index.js的执行');
// c.js console.log('c.js的运行'); export const c = 3
// 结果 // a.js文件的执行 // index.js的执行 // c.js的运行 // 3
可以看的出来:import()是异步加载资源的,因为c.js是在index.js的后面打印出来的,并不会阻塞后续代码的执行;
总结:以上便是commonjs和esmodule的几个区别
1: CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
2: CommonJS 模块是运行时加载,ES6 模块是编译时输出接口
3: CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段
【相关推荐:javascript视频教程、web前端】