快速上手seajs模块化以及案例

JS本身是没有模块化的概念，有了seajs就有了模块化的思想，为了快速上手使用这里一切以案例为主。

这里以一个jquery.fancybox.pack.js灯箱效果插件介绍如何运用到seajs中。

传统的调用JS我们可以看到加载JS要按先后顺序进行加载，例如图：

以上是首页调用JS的内容，一旦项目不断的做大加载的JS数量会更多页面看着也不好维护。如果我们使用seajs，页面就会变得简洁如图：

效果是一样的，就是减少了首页代码的代码量。

步骤：

1，先加载sea.js

<script type="text/javascript" src="js/sea.js"></script>

2，定义模块，要搞清楚js之间的依赖关系。

定义一个模块：
define(function(require,exports,moudle){
  //我们的代码都会些在模块中
});

//main.js

define(function(require,exports,moudle){
    $= require('./lib/jquery-1.8.3.min.js'); //这样就引入了jq,不加var的话就是全局变量了其他模块可以直接使用

  var pack = require('./source/jquery.fancybox.pack.js')($); //说明jquery.fancybox.pack.js这个文件依赖jquery

  require('./source/helpers/jquery.fancybox-buttons.js')(pack); //说明jquery.fancybox-buttons.js文件同时依赖jquery和jquery.fancybox.pack.js


 var init = function(){ 
     $(function(){
              //依赖关系部署好，这里就些调用的代码了，就跟我们平时写jq一样
     });
 } 


exports.init2 = init;//以上的变量和方法都是此模块私有，我们要在其他模块调用必须要提供对外的接口，以后对外的接口要使用的话直接就调用init2即可。

});

3，调用模块

 seajs.use(['./js/1','./js/main'],function(m,n){ 
    m.init(); 
    n.init2(); 
 });

如果是调用多个模块可以用数组+参数1.js对应m对象，main.js对应n。
之前的例子我们写的是main.js，还记得对外的接口吗？
exports.init2，这里调用就直接n.init2()，这里就调用了main.js代码。

这里注意：在seajs中引入jquery，由于直接使用require的话seajs是找不到jquery的如果我们需要修改下jquery文件，方法如下：

define(function(){
   //jQuery代码
return $.noConflict();
});

如果依赖于jquery的插件同样修改源代码添加代码如下：

define(function(require){
   return function(jquery){
   //代码
}});

4，seajs.config配置加载器

官方介绍https://github.com/seajs/seajs/issues/262

案例下载

基本用法就是这样这里提供案例源文件。还有其他的用法待更新。。

seajs不同版本功能还需要不通的扩展插件支持http://seajs.org/docs/#docs