模块化JS（RequireJS SeaJS）

模块加载器的由来

1. 由于JS在加载的时候，会阻碍整个页面的加载，导致页面的空白期，这对于网站来说是致命的;

2. JS没有模块概念，导致很难管理模块间关系;

由于如上原因,模块化框架应运而生。

RequireJS & SeaJS是现在主流的模块化框架，今天我们就来比较一下这两个框架，我在项目中都真实的使用过，希望给选择的人一些参考。

RequireJS

RequireJS是外国人写的，遵循AMD规范，AMD全称Asynchronous Module Definition, 中文异步模块加载。简单定义格式如下：

define(['模块A','模块B'],func);

大家看到，模块依赖是在头文件上标明，所以它是预先加载，即引入该模块时即加载依赖，而不是在使用的时候加载。很多处女座看到这里，估计会开始叫嚣：这不是有几率浪费了资源？不要着急...

SeaJS

SeaJS是国人大牛写的，遵循CMD规范，CMD全称Common Module Definition.定义格式如下：

define(function(require){

    var a = require('模块A')

});

大家看到，模块依赖是在代码中标明，所以它是使用时加载，理论上是优于AMD的，处女座这下就很满意了！ 

大家已经简单了解这两款加载器的由来以及相关规范。接下来，就通过不同方面来比较下这两个框架。

1. 加载机制方面

CMD理论上确实比AMD更优质，这也是很多处女座推崇的。这本身是两种机制的不同，而在知乎有人借此说RequireJS是一坑（http://www.douban.com/note/283566440/）,这根本没懂两者区别，说明要么作者本身是坑，要么是软文！

大家可能注意到我上面说：“理论上”，我现在来讲讲为什么是理论上的！在开发过程中，经常要加载模块然后渲染UI，而第一次加载会导致页面有明显的卡顿，这对于用户来说是致命的！而且，“使用时加载”是异步实现，异步增加了架设架构的难度。所以在我看来，CMD仅存的优势反而是一个鸡肋。

2. 文档&社区

大家都知道，一个技术不能仅仅讨论它的NB程度，更要看它的社区。模块加载本身是一个简单的东西，文档篇幅都不多，更多的是社区的支持。

RequireJS是外国人写的，要早于SeaJS。它现在的社区非常活跃，而且著名的jQuery以及jQuery的插件大军都支持RequireJS，不仅仅jQuery,基本上所有的JS插件都支持RequireJS，随便遇到任何问题，在Google上随时都能解决。

反观SeaJS，国人并没有注意社区的发展，百度帖子寥寥无几，而展示支持的网站却满满一页，亮瞎我的狗眼，百度，淘宝....遇到任何技术问题，Google基本不认得，百度....呵呵了！

我之前也是在用SeaJS，使用过程中，遇到任何问题都要看源码，最后忍不住逃离，转到RequireJS！

3. 插件

软件世界，特殊的需求漫天飞，任何框架都满足不了所有人的口味！那么，必然有基于框架的插件产生，RequireJS插件很多，怎么个多法就不具体说了。而SeaJS，维护者只有作者本人，加上国人不懂的分享（我也是）....所以除了官方的提供的，没有插件！

4. 打包压缩

在运行时，很多开发者喜欢合并所有的JS文件到一个文件中，这样用户只用下载一次，大大提高了网站的性能。SeaJS支持定义模块名，使用Grunt合并直接可以使用。

RequireJS默认使用文件路径作为文件名，基本不支持合并文件。在小中型项目中，这是一个软肋。而在大型面向SOA的架构中，都会选择不打包JS，而只是Mini JS。

上面说了这么多，大家看的出来，我是偏向于RequireJS的（真不是崇洋媚外）！所以大家在选择时，如果项目本身需要极大的灵活性，建议选择RequireJS。接下来推荐给大家一些模块加载器使用的技巧。

1.关于JS公共库

大家在开发过程中，经常会遇到一些公共类库，比如jQuery,Backbone,Underscore等等，这些是所有模块需要引入的，建议大家打包这些基础类库为一个JS文件，直接在页面引入，可以让自己的代码更加清爽一些；

2.模板文件

模板文件大家喜欢放在HTML文件中，很难管理，也不利于多模块重用。有些开发者使用Grunt打包模块为JS文件，导致用户就需要下载所有模板，这显然是不合理的。建议使用后台分来管理模板文件，配合HTML5 Storage使用，即提高性能又易于管理；

3.模块加载器的思想

既然使用模块加载器，必然要遵循AMD或者CMD，所以在开发过程中，开发思想以及代码规范都要改变。如果你的项目组在短时间内没办法转变，建议不要轻易尝试它；

