commonjs 和 es

2020-07-16  本文已影响0人  罗不错
  1. commonjs
    导入: require
    导出: module.exports or exports.xxxx

  2. es
    导入:import
    导出: export xxx or export default xxx

3.CommonJS模块输出的是一个值的复制,ES6模块输出的是值得引用。
CommonJS模块是运行时加载,ES6模块是编译时输出接口。
第二个差异是因为CommonJS加载的是一个对象(即module.export属性),该对象只有在脚本运行结束时才会生成。而ES6模块不是对象,它的对外接口是一种静态定义,在代码静态解析阶段就会生成。
CommonJS模块输出的是值的复制,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。

//module.js
var num=1;
function add(){
    num++;
}
module.exports={
    num:num;
    add:add;
};
//main.js
var mod=require('./module');
console.log(num);//1
mod.add();
console.log(num);//1

module.js模块加载以后,它的内部变化就影响不到输出的mod.num了,这是因为mod.num是一个原始类型的值,会被缓存。除非写成一个函数,否则得不到内部变动后的值

//module.js
export var num=1;
export function add(){
    num++;
}
//main.js
import {num,add} from './module'
console.log(num);//1
mod.add();
console.log(num);//2

由于ES6输入的模块变量只是一个“符号连接”,所以这个变量是只读的,对它进行重新赋值会报错。

//module.js
export let obj={};
//main.js
import {obj} from './module'
obj.prop=1;//ok
obj={};//TypeError

export通过接口输出的是同一个值,不同脚本加载这个接口得到的都是同样的实例。
ES6模块之中,顶层的this指向的是undefined,CommonJS模块的顶层this指向当前模块,这是两者的一个重大差异。

上一篇下一篇

猜你喜欢

热点阅读