jQuery 插件的模块化

时间：2011-05-19 来源：郭培

来源：射雕

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

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easing-1.3.pack.js"></script>
<script src="/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="/js/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="/js/jquery.fancybox-1.3.4.css"/>

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

模块化

我们看下在 seajs 里如何做。

看 demo: FancyBox 1.3.4 | Demonstration

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

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

来看 init.js:

/* init.js */
define(function(require) {
  var $ = require('jquery');
     require('./fancybox/jquery.fancybox-1.3.4.js')($);
     // snip...
});

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

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

/* jquery-fancybox-1.3.4.js */
define(function(require) { return function($) {
  require('./jquery.easing.1.3.js')($);
  require('./jquery.mousewheel.js')($);
  require('./jquery.fancybox-1.3.4.css');
  // snip...
 }});

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

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

/* jquery.mousewheel.js */
define(function() { return function($) {
 // snip..
}});

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

共享模式

上面的方式可以概括为：

var $ = require('jquery');
require('some-jquery-plugin')($);

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

/* init.js */
define(function(require) {
 var $ = require('jquery');
 require('jq-plugin-a')($);
 require('jq-plugin-b')($);
 require('jq-plugin-c')($);
 // snip...
});

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

子类模式

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

var $ = require('jquery').sub();
require('some-jquery-plugin')($);

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

延续习惯

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

小结

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

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