Skip to content

你准备好写jQuery插件了吗?

开始之前我得先声明关于几点jQuery的概念:

1、$是jQuery的简写,任何出现$()的地方你都可以转换成jQuery()。

2、jQuery.fn只是jQuery.prototype的一个别名而已。但前提是你要知道JavaScript里面prototype是什么意思。JavaScript prototype整理

OK,如果你清楚上面两个概念,那么我们进入正题:

jQuery提供两种实现插件机制:jQuery.extend(object)、jQuery.fn.extend(object)。

一、jQuery中的$.extend

$.extend也就是支撑起jQuery插件半天边吧,所以我们还是得先了解一下他:

$.extend(object) 将object对象逐个复制给jQuery对象。

问题:

$.extend({ showMsg: function(msg) {  } });

$.showMsg = function(msg) { }

这两者是没有区别,只是第二种方式看起来更加简洁(至少我喜欢这样子写),当然$.extend支持更加复杂操作,比如:

$.extend({

min: function(a, b) { // do something },

max: function(a, b) { // do something }

}); // 逐个将min、max方法复制给jQuery对象。

当然还可以提供另一个对象,并不一定非要复制给jQuery对象,比如:jQuery.extend({ args:’我是args属性’ }, options); // 将args复制给options对象

理解上面这些将对我们后面写插件很有帮助。

二、jQuery.extend(object)

扩展jQuery对象本身,意思就是说在jQuery对象本身增加新函数。

当然这是针对jQuery做的一个扩展,实际上你也可以这么写:

jQuery.extend({ pluginName: function(args) { } });

当然还有更简洁、更漂亮的办法:

jQuery.pluginName = function(args) {}

它的使用方法非常简单:$.pluginName(‘我就是这么被调用的’);

jQuery官网就提供一个cookie插件,她就是使用这种插件机制实现的,感兴趣的同学可以看看

三、jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法,绝大部分我们都需要通过jQuery筛选出来一些元素集,然后对元素集进行操作,所以呢,这种插件机制也成了首选。

jQuery.fn.extend({  // 上面已经提到extend如果有多个成员、方法都将会逐个复制给jQuery
 check: function() {
 return this.each(function() { this.checked = true; });
 },
 uncheck: function() {
 return this.each(function() { this.checked = false; });
 }
 });

实现全选和非全选两个插件。

使用方法:$(“input[type=checkbox]“).check(); // 全选所有checkbox选项框

其中:$(“input[type=checkbox]“) 是一个元素集。

四、我需要很多参数

很多情况下,我们需要传递很多参数,但是绝大部分又是可选的,比如一个基于FLASH来切换图片效果示例(这在大部分网站里面都会出现的):

$.fn.SwfSlide = function(options) {

options = $.extend({ // 上面我已经讲明了,$.extend可以将对象复制到另一个对象上,而实现可选参数方法是通过她来实现
 swfFile: '/images/pixviewer.swf?1',
 fwidth: 200,  // 默认宽度
 fheight: 160, // 默认高度
 theight: 18,
 files: '',
 links: '',
 texts: ''
 }, options || {});

}

这里面有七个参数,但是当你在调用的时候你不需要七个全指明,也许你只要三个,像这样:$(‘div’).SwfSlide({ files:”, links:”, texts:” });

五、可不是这么就完了

JavaScript脚本框架非常多,最经典像是prototype、yui、mootools等等,如果说一个项目运用多套框架的话,遇到最多关于$冲突问题。jQuery本身提供一些多库共存的解决方案。但是做为我们基于jQuery来写插件,我们还是要考虑到这个多库共存带来的问题。

其实也只是非常简单的一个技巧,将插件代码放到一个包裹器里面:

(function($) {

// 插件代码

})(jQuery); // javascript的匿名对象,强制jQuery对象传递给$,确保我们插件里面使用$都是jQuery对象。

整理完毕,我自己都舒服许多。 ;-)

相关日志

Categories: 开源, 技术.

Tags: ,

Comment Feed

One Response

  1. 理解很透彻呢。 帮助很大,谢谢。



Some HTML is OK

or, reply to this post via trackback.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word