美文网首页
ES6模块与CommonJS的区别

ES6模块与CommonJS的区别

作者: 南蓝NL | 来源:发表于2019-07-13 13:00 被阅读0次

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

CommonJs模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化不会影响到这个值

// common.js
var count = 1;

var printCount = () =>{ 
   return ++count;
}

module.exports = {
     printCount: printCount,
     count: count
};
 // index.js
let v = require('./common');
console.log(v.count); // 1
console.log(v.printCount()); // 2
console.log(v.count); // 1

你可以看到明明common.js里面改变了count,但是输出的结果还是原来的。这是因为count是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动的值。将common.js里面的module.exports 改写成

module.exports = {
     printCount: printCount,
     get count(){
         return count
     }
};

这样子的输出结果是 1,2,2
而在ES6当中,写法是这样的,是利用export 和import导入的

// es6.js
export let count = 1;
export function printCount() {
     ++count;
}
// main1.js
import  { count, printCount } from './es6';
console.log(count)
console.log(printCount());
console.log(count)

ES6模块是动态引用,并且不会缓存,模块里面的便令绑定其所在的模块,而是动态地去加载值,并且不能重新复制

另外还想说一个export default

 let count = 1;
 function printCount() {
     ++count;
} 
export default { count, printCount}
// main3.js
import res form './main3.js'
console.log(res.count)

相关文章

  • 2019-08-12

    import函数 CommonJS模块和ES6模块的区别 exports与module.exports的区别 mo...

  • AMD、CMD、CommonJs、ES6的对比

    一、CommonJS 和 ES6 区别: 1.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。...

  • 浏览器内核

    一、区别: 1.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。 2.CommonJS 模块的r...

  • 2019-11-25

    commonJs和es6模块的区别 commonJs支持动态加载模块,导入模块的路径可以是一个依赖执行的变量,也可...

  • [学习笔记]CommonJS和 es6 module区别

    无模块时有哪些问题1.命名冲突2.无依赖管理 CommonJS 和 es6 module的区别: CommonJS...

  • ES6 模块与 CommonJS 模块的差异

    讨论 Node.js 加载 ES6 模块之前,必须了解 ES6 模块与 CommonJS 模块完全不同。impor...

  • 2019-12-12 模块化

    阮一峰 commonjs ES6 的模块化 export 和 export default 的区别 export导...

  • JS模块化

    模块化规范:CommonJS,AMD,CMD,UMD,ES6 Module CommonJS CommonJS是服...

  • Webpack工程化笔记(六):ES6 Module与Commo

    CommonJS与ES6 Module最本质的区别在于前者对模块依赖的解决是“动态”的,而后者是“静态”的,这里动...

  • 2019-02-25

    1、https密钥交互的过程 2、ES6模块和CommonJs的区别 3、['1','2','3'].map(pa...

网友评论

      本文标题:ES6模块与CommonJS的区别

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