前端模块化的优点
1、作用域污染
小明定义了 var name = 'xiaoming';
N ~ 天之后：
小王又定义了一个 var name = 'xiaowang';
2、防止代码暴漏可被修改：
为了解决全局变量的污染，早期的前端的先驱们则是以对象封装的方式来写JS代码：
var utils = {
'version':'1.3' };
然而这种方式不可以避免的是对象中的属性可被直接修改：utils.version = 2.0 。
3、维护成本的提升。
如果代码毫无模块化可言，那么小明今天写的代码，若干天再让小明自己去看，恐怕也无从下手。
4、复用与效率
模块与非模块的目的就是为了复用，提高效率
什么是前端模块管理器
为了解决浏览器本身不能提供模块管理机制的问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来 所有 的前端JavaScript项目，应该都会采用这种方式开发。
几款前端模块管理器介绍
- component
Component 是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。
首先，安装Component。
上面代码之所以需要指定Component的版本，是因为1.0版还没有正式发布。
然后，在项目根目录下，新建一个index.html。
上面代码中的build.css和build.js，就是Component所要生成的目标文件；接着，在项目根目录下，新建一个component.json文件，作为项目的配置文件。
上面代码中，指定JavaScript脚本和样式表的原始文件是index.js和index.css两个文件，并且样式表依赖normalize模块（不低于3.0.0版本，但不高于4.0版本）。这里需要注意，Component模块的格式是"github用户名/项目名"。最后，运行component build命令编译文件。
在编译的时候，Component自动使用autoprefixer为CSS属性加上浏览器前缀。
- Bower
Bower 的主要作用是，为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。
首先，安装Bower。
然后，使用bower install命令安装各种模块。下面是一些例子。
所谓"安装"，就是将该模块下载到当前目录的bower_components子目录中。下载后，就可以直接插入网页。
bower update命令用于更新模块。
如果不给出模块的名称，则更新所有模块；bower uninstall命令用于卸载模块。
注意，默认情况下，会连所依赖的模块一起卸载。比如，如果卸载jquery-ui，会连jquery一起卸载，除非还有别的模块依赖jquery。
- Browserify
Browserify本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。
首先，安装Browserify。
然后，编写一个服务器端脚本。
上面代码中uniq模块是CommonJS格式，无法在浏览器中运行。这时，Browserify就登场了，将上面代码编译为浏览器脚本。
生成的bundle.js可以直接插入网页。
Browserify编译的时候，会将脚本所依赖的模块一起编译进去。这意味着，它可以将多个模块合并成一个文件。
閱讀更多 咱小二 的文章
