commonjs和es6的module的区别,ES6 Modules 相对于 CommonJS 的优势是什么?

　　什么是CommonJs和Es模块？有什么区别？下面这篇文章告诉你CommonJs和Es模块以及它们的区别，希望对你有帮助！

为什么会有CommonJs和Es Module呢

　　我们都知道，在早期，JavaScript模块的概念是通过脚本标签引入js文件代码的。当然，写基本的简单需求是没有错的，但是当我们的项目越来越大的时候，我们会引入更多的js文件，然后就会出现以下问题：

　　js文件的作用域在顶层，会造成变量污染很多js文件，很难维护js文件依赖问题，很少注意顺序引入错误，代码中报告所有错误。为了解决上面的问题，JavaScript社区想出了CommonJs，这是一个模块化的规范，包括现在的NodeJs也使用了一些CommonJs的语法。然后Es6版本后来正式加入了Es Module模块，两者都解决了上述问题，那么解决了什么问题呢？

　　解决变量污染的问题，每个文件都有独立的作用域，所以没有变量污染来解决代码维护的问题。一个文件中的代码可以很清楚的解决文件依赖的问题，一个文件可以很清楚的看到那么我们下面来一一了解它们的语法及弊端吧依赖于哪些其他文件。

CommonJs 基本语法

　　导出

　　CommonJs使用module.exports导出变量和函数，也可以导出任何类型的值。参见下面的案例。

　　//导出对象

　　模块.导出={

　　姓名：“蛙人”，

　　年龄：24，

　　性别：“男性”

　　}

　　//导出任何值

　　Module.exports.name= frogman

　　module.exports.sex=null

　　module.exports.age=未定义直接导出

　　也可以省略module关键字进行导出，或者直接编写export进行导出，如下例所示。

　　Exports.name= frogman

　　exports . sex= male exports . name= frogman

　　exports.sex=male

　　出口={

　　姓名：“蛙人”

　　}在上面的例子中，这种情况会改变对象的引用值，导出无效，所以最后导出的是name，sex。

　　混合导出

　　混合导出、导出和模块导出可以同时使用，没有任何问题。

　　Exports.name= frogman

　　module.exports.age=24导入

　　CommonJs使用require语法来导入。如果你想要一个单一的值，你可以通过解构对象得到它。

　　//index.js

　　Module.exports.name= frogman

　　module.exports.age=24

　　let data=require(。/index.js )

　　console . log(data)//{姓名：蛙人，年龄：24}重复导入

　　无论是CommonJs还是Es模块都不会重复导入，也就是这个文件一旦已经加载进去，我再导入就不会生效了。

　　let data=require(。/index.js )

　　Let=require(。/index . js )//不会在动态导入之后执行

　　CommonJs支持动态导入。你什么意思？您可以在语句中使用require语法。我们来看以下案例。

　　let lists=[。/index.js“，”。/config.js]

　　lists . foreach((URL)=require(URL))//动态导入

　　if (lists.length) {

　　Require(lists[0]) //动态导入

　　}导入值的变化

　　CommonJs导入的值是复制的，你可以修改复制的值，但是会造成变量污染，一不小心就改名了。

　　//index.js

　　设num=0；

　　模块.导出={

　　num，

　　add() {

　　数字

　　}

　　}

　　让{ num，add }=require(。/index.js )

　　console.log(num) //0

　　添加()

　　console.log(num) //0

　　Num=10在上面的例子中，你可以看到exports导出的值是值的副本，Num的值在改变后没有改变，我们也可以修改imported num的值。

　　总结

　　CommonJs解决了变量污染、文件依赖等问题。上面我们也介绍了它的基本语法。它可以动态导入(代码在运行时发生)，不能重复导入。

Es Module 基本语法

　　导出

　　Es模块中有两种导出：单次导出默认导出。导入时，单个导出不会像CommonJs那样直接导入所有值。在Es模块中，你可以导入我想要的值。那么默认导出都是直接导入。当然，任何类型的值都可以在Es模块中导出。

　　//导出变量

　　出口常量名称=蛙人

　　出口常数=24

　　//导出功能也可以是

　　导出函数fn() {}

　　导出常量测试=()={}

　　//如果不止一个

　　Const name=蛙人

　　const sex=男性

　　导出{姓名，性别}混合导出

　　您可以同时使用“导出”和“导出默认值”,并且互不影响。你只需要在导入的时候注意。如果文件中有混合导入，必须先导入默认导出值，然后再导入单个导入值。

　　出口常量名称=蛙人

　　出口常数=24

　　导出默认值{

　　fn() {}，

　　消息：“你好，蛙人”

　　}导入

　　Es模块使用导入语法来导入。如果想要单个导入，必须使用大括号{}，注意：这里的花括号跟解构不一样。

　　//index，js

　　出口常量名称=蛙人

　　出口常数=24

　　从导入{ name，age }。/index.js

　　Console.log(姓名，年龄)//蛙人 24

　　//如果里面都是单个导出，我们想直接全部导入，可以这样写。

　　全部从导入*。/index.js

　　console . log(all)//{姓名：蛙人，年龄：24}混合导入

　　混合导入，该文件中使用了混合导入。默认情况下，必须首先导出import语句，然后进行单次导出。顺序必须正确，否则将会报告错误。

　　//index，js

　　出口常量名称=蛙人

　　出口常数=24

　　导出默认值{

　　消息：“蛙人”

　　}

　　从导入邮件{ name，age }。/index.js

　　Console.log(msg) //{msg:蛙人 }在上面的例子中，如果导入的名字不想和原来的名字一样，可以给它起别名。

　　//index，js

　　出口常量名称=蛙人

　　出口常数=24

　　导出默认值{

　　消息：“蛙人”

　　}

　　从导入{默认为all，name，age }。/index.js

　　Console.log(all) //{msg:蛙人 }导入值的变化

　　导出的值是对值的引用，内部有映射关系，这就是export关键字的作用。此外，导入的值不能修改，即它是只读的。

　　//index.js

　　导出字母编号=0；

　　导出函数add() {

　　数字

　　}

　　从导入{ num，add }。/index.js

　　console.log(num) //0

　　添加()

　　console.log(num) //1

　　Num=10 //抛出错误Es Module是静态

　　也就是说，Es模块语句` ` import只能在文件的顶部声明，并且该语句不能动态加载。Es模块语句在代码编译时运行。

　　如果(真){

　　从“xxx”导入XXX/报告了错误

　　}总结

　　Es模块还解决了变量污染和依赖顺序的问题，语法更加灵活。导出的值也是导出的引用，导出的变量是可读的，这增强了代码的可读性。

CommonJs和Es Module的区别

　　CommonJs

　　CommonJs可以动态加载语句，代码在运行时由CommonJs混合导出时发生。它仍然是一个语法，但是没有必要声明前面的对象。当我导出参考对象时，先前的导出会被覆盖。CommonJs导出的值是一个副本，可以修改导出的值。代码错误时，难以检查并造成变量污染Es Module。

　　Es模块是静态的，语句不能动态加载。它只能在文件的顶部声明，代码在编译时出现。

　　Es模块混合导出、单一导出、默认导出，彼此完全独立。

　　Es模块导出引用值之前有映射关系，值可读，不可修改。

　　字体感谢您在百忙之中点击这篇文章。希望对你有帮助。如果你有任何问题，请给我你的帮助。

　　我是蛙人。如果我觉得我能写出来，请给我一个赞。

　　有关编程的更多信息，请访问：编程视频！也就是说CommonJs和Es模块是什么？有什么区别？更多详情请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。