jQuery 插件的模块化

来源:射雕

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 环境中运行。

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

转载于:https://www.cnblogs.com/guopei/archive/2011/05/19/2051487.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值