脚本宝典收集整理的这篇文章主要介绍了前端入门：前端模块化的介绍(CommonJS和ES6 Modules），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.前端模块化的由来

早期的js只是用来做一些简单的表单验证等操作，代码直接写在script标签里就好，随着AJAX出现之后，我们需要将代码分配到不同的js文件里，这是就会出现一些问题：比如全局变量重名。

我们想到可以使用立即执行函数来保护内部的变量，并把结果值返回出去并声明一个变量来接受，如果返回的值有很多的话可以返回一个对象来存放这些值。

也就是说我们在立即执行函数内部定义一个对象，将需要暴露出去的各种属性和方法加入这个对象中，最后把这个对象返回出去即可，返回的对象就是一个模块。

2.常用的前端模块化方法

CommonJS, AMD, CMD, ES6 Modules等（核心都是导入和导出）

3.CommonJS介绍

CommonJS通过module.exports语法导出，通过require语法导入。CommonJS也可以通过exports语法导出，实际上module.exports和exports指向的都是我们要导出的那个对象，所以可以同时使用他们对要导出的对象进行修改。但是当我们对exports进行赋值以后，exports就不再指向我们要导出的那个对象了，此时操作exports就没有作用了，但是如果我们对module.exports赋值的话，导出的就是我们对module.exports赋的值，这说明CommonJS中真正控制模块导出的是module.exports。

CommonJS不支持重复导入，导入一次之后第二次就不会再重复执行了；CommonJS支持动态导入，可以通过语句来动态的使用require语法导入模块。

CommonJS导入的是值的拷贝，也就是说我们可以修改commonJS导入的值。

4.ES Modules介绍

ES Modules通过export指令来导出变量，也可以导出函数或者类。或者可以通过export default导出，但是export default导出的东西有且只能有一个。

ES Modules通过import指令来导入变量，用{}来导入export指令导出的变量，当导入export default导出的变量时可以不加花括号，此时导入的就是默认导出的变量。

当我们使用ES Modules命令的时候，需要在导入的script标签上加上type='module'让浏览器可以解析对应的语法。

如果我们想让模块中所有的信息都导入，可以使用import * as all from './main.js'这种语法来进行导入。通常情况下我们需要在as后面给*起一个别名方便我们使用。

export导出的值是原本值的引用，是只读状态不可以修改。

以前的ES Modules不可以通过语句来动态导入，只能卸载文档的最上方。ES2020新增了动态导入模块的方法，不同于静态的import,我们可以通过通过import()方法来动态的导入我们需要的模块。

脚本宝典总结

以上是脚本宝典为你收集整理的前端入门：前端模块化的介绍(CommonJS和ES6 Modules）全部内容，希望文章能够帮你解决前端入门：前端模块化的介绍(CommonJS和ES6 Modules）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。