requires模块化与es6模块化

# 前端模块化 

##### 前言

随着Ajax技术的兴起，前后端分离的开发模式逐渐占领了几乎整个市场，现在的服务器带宽也足够完成大量数据交互，于是很多以前在服务器端的逻辑也可以移植到前端来处理了，从而减轻服务器的压力，当然，这样的话Javascript代码就会越来越复杂。而Javascript作为一门松散的弱类型语言，在一个大型项目面前如果没有合理的拆分与规划，将会变得很难维护，这个时候我们就需要把前端逻辑做一个块化的处理。

**所谓模块化就是把需要重复使用的功能封装成模块，一个页面有一个统筹全局的对象把所有模块引入进来，最终形成一个产品，做成一个完整的项目。**

JS本身在ES6以前没有模块化的，ES6有模块化了，以前主流浏览器对于ES6模块化的支持度不足，所以一般不能直接使用，所以使用第三方的模块化实现。



## 为什么要用 前端模块化

> 早期，js代码量小, 所有Javascript代码可以都写在一个文件里面，只要加载一个js文件就够了。
>
> 但是后来，随着功能需求变多,  所有功能写在一个文件不好维护,  就拆分成了多个文件, 需要依次加载多个文件。如下：

```html
　　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点:

1. 加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长

2. 由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

为了解决这两个问题 ：

1. 解决命名冲突
2. 便于依赖管理

最早的时候使用自执行函数(IIFE)来实现模块化，它是一个伪模块化标准

模块化的好处

就好比要生产一台挖掘机，是由各个厂商提供的配件组装出来的，而不是由一家公司从头到尾生产，这样的好处是各个零部件各司其职，如果有一个功能坏掉了只需要找到对应的零部件解决问题即可，从而避免将来维修的麻烦。

作为代码也是同样的道理，一个完整的项目可以由很多个模块组成，如果某部分功能需要修改或者升级只需要找到对应模块的代码进行维护即可，大大提高了代码的可读性以及节约了维护成本。