转载自岁月如歌的博客。
用开放的心态，打造专业的人生。
jQuery 插件的模块化
with 13 comments
jQuery 插件非常丰富。在传统使用方式里，比如 jquery-fancybox, 我们需要在页面中显式引入：
|
1
|
<script src="http://www.cnblogs.com/js/jquery.min.js"></script>
|
|
2
|
<script src="http://www.cnblogs.com/js/jquery.easing-1.3.pack.js"></script>
|
|
3
|
<script src="http://www.cnblogs.com/js/jquery.mousewheel-3.0.4.pack.js"></script>
|
|
4
|
<script src="http://www.cnblogs.com/js/jquery.fancybox-1.3.4.js"></script>
|
|
5
|
<link rel="stylesheet" href="http://www.cnblogs.com/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:
|
2
|
define(function(require) {
|
|
3
|
var $ = require('jquery');
|
|
4
|
require('./fancybox/jquery.fancybox-1.3.4.js')($);
|
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');
|
jQuery 插件的机制是往 $ 或 $.fn 上添加插件成员。在 seajs 里，我们可以将插件包装成一个函数。这样，在使用时，传入需要被扩展的 jQuery 实例就好。
对于不依赖其它插件的 jquery 插件，模块化包装就更简单了：
|
1
|
/* jquery.mousewheel.js */
|
|
2
|
define(function() { return function($) {
|
通过这种方式，我们可以将任何 jquery 插件封装成 seajs 的模块！
共享模式
上面的方式可以概括为：
|
1
|
var $ = require('jquery');
|
|
2
|
require('some-jquery-plugin')($);
|
这是一种共享模式，一旦添加某个插件功能到 jQuery 后，其他模块里，require('jquery') 返回的 jquery 对象会自动拥有已经添加过的插件功能。这种共享模式可以对 jquery 的插件进行集中管理。比如对于具体项目，可以在 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')($);
|
这样，在其它模块中，通过 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/
