前端模块化CommonJS

Posted 2021-10-25 SunFlower914

前端模块化：CommonJS

CommonJS是node.js遵守的模块化规范， commonjs 规范应用于 nodejs 应用中，在 nodejs 应用中每个文件就是一个模块，拥有自己的作用域，文件中的变量、函数都是私有的，与其他文件相隔离。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。

CommonJS规范规定：

1.每个模块内部， module 变量代表当前模块。

2.module 变量变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。

3.加载某个模块，其实是加载该模块的 module.exports 属性。（引用阮一峰老师的描述）

什么是模块化？

1. 模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元

2. 编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块

简单来说，模块化就是把系统分成各个独立的部分，每个部分单独实现功能，将系统分割成多个可独立的功能部分。

为什么要使用模块化？

 当我们在一个html文件中引入了多个js文件，此时需要依赖多个模块，就意味着会发送多个请求，从而导致请求过多，同时我们不知道他们的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。将不同的功能封装成不同的全局函数时会导致全局变量污染, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系，这也间接导致我们所写出的代码难以维护。

重点：模块化的好处是什么？

• 所有代码都运行在模块作用域，不会污染全局作用域，提高了代码的可维护性
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。
• 想要什么功能，就加载什么模块，可以实现按需加载。