SeaJS中jQuery插件模塊化及其調用方式

jQuery插件本質上是將命名空間掛在全局的jQuery或jQuery.fn上而非使用define定義的模塊。 
JQuery的這種擴展機制同模塊化要求模塊的獨立性，以及模塊互相隔離有點衝突。

jQuery插件數目衆多，咱們不打算作大量的轉換工做，爲模塊化而模塊化，甚至改變插件的調用方式， 
這樣對開發帶來的價值不大。只但願經過模塊加載器實現自動的依賴管理，按需加載，而且使用方式天然。

1.常見的jQuery插件的模塊化方式

把jquery插件做爲一個函數返回，帶一個jquery參數，由調用者完成插件的初始化。

以jquery-themeswitch插件爲例子，該插件依賴jquery.cookie插件。

/* jquery-themeswitch.js */

define(function(require) { 

  return function(jQuery) {

      //先初始化依賴的模塊
      require('./jquery.cookie')(jQuery);   

     //put plugin code here

  }//end of function

});

2.jquery模塊化後調用方式

下面的demo對模塊的引用採用相對路徑，實際的業務開發中能夠經過seajs提供的alias來重命名

(1)模塊內部使用

    var $ = require('./libs/jquery');
    require('./libs/jquery-themeswitch')($);
    require('./libs/jquery-ui')($);         //demo涉及jquery ui組件

    $(document).ready(function(){          //在DOM加載完成時運行代碼

        $('#elem').themeswitcher();
        ...

    }
    ...

(2)在script代碼片斷中

seajs.use(['./libs/jquery','./libs/jquery-themeswitcher', './lib/jquery-ui'],      
      function ($, themeswitcher,jqueryui){

        themeswitcher($);               //init jquery plugin     
        jqueryui($);

        $(function(){                   //dom ready調用的另一種方式

            $('#elem').themeswitcher()
            ...

        });

   });

優缺點對比：

優勢： 
* 依賴管理自動化 
* 支持多個版本的jQuery使用。（須要這個優勢嗎？)

缺點： 
* 每次調用一次require('plugin')($),會從新初始化一次插件 
* 調用方式也不是很方便,調用代碼不是很直觀

提示：能夠在jQuery中添加一個cachedPlugins對象來保存加載過的插件模塊id來防止重複加載

3.另一種插件模塊化方式

假定咱們去掉jquery多版本的支持，讓每一個jquery插件模塊返回$，看看代碼調用方式是否會更天然一些。 
另外每一個模塊只能被編譯一次，利用該特性，咱們還能夠作到讓每一個插件只會被初始化一次。

說明：模塊編譯過程就是構建模塊的exports的過程。

還以themeswitcher爲例子：

jquery-theme-switcher.js

define(function (require, exports, module) {

    var jQuery  = require('./jquery');

    require('./jquery-cookie');

    //put plugin in code here

    return jQuery;

});

(1)模塊內部使用

    require('./libs/jquery-ui');   //能夠不處理返回值    
    var $ = require('./libs/jquery-themeswitch')  //返回的仍是$

     $(function(){

         $('#elem').themeswitcher();

     });

    ...

(2)在script代碼片斷中

seajs.use(['./libs/jquery-themeswitcher', './lib/jquery-ui'],function ($){

        $(function(){

            $('#elem').themeswitcher()
            ...

        });

   });

4.簡化jquery插件的引用

若是你使用的插件比較多，還能夠經過這樣的方式來簡化jquery插件的引用。 
定義一個myjquery.js

define(function(require) {

    require('some-plugin1');  //會自動加載相關的依賴插件
    require('some-plugin2');  //若是記不清依賴關係，重複require也沒有影響。
    require('some-plugin3');  

    return require('some-plugin');  //每一個插件模塊都會返回$,取最後一個返回就能夠了。


});

在其餘的業務代碼中，你只須要引入本身定製好的myjquery.js便可。 
注意不要在該文件中引入過多的模塊，避免影響性能，其餘不經常使用的插件能夠按需加載。

main.js

define(function(require) {

   var $ =  require('./myjquery');  //全部你定製加載的插件都已經初始化好了

   //do something

});