前言大家好，我是Lesedi，一个自学的前端菜鸟，准大三学生，暑假找了实习，工作量不大很多。我只是想扩展知识的边界。为了激励自己，我决定以写博客的形式来检验自己的掌握程度。因天资不足，学问难免有疏漏或错误。欢迎大家批评指正。如果我的文章能帮到您，我感到非常荣幸！概述在JavaScript的早期，没有模块化的概念。引用第三方包时，变量直接绑定到全局环境---globalimport。这种全局导入方式会带来两大问题。问题变量污染：所有脚本都在全局上下文中绑定变量。如果存在重名，后面的变量会覆盖前面的变量，造成变量污染。依赖混淆：当多个脚本相互依赖时，它们之间的关系不明确，很容易混淆。在这样的背景下，迫切需要“模块化”开发来规范代码，于是各种JavaScript模块化规范应运而生--->我们今天用得最多的，有两点需要了解——-->CommonJS、ESMoudle模块化给我们带来的好处是避免变量污染：因为每个模块都是独立的，所以变量或函数名重复不会影响影响，提高可靠性可维护性：因为每个模块都是独立的，各司其职，在后续迭代或维护，只修改需要的模块即可。性能优化：异步加载模块的页面性能非常好。CommonJSCommonJS的发明作者希望它能让客户端和服务端使用同一套规范。但CommonJS主要用于服务器端。最初叫ServerJS，应用于Node服务器端。本规范的核心概念是：将每个文件视为一个模块。CommonJS的特点是每个文件都是一个独立的模块，有一个独立的范围文件，可以重复引用和加载。第一次加载时会缓存起来，再次引用时会直接从缓存中读取。加载模块时，module.exports输出值的副本。该值一旦输出，模??块中的变化不会影响输出值。CommonJS导出的三个核心变量：记录当前模块导出的变量module：记录当前模块的详细信息require：importexternalmodulesExample://a.jsfunctiontest(){console.log('amodularinstance');}functionsayHi(){console.log('Hello');}//如果不导出，则默认无法访问//导出该方法对外暴露//module.exports=test//当你想同时导出多个方法时，写module.exports={//ES6的文字增强写法//test:test,test,sayHi}//index.js//require是关键字用于引入外部文件，接收的参数是外部文件的路径letmoduleA=require('./a')//这里test()方法赋值给moduleA，所以调用时也用到了moduleA。当然这里的名字是自定义的，前后可以对应。console.log(moduleA.test,moduleA.sayHi);//[Function:test][Function:sayHi]//调用这个方法moduleA.test()//一个模块化的例子moduleA.sayHi()//HelloES6ModuleES6Module的设计思想是尽量做到静态，所以模块的依赖关系以及输入和输出变量可以在编译期间确定。NodeJS可以通过mjs后缀或者在package.json中加入"type":"module"来使用，一般选择后者，一劳永逸！"type":"module"//该字段有两个值--->commonjs,module,默认是common，所以如果不设置，node默认遵循commonJS规范使用示例：//ModuleA.jsconstModuleA={printInfo(){console.log('这是ESModule!');}}//这个方法只能导出一个exportdefaultModuleA//ModuleB.jsconstModuleB={whoIam(){return"IamLesedi"}}//这个导出方法可以导出多个export{ModuleB//...}//index.jsimportModuleAfrom"./Module.js/ModulaA.js";//用export导出，必须使用解构方法import--->{}wrappedimport{ModuleB}from"./Module.js/ModuleB.js"ModuleA.printInfo()//这是ESModule！console.log(ModuleB.whoIam());//我是Lesedi的总结与展望这是我的第一篇官方博文，心里有些忐忑。如果写的有什么不对的地方，希望大家帮忙指出，谢谢！最后希望自己能坚持下去，定期产出一些文章
