前端模块化发展历程

用户6501684338045
113 阅读4分钟

前端模块化

模块化就是将复杂的程序拆分成若干小模块，每个模块有明确定义的功能；有助于降低代码复杂性，提高开发效率，提高前端代码的可维护、可扩展和可重用。

1.手动模块化

早期使用全局function和命名空间，将函数挂在对象的属性上，会有全局命名冲突，难以维护的问题

2.IIFE

使用自执行函数创建闭包，

  • 私有变量和函数在IIFE内部定义，因此无法从外部访问。这有助于隐藏模块的内部实现细节。
  • 通过返回一个包含公共成员的对象，我们可以在外部访问模块的公共部分，这些部分是我们希望公开的
  1. 没有依赖管理： 这种模式不提供依赖管理机制，因此不适合管理模块之间的复杂依赖关系。
  2. 不支持异步加载： 这种模式是同步的，不适用于需要异步加载模块的情况。
  3. 不适合大型应用程序： 随着代码的增长，维护大型IIFE模块会变得困难，因为所有代码都定义在一个函数内。

3.CommonJS

CommonJS 是一种模块化规范，最初是为nodejs设计的，用于管理模块化代码

每个文件就是一个模块，模块的代码被封装在一个独立的作用域中。这意味着在模块内部声明的变量和函数默认情况下是私有的，不会污染全局作用域。

通过require导入，module.exports导出

同步加载： CommonJS 模块是同步加载的，这意味着在模块加载完成之前，后续代码不会执行。这在服务器端JavaScript中通常没有问题，但在浏览器端可能会导致性能问题。

服务器端和客户端通用： CommonJS 最初是为Node.js设计的，但，通过Browserify或Webpack这样的工具浏览器端也可以使用。

[^]: browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 原理？？？TODO

4.AMD和CMD

AMD是一种用于浏览器端的模块加载规范，它允许异步加载模块，以提高性能。RequireJS是AMD规范的一个流行实现。

CMD类似CommonJS 模块是异步加载的，也就是说模块只在需要的时候才会被加载和执行，而不会阻塞后续代码的执行

5.ESM

ES6引入的一种原生的JavaScript模块系统，，它具有清晰的语法、静态分析和优化能力，以及广泛的浏览器和Node.js支持。

ESModule 使用 import 来导入其他模块，并使用 export 来导出模块的功能（默认导出 export default 一个模块可以导出一个默认功能）

静态分析 编译时加载 这意味着模块的依赖关系在编译时就能够确定，而不需要在运行时进行解析（CommonJS AMD）。这可以帮助工具进行更好的代码优化和分析。

有缓存 多次导入 只在第一次执行

支持动态导入，可以在运行时决定导入哪个模块。这对于按需加载模块非常有用 6.模块打包工具

CommonJS和ESM的区别

  1. 语法差异：

    • CommonJS： 使用 require 来导入模块，使用 module.exports 或 exports 来导出模块的功能。
    • ESM： 使用 import 来导入模块，使用 export 来导出模块的功能。ESM的导入和导出语法更接近于现代JavaScript。

  2. 加载时机：

    • CommonJS： CommonJS模块是同步加载的，即模块会在代码执行时立即加载，阻塞后续代码的执行。
    • ESM： ESM模块是异步加载的，模块只有在需要时才会被加载，不会阻塞后续代码的执行。

  3. 静态分析：

    • CommonJS： CommonJS的模块加载是动态的，模块的依赖关系只能在运行时确定，这使得一些静态分析和优化更加困难。
    • ESM： ESM的模块加载是静态的，模块的依赖关系在编译时就能够确定，这使得工具能够更好地进行代码优化和分析。

  4. 导入模块的方式： （类似传值和传地址）

    • CommonJS： CommonJS模块导入的模块是整个模块对象的一个浅拷贝，这意味着模块内对导入模块的修改会影响到其他模块对同一模块的访问。
    • ESM： ESM模块导入的模块是不可变的，即模块内对导入模块的修改不会影响其他模块对同一模块的访问。

  5. 动态导入：

    • CommonJS： CommonJS没有官方支持的动态导入语法，尽管某些实现（如Node.js的实验性模块）提供了这种功能。
    • ESM： ESM支持动态导入，可以在运行时决定导入哪个模块。

  6. 浏览器支持：

    • CommonJS： CommonJS模块在浏览器中需要借助工具（如Browserify）进行转译和加载，不是原生支持。
    • ESM： ESM模块在现代浏览器中得到了原生支持，无需额外的工具。
avatar
文章
阅读
粉丝