jQuery 插件的模块化：seajs

jQuery 插件非常丰富。在传统使用方式里，比如 jquery-fancybox, 我们需要在页面中显式引入：

1	<script src="/js/jquery.min.js"></script>

2	<script src="/js/jquery.easing-1.3.pack.js"></script>

3	<script src="/js/jquery.mousewheel-3.0.4.pack.js"></script>

4	<script src="/js/jquery.fancybox-1.3.4.js"></script>

5	<link rel="stylesheet" href="/js/jquery.fancybox-1.3.4.css"/>

fancybox 依赖 easing 和 mousewheel, 因此还引入了这两个插件文件。当使用的插件越多，依赖关系越复杂时，上面的 script 列表会越难维护。

模块化

我们看下在 seajs 里如何做。

看 demo: FancyBox 1.3.4 | Demonstration

页面源码里，引入的 script 只剩下一处：

1	<script src="http://seajs.com/build/sea.js" data-main="./init"></script>

 
来看 init.js:

1	/* init.js */

2	define(function(require) {

3	var $ = require('jquery');

4	require('./fancybox/jquery.fancybox-1.3.4.js')($);

5

6	// snip...

7

});

init 依赖 jquery 和 fancybox, 因此 require 了这两个模块。

require('./fancybox/jquery.fancybox-1.3.4.js') 返回的是 function, 其代码为：

1	/* jquery-fancybox-1.3.4.js */

2	define(function(require) { return function($) {

3	require('./jquery.easing.1.3.js')($);

4	require('./jquery.mousewheel.js')($);

5	require('./jquery.fancybox-1.3.4.css');

6

7	// snip...

8

}});

jQuery 插件的机制是往 $ 或 $.fn 上添加插件成员。在 seajs 里，我们可以将插件包装成一个函数。这样，在使用时，传入需要被扩展的 jQuery 实例就好。

对于不依赖其它插件的 jquery 插件，模块化包装就更简单了：

1	/* jquery.mousewheel.js */

2	define(function() { return function($) {

3

// snip..

4

}});

通过这种方式，我们可以将任何 jquery 插件封装成 seajs 的模块！

共享模式

上面的方式可以概括为：

1	var $ = require('jquery');

2	require('some-jquery-plugin')($);

这是一种共享模式，一旦添加某个插件功能到 jQuery 后，其他模块里，require('jquery') 返回的 jquery 对象会自动拥有已经添加过的插件功能。这种共享模式可以对 jquery 的插件进行集中管理。比如对于具体项目，可以在 init.js 文件里：

1	/* init.js */

2	define(function(require) {

3	var $ = require('jquery');

4	require('jq-plugin-a')($);

5	require('jq-plugin-b')($);

6	require('jq-plugin-c')($);

7

8	// snip...

9

});

这样，在其它模块中，通过 require('jquery') 就可以得到添加过所需要的所有插件功能的 jquery 对象。

子类模式

当项目很复杂，jquery 插件之间有可能存在冲突。为了尽可能避免冲突，我们可以通过 jQuery 子类来解决：

1	var $ = require('jquery').sub();

2	require('some-jquery-plugin')($);

通过 sub 方法，每个依赖 jquery 的模块，都可以得到 jQuery 的一个子类。插件往这个子类添加成员，因此各个模块之间的 jquery 是独立的了，彼此不会影响。

延续习惯

无论是共享模式还是子类模式，都不会破坏插件本身的使用方式，原来是怎么调用的，现在依旧怎么用。唯一不同的是引入方式。模块化之前，我们需要手动引入 script 标签来解决；模块化之后，我们通过 require 来管理加载和依赖。

小结

通过这种包装，我们就可以在 seajs 里使用任何 jquery 插件了，并且通过 snode, 还可以让 jquery 的插件在 node 环境中运行。

一切就这么简单。看起来没什么变化，但变化就在其中！

文档下载：http://seajs.com/

转载自岁月如歌。