快速上手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