阅读 195

CommonJS 与 ES6 Module 的区别

这两者的主要区别主要有以下两点:

  1. 对于模块的依赖,CommonJS是动态的,ES6 Module 是静态的
  2. CommonJS导入的是值的拷贝,ES6 Module导入的是值的引用

exports和module.exports

//首先明白
exports === module.exports //true
//也就是说他们指向同一个地址
//相当于
let module = {
  exports:{
    ...
  }
}
let exports = module.exports
复制代码

export和export default

//export.js
export default function App() {}
class Clock extends React.Component {};
const a = 1;
export { Clock, a}

//import.js
import App, {Clock as Clock1,a} from './export.js';
复制代码

区别一

对于模块的依赖,何为动态?何为静态? 动态是指对于模块的依赖关系建立在代码执行阶段; 静态是指对于模块的依赖关系建立在代码编译阶段; 上文提到,CommonJS导入时,require的路径参数是支持表达式的,例如

// A.js
let fileName = 'example.js'
const bModule = require('./' + fileName)
复制代码

因为该路径在代码执行时是可以动态改变的,所以如果在代码编译阶段就建立各个模块的依赖关系,那么一定是不准确的,只有在代码运行了以后,才可以真正确认模块的依赖关系,因此说CommonJS是动态的。 那么现在你也应该也知道为什么 ES6 Module 是静态的了吧

区别二

为了验证这一点,我准备用实例来演示一下 首先来验证CommonJS,代码如下

// B.js
let count = 3
function change() {
    count ++    // 变量count + 1
    console.log('原count值为:', count);  // 打印B.js模块中count的值
}
module.exports = {
    count,
    change
}
// A.js
let count = require('./B.js').count 
let change = require('./B.js').change
console.log('改变前:', count);   
change()     // 调用模块B.js中的change方法,将原来的count + 1
console.log('改变后:', count); 
// 运行A.js文件的结果
改变前:3
原count值为:4
改变后:3
复制代码

在上述代码中我们可以看到,在A.js文件中导入了B.js文件中的变量count和 函数change,因为导入的count只是对原有值的一个拷贝,因此尽管我们调用了函数change改变了B.js文件中变量count的值,也不会影响到A.js文件中的变量count 根据这个结果得出结论:CommonJS导入的变量是对原值的拷贝 接下来再来验证一下ES6 Module,代码如下

// B.js
let count = 3
function change() {
    count ++        // 变量count + 1
    console.log(count);   // 打印B.js模块中count的值
}
export {count, change}
// A.js
import {count, change} from './B.js';
console.log('改变前:',count);
change()         // 调用模块B.js中的change方法,将原来的count + 1
console.log('改变后:', count);
// 运行A.js文件的结果
改变前:3
原count值为:4
改变后:4
复制代码

相比较于CommonJS的结果,ES6 Module导入的变量count随着原值的改变而改变了 根据这个结果得出结论:ES6 Module导入的变量是对原值的引用

文章分类
前端
文章标签