微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ES6模块和Commonjs的差异

ES6模块和Commonjs的差异

  • Commonjs 是 nodejs 中的模块化工具,只能使用在服务器端,而ES6模块是 客户端开发的模块化工具,只能使用在客户端

  • Commonjs 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

Commonjs


// module.js
  let count = 3;
const doCount = function(){
    count ++;
}
module.exports = {count, doCount};
// main.js
let obj = require('./CommonjsModule.js');
console.log(obj.count); // 3
obj.doCount();
console.log(obj.count); // 3

变量count没有改变,所以count是拷贝了值

ES6模块

// module.js
let count = 3;
function doCount(){
    count ++;
}
export {count, doCount}; // 导出一个对象

// main.js
import {count, doCount} from './ES6module.js'; // 属性的解构赋值
console.log(count); // 3
doCount(); // count ++
console.log(count); // 4

变量count发生了改变,所以count是引用的

  • Commonjs 模块是运行时加载,ES6 模块是编译时输出接口。
  // ES6语法
   if(condition){
        import ....
    }else{
        import ....
    }
    // 报错

    // Commonjs语法
    if(condition){
        require('module1') 
    }else{
        require('module2')
    }
    // 允许
  • Commonjs 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。
  • Commonjs 导入的一定是一个对象,但可以使用一个对象变量接受,也可以使用解构赋值,但前者更加常用,ES6一般返回一个对象,一般使用{}解构赋值接收,当然也可以使用 * 接受真的对象, 当有一个default值时,直接返回default,不确定是不是对象
  // ES6模块语法
  // 解构赋值
  import {db, users} from './constants/index.js';
  //  * 作为对象
  import * as obj from './ES6module.js'
  // default
  import mydefault from './default.js';

  // Commonjs语法
  const http = require('http');
  const {get,post} = require('./axios');

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