模块加载器的由来

1. 由于JS在加载的时候，会阻碍整个页面的加载，导致页面的空白期，这对于网站来说是致命的;

2. JS没有模块概念，导致很难管理模块间关系;

由于如上原因,模块化框架应运而生。

RequireJS & SeaJS是现在主流的模块化框架，今天我们就来比较一下这两个框架，我在项目中都真实的使用过，希望给选择的人一些参考。

RequireJS

RequireJS是外国人写的，遵循AMD规范，AMD全称Asynchronous Module Definition, 中文异步模块加载。简单定义格式如下：

define(['模块A','模块B'],func);

大家看到，模块依赖是在头文件上标明，所以它是预先加载，即引入该模块时即加载依赖，而不是在使用的时候加载。很多处女座看到这里，估计会开始叫嚣：这不是有几率浪费了资源？不要着急...

SeaJS

SeaJS是国人大牛写的，遵循CMD规范，CMD全称Common Module Definition.定义格式如下：

define(function(require){

    var a = require('模块A')

});

大家看到，模块依赖是在代码中标明，所以它是使用时加载，理论上是优于AMD的，处女座这下就很满意了！ 

大家已经简单了解这两款加载器的由来以及相关规范。接下来，就通过不同方面来比较下这两个框架。

1. 加载机制方面

CMD理论上确实比AMD更优质，这也是很多处女座推崇的。这本身是两种机制的不同，而在知乎有人借此说RequireJS是一坑（http://www.douban.com/note/283566440/）,这根本没懂两者区别，说明要么作者本身是坑，要么是软文！

大家可能注意到我上面说：“理论上”，我现在来讲讲为什么是理论上的！在开发过程中，经常要加载模块然后渲染UI，而第一次加载会导致页面有明显的卡顿，这对于用户来说是致命的！而且，“使用时加载”是异步实现，异步增加了架设架构的难度。所以在我看来，CMD仅存的优势反而是一个鸡肋。

2. 文档&社区

大家都知道，一个技术不能仅仅讨论它的NB程度，更要看它的社区。模块加载本身是一个简单的东西，文档篇幅都不多，更多的是社区的支持。

RequireJS是外国人写的，要早于SeaJS。它现在的社区非常活跃，而且著名的jQuery以及jQuery的插件大军都支持RequireJS，不仅仅jQuery,基本上所有的JS插件都支持RequireJS，随便遇到任何问题，在Google上随时都能解决。

反观SeaJS，国人并没有注意社区的发展，百度帖子寥寥无几，而展示支持的网站却满满一页，亮瞎我的狗眼，百度，淘宝....遇到任何技术问题，Google基本不认得，百度....呵呵了！

我之前也是在用SeaJS，使用过程中，遇到任何问题都要看源码，最后忍不住逃离，转到RequireJS！

3. 插件

软件世界，特殊的需求漫天飞，任何框架都满足不了所有人的口味！那么，必然有基于框架的插件产生，RequireJS插件很多，怎么个多法就不具体说了。而SeaJS，维护者只有作者本人，加上国人不懂的分享（我也是）....所以除了官方的提供的，没有插件！

4. 打包压缩

在运行时，很多开发者喜欢合并所有的JS文件到一个文件中，这样用户只用下载一次，大大提高了网站的性能。SeaJS支持定义模块名，使用Grunt合并直接可以使用。

RequireJS默认使用文件路径作为文件名，基本不支持合并文件。在小中型项目中，这是一个软肋。而在大型面向SOA的架构中，都会选择不打包JS，而只是Mini JS。

上面说了这么多，大家看的出来，我是偏向于RequireJS的（真不是崇洋媚外）！所以大家在选择时，如果项目本身需要极大的灵活性，建议选择RequireJS。接下来推荐给大家一些模块加载器使用的技巧。

1.关于JS公共库

大家在开发过程中，经常会遇到一些公共类库，比如jQuery,Backbone,Underscore等等，这些是所有模块需要引入的，建议大家打包这些基础类库为一个JS文件，直接在页面引入，可以让自己的代码更加清爽一些；

2.模板文件

模板文件大家喜欢放在HTML文件中，很难管理，也不利于多模块重用。有些开发者使用Grunt打包模块为JS文件，导致用户就需要下载所有模板，这显然是不合理的。建议使用后台分来管理模板文件，配合HTML5 Storage使用，即提高性能又易于管理；

3.模块加载器的思想

既然使用模块加载器，必然要遵循AMD或者CMD，所以在开发过程中，开发思想以及代码规范都要改变。如果你的项目组在短时间内没办法转变，建议不要轻易尝试它；