前端模块化

什么是模块化?

在程序设计领域,模块就是为完成某一个功能的一段程序或者子程序

一个文件可以是一个模块,一个文件夹也可以是一个模块。模块的思想完美的符合了设计模式中的单一职责原则。只做一件事,或者一类事,分清任务的边界。

为什么需要模块化?

模块化的目的是将任务细分,在现阶段的软件工程阶段,模块化的方式可以将一个大任务分给不同的人或组织,每个人所负责的模块相对独立而又互为依存关系。而在开源领域和工程复用阶段,模块化可以让我们更方便的站在人民群众的肩膀上,众人拾薪柴火高。使我们可以更多的关注业务逻辑,而不用过分在意实现细节。

现阶段前端有哪些模块化方式?

现阶段前端模块化规范有这几种,AMD(Asynchronous Module Definition,CMD(Common Module Definition),CommonJs,Es6 Moduel;

AMD(require.js)

AMD规范如其全名一致,异步模块定义。是require.js 在推广过程中对模块化定义的规范产出的。它的主要思想是前置依赖,让依赖先加载和执行,然后再之后后面的语句。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,才会运行这个回调函数。

CMD(sea.js)

CMD与AMD规范不一样,AMD是一种与预加载的方式,否管你有没有用到,先把依赖加载进来执行了再说。而CMD是按需依赖的形式,你先运行把,运行到哪里了缺啥你再告诉我,我给你按需依赖。

Commonjs

CommonJs,运行时加载,理论上来说,这个规范一般都是用于服务端的node环境,与前端可能相关性不大,但是作为Js的模块化规范的几大巨头之一,我们也应该了解其思想和实现逻辑。CommonJs模块都是对象,先读取加载整个模块,生成一个对象,然后再从这个对象上面读取方法。由于它是读取后深拷贝(对值的拷贝)这个时候你再进行模块内部变量的改变,是不会影响原依赖模块的使用。CommonJs是同步加载的,一般同步就意味着等待,而有效等待的前提就需要良好的运行环境,这在浏览器上变换莫测的网络环境显然是没法满足的,一个404的js,就造成页面的长时间等待。所以这个规范一般被用作服务端node环境。

ES6 module

在我学前端的心路历程中,但凡跟ES6扯上关系的,总得带点牛逼气息,ES6 module也是如此,它是从语言层面定义的模块化解决方案。ES6的模块不是对象,import命令会被 JavaScript 引擎静态分析,在编译时就引入模块代码,而不是在代码运行时加载,所以无法实现条件加载。也正因为这个,使得静态分析成为可能。

我该用哪种模块化方式?

答:当然是最牛逼的

理想上,我们应该全部使用ES6 module这种牛逼的方式。但是理想与现实总是存在着略微的差距,虽然我们平常写Vue组件,ES6 module 用得是肆无忌惮,风生水起。但这并不意味着我们现在生产环境上用的就是这个模式,所见有时并非所得。一方面并非所有的浏览器都能够支持ES6 module,另一方面则是由于,现如今磅礴的前端生态环境,巨额的嵌套引用入会导致额外的网络往返,在生产环境中发布未打包的 ESM 仍然效率低下(即使使用 HTTP/2)。实际上当我们run build时,聪明的打包器帮我们完成一系列操作,tree-shaking、懒加载和 chunk 分割(以获得更好的缓存),让我们以最淳朴的形式表现于浏览器,当真是反哺归真。

参考文档

  1. 为什么选 Vite

  2. 前端模块化

  3. 模块设计术语

版权声明: (https://www.thinkmoon.cn/post/943)
本文首发于指尖魔法屋-前端模块化
转载或引用必须申明原指尖魔法屋来源及源地址!