前端模块化开发

一、为什么要进行模块化开发

1.命名冲突

　　在实际工作中，相信大家都遇这样的问题：我自己测试好的代码和大家合并后怎么起冲突了？明明项目需要引入的包都引进来了怎么还报缺少包？……这些问题总结起来就是命名空间冲突及文件依赖加载顺序问题。

2.文件依赖

开发最基本的原则就是不要重复，当项目中有多处地方运用同一个功能时，我们就该想办法把它抽离出来做成util，当需要时直接调用它即可，但是如果你之后的代码依赖于util.js而你又忘了调用或者调用顺序出错，代码便报各种错误，举个最简单的例子，大家都知道Bootstrap依赖jquery,每次引入时都要将jquery放在Bootstrap前面，一两个类似于这样的依赖你或许还记得，但如果在庞大的项目中有许多这样的依赖关系，你还能清晰的记得吗？当项目越来越复杂，众多文件之间的依赖经常会让人抓狂。下面这些问题，我相信每天都在真实地发生着。

1.通用组更新了前端基础类库，却很难推动全站升级。

2.业务组想用某个新的通用组件，但发现无法简单通过几行代码搞定。

3.一个老产品要上新功能，最后评估只能基于老的类库继续开发。

4.公司整合业务，某两个产品线要合并。结果发现前端代码冲突。

5.……

以上很多问题都是因为文件依赖没有很好的管理起来。在前端页面里，大部分脚本的依赖目前依旧是通过人肉的方式保证。当团队比较小时，这不会有什么问题。当团队越来越大，公司业务越来越复杂后，依赖问题如果不解决，就会成为大问题。

二、什么是模块化开发

模块化开发使代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但总不能随便写吧，总得有规范让大家遵守吧。

1.目前，模块化开发有：

1.服务器端规范：CommonJs---nodejs使用的规范，

2.浏览器端规范：AMD---RequireJS国外相对流行（官网）

　　　　　　　　CMD--SeaJS国内相对流行（官网）

2.SeaJS与RequireJS的对比：

a. 对于依赖的模块，AMD是提前执行，CMD是延后执行;

b. CMD推崇依赖就近，AMD推崇依赖前置;

c. AMD的API默认是一个当多个用，CMD的API严格区分，推崇职责单一。