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