模块化的基本概念

什么是模块化

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

为什么需要学习模块化

随着 Web 技术的发展，各种交互以及新技术等使网页变得越来越丰富，逐渐我们前端工程师登上了舞台，同时也使得我们前端的代码量急速上涨、复杂性在逐步增高，越来越多的业务逻辑和交互都放在 Web 层实现，代码一多，各种命名冲突、代码冗余、文件间依赖变大等等一系列的问题就出来了，甚至导致后期难以维护。

在这些问题上，其他如 java、 php 等后端语言中早已有了很多实践经验，那就是模块化，因为小的、组织良好的代码远比庞大的代码更加理解和维护，于是前端也开始了模块化历程。

编程领域中的模块化

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

把代码进行模块化拆分的好处：

 ①  提高了代码的复用性

 ②  提高了代码的可维护性

 ③  可以实现按需加载

模块化规范

模块化规范就是对代码进行模块化的拆分与组合时，需要遵守的那些规则。

• CommonJS 规范：nodejs中遵守的就是commonjs规范。

• ES6 模块化规范：（前后端通用的模块化规范；Node.js、Vue、React 中都能使用！）

• CMD 和 AMD 模块化规范（较少使用）: CMD--sea.js, AMD-require.js

• UMD 叫做通用模块定义规范（Universal Module Definition），它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身。

Node.js 中的模块化

Node.js遵循了 CommomJS 模块化规范，CommonJS 规定了模块的特性和各模块之间如何互相依赖。

导出：module.exports，exports

导入：

• 自定义模块：const xxx =

  ---

  require(模块文件的相对位置)

• 内置模块：const xxx = require(模块的名字)

• 第三方模块：const xxx = require(模块的名字)

CommonJS规定：

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

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

 ③  加载某个模块，其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。

特点：

  ○  所有代码都运行在模块作用域，不会污染全局作用域。

  ○  模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

  ○  模块加载的顺序，按照其在代码中出现的顺序

模块化的优点

• 更好地分离：避免一个页面中放置多个script标签，而只需加载一个需要的整体模块即可，这样对于HTML和JavaScript分离很有好处。
• 更好的代码组织方式：有利于后期更好的维护代码。
• 按需加载：提高使用性能，和下载速度，按需求加载需要的模块。
• 避免命名冲突：JavaScript本身是没有命名空间，经常会有命名冲突，模块化就能使模块内的任何形式的命名都不会再和其他模块有冲突。
• 更好的依赖处理：使用模块化，只需要在模块内部申明好依赖的就行，增加删除都直接修改模块即可，在调用的时候也不用管该模块依赖了哪些其他模块。