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对象。

问题：

view plaincopy to clipboardprint?

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

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

和

view plaincopy to clipboardprint?

1. $.showMsg = function(msg) { }

$.showMsg = function(msg) { }

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

view plaincopy to clipboardprint?

1. $.extend({
3. min: function(a, b) { // do something },
5. max: function(a, b) { // do something }
7. }); // 逐个将min、max方法复制给jQuery对象。

$.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做的一个扩展，实际上你也可以这么写：

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

1. jQuery.pluginName = function(args) {}

jQuery.pluginName = function(args) {}

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

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

三、jQuery.fn.extend(object)

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

view plaincopy to clipboardprint?

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

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来切换图片效果示例（这在大部分网站里面都会出现的）：

view plaincopy to clipboardprint?

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

$.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来写插件，我们还是要考虑到这个多库共存带来的问题。

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

view plaincopy to clipboardprint?

1. (function($) {
3. // 插件代码
5. })(jQuery); // javascript的匿名对象，强制jQuery对象传递给$，确保我们插件里面使用$都是jQuery对象。

(function($) {

// 插件代码

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

整理完毕，我自己都舒服许多。

 

原文地址:http://asdfblog.com/technology/ready-jquery-plugin.html

点击就是最大的支持    职业规划网             点击就是最大的支持    个人成功发展论坛