ES6模块与CommonJS模块有什么区别?
ES6 Module和CommonJS模块的区别:
CommonJS是对模块的浅拷贝,ES6 Module是对模块的引用,即ES6 Module只存只读,不能改变其值,具体点就是指针指向不能变,类似const
import的接口是read-only(只读状态),不能修改其变量值。 即不能修改其变量的指针指向,但可以改变变量内部指针指向,可以对commonJS对重新赋值(改变指针指向),
但是对ES6 Module赋值会编译报错。
<script type="text/javascript"> // 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 </script> <script type="text/javascript"> // ES6 Module是对模块的引用 // 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 </script> <script type="text/javascript"> // m1.js export var foo = 'bar'; setTimeout(() => foo = 'baz', 500); // m2.js import {foo} from './m1.js'; console.log(foo); //bar setTimeout(() => console.log(foo), 500); //baz </script>
ES6 Module和CommonJS模块的共同点:
CommonJS和ES6 Module都不可以对引入的对象进行赋值,即对对象内部属性的值进行改变。
但是可以添加属性
<script type="text/javascript"> // lib.js export let obj = {}; // main.js import { obj } from './lib'; obj.prop = 123; // OK obj = {}; // TypeError </script>
好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。