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

});