模块化前端开发入门指南（一）

前端领域中，模块化和工程化使用越来越广泛。相比几年前，现在的前端项目的规模较之前大得多，项目复杂度越来越高，项目随着代码量的增加也越来越难以维护。模块化和工程化可以有效缓解这个问题。

概览

在这里我会介绍模块化需求的由来，以前的模块化开发方式以及以前这种方式的弊端。

模块化开发的由来

当进行项目开发时，我们为一个页面写一份业务代码，我们的业务逻辑通常是这样子：

/*
用户反馈页面功能要求：
1、收集用户基本信息，便于后面联系感谢
2、收集用户的反馈内容
3、提供图片上传功能，当用户觉得文字描述不清时，上传图片辅助说明
*/

/*
反馈页面javascript书写逻辑
1、添加表单提交事件
2、添加检测输入值合法性的功能，比如QQ号、手机号、邮箱格式，是否有必填项为空
3、添加文件上传功能
4、添加表单提交返回结果判断功能，提交是否成功，做相应的后续动作
*/

页面增多后，会发现不同的页面间有一些公共的功能，比如登录和表单验证，或者一些相似的业务逻辑。随着项目复杂度的增加，这种具有共性的功能越来越多。我们需要将这些在站点中具有共性的功能封装起来，然后以模块的方式提供给业务使用者。

封装后的模块一般分为业务相关和业务无关的。业务无关的组件一般做为基础组件，根据实际的业务情况做第二次封装，做成业务相关组件，然后在业务中使用。当然将业务无关组件进行二次封装并不是必须的，根据业务的实际情况而定。

现在业界提供的开源插件多为业务无关的模块，比如表单验证、图片轮播、下拉列表，数据可视化图表等。这些组件并没有明显的业务性，在实际业务中，需要手动配置相关参数或逻辑才能使用。

以前的模块化开发方式

现在，假设我们封装出两个模块，分别是moduleA和moduleB。
按模块的封装形式不同，常用的有三种：jQuery原型链继承，Object接口方式，new Function方式。这里以moduleA为例，写法如下：

/*
jQuery原型链继承
比较流行的方式
使用方式：$(selector).moduleA(options)
*/
$.fn.moduleA = function(options) {
	//do something
}

/*
Object接口方式，这里挂载在jQuery命名空间下，也可以挂在其他命名空间下
多用在跟dom结构无关的功能或者单例模式中,比如单点登录模块，日志存储模块等等
使用方法：$.moduleA.fn1();$.moduleA.fn2();
*/
$.moduleA = {
	fn1: function() {},
	fn2: function() {}
};

/*
new Function方式，也是原始的原型链集成方式
最正统最原汁原味的方式，用这种方式创建的类可以作为其他模块类的基类被继承，能被instanceof关键字正确的检测
使用方法：var a = new moduleA();
*/
function moduleA() {}
moduleA.prototype.fn1 = function() {};
moduleA.prototype.fn2 = function() {};

在使用模块之前，一般我们会在页头或者页尾用script标签引入模块脚本。

<script src="moduleA"></script>
<script src="moduleB"></script>

这种手动引入的方式弊端比较明显，当一个页面比较复杂，引用的模块较多后，页面可能成了下面的情形。这种手动引入的方式比较繁琐，容易出错，不利于后期维护。而且因为过多的script引入增加了http请求数，会导致页面呈现慢和js脚本运行时间有延迟的问题。

<!--模块过多的情况-->
<script src="module1"></script>
<script src="module2"></script>
<script src="module3"></script>
<script src="module4"></script>
<script src="module5"></script>
<script src="module6"></script>
<script src="module7"></script>
<script src="module8"></script>
<script src="module9"></script>
<script src="module10"></script>
<script src="module11"></script>
<script src="module12"></script>
<script src="module13"></script>
...more

工程化

为了便于多个模块的管理，以及页面优化，我们需要使用合并工具，自动的将使用到的模块合并成一个js文件，这样页面只需要一个script标签就够了。

<!--合并后-->
<script src="modules.js" ></script>

modules.js中里面是这样：

/**module1的代码*/
/**module2的代码*/
/**module3的代码*/
/**module4的代码*/
/**module5的代码*/
/**module6的代码*/
/**module7的代码*/
/**module8的代码*/
/**module9的代码*/
...

当然，为了方便管理，我们需要提供给合并工具一个需要合并的文件列表，以及合并后产生的文件名字。
在这里，已经引入了合并工具，来管理我们的模块，这是工程化的雏形。
完整的工程化当然比这个复杂的多，后面会讲解如何搭建一个简单的工程化项目，这里不展开赘述。