美文网首页
es6 module和commonJs对比

es6 module和commonJs对比

作者: 甘道夫老矣 | 来源:发表于2022-11-28 14:29 被阅读0次

    1.CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
    CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值

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

    JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值

    // A.js
    export let num= 1;
    export function incCounter() {
      num++;
    }
    
    // main.js
    import { num, incCounter } from './A';
    console.log(num); // 1
    incCounter();
    console.log(num); // 2
    

    2.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口
    3.CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段

    类型 加载方式 同步或异步 输出
    CommonJS 动态导入 同步 输出值拷贝
    es6module 静态导入 异步 输出值引用,需要的时候去加载模块取值

    相关文章

      网友评论

          本文标题:es6 module和commonJs对比

          本文链接:https://www.haomeiwen.com/subject/tqdliltx.html