模块化的过程

76 阅读2分钟
  • 开始,是以文件的划分,来进行模块化处理,但是,会有命名冲突和模块加载顺序的问题
  • 第二种是以命名空间的方式,通过给window添加属性挂载对应模块,来进行命名冲突的解决,但是安全性欠佳,因为可以随意修改模块里面的属性
  • 第三种是IIFE(立即执行函数)来进行模块化处理,让第二种方式的安全性得到提升,各自拥有各自的作用域.
  • 最后还是没有解决模块加载循序错误,会导致程序bug的问题,接下来CommonJSAMD 和 ES Module就依次出现了.
  • 首先,是commonJs,这是nodejs用来解决模块化的方式,代码中使用 require 来导入一个模块,用module.exports来导出一个模块,这个解决方式,只能够在服务器端使用,并且是同步的,虽然有第三方库实现了在浏览器使用,但是由于commonJs是同步执行的方式,所以,由于浏览器的渲染引擎和js引擎互斥,在加载模块的过程中,会导致加载变慢.
  • 接着,AMD出现,全称为Asynchronous Module Definition,即异步模块定义规范.可以在浏览器中使用异步加载模块,不会造成渲染堵塞了.AMD 通过 define 去定义或加载一个模块,通过define加载模块时,可以通过传入另一个模块,来解决依赖顺序的问题.AMD还可以通过require来加载一个模块,但是不能定义模块.但是由于AMD没有得到浏览器的支持,需要第三方库的支持,如requireJS.最后因为AMD使用起来比较复杂,所以,还是比较欠妥
  • 接着UMD,这个处理规范,和CMD类似,只是兼容 AMDCommonJS 的一个模块化方案,可以同时运行在浏览器和 Node.js 环境
  • 最后,ES Module诞生了,简称esm.这个规范已经得到了现代浏览器和nodeJs的支持,所以它二种环境都支持.但是在浏览器环境中需要在script标签添加type="module"才能开启,在Node环境中,需要在package.json中添加type: "module". 最后vite框架,就是运用了这个,在开发时实现了no-bundle,即不需要打包,让开发效率得到很大的提升.