jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
1.1 添加一个新的全局函数
添加一个全局函数，我们只需如下定义：
 
JavaScript Code复制内容到剪贴板
  1. jQuery.foo = function() {
  2. alert('This is a test. This is only a test.');
  3. };
1.2 增加多个全局函数
添加多个全局函数，可采用如下定义：
JavaScript Code复制内容到剪贴板
  1. jQuery.foo = function() {
  2. alert('This is a test. This is only a test.');
  3. };
  4. jQuery.bar = function(param) {
  5. alert('This function takes a parameter, which is "' + param + '".');
  6. };
  7. 调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3 使用jQuery.extend(object);　
JavaScript Code复制内容到剪贴板
  1. jQuery.extend({
  2. foo: function() {
  3. alert('This is a test. This is only a test.');
  4. },
  5. bar: function(param) {
  6. alert('This function takes a parameter, which is "' + param +'".');
  7. }
  8. });
1.4 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
JavaScript Code复制内容到剪贴板
  1. jQuery.myPlugin = {
  2. foo:function() {
  3. alert('This is a test. This is only a test.');
  4. },
  5. bar:function(param) {
  6. alert('This function takes a parameter, which is "' + param + '".');
  7. }
  8. };
  9. 采用命名空间的函数仍然是全局函数，调用时采用的方法：
  10. $.myPlugin.foo();
  11. $.myPlugin.bar('baz');
通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
2、对象级别的插件开发
对象级别的插件开发需要如下的两种形式：、
形式1：  
JavaScript Code复制内容到剪贴板
  1. (function($){
  2. $.fn.extend({
  3. pluginName:function(opt,callback){ //这个callback还没有理解
  4. // Our plugin implementation code goes here.
  5. }
  6. })
  7. })(jQuery);

形式2：

JavaScript Code复制内容到剪贴板
  1. (function($) {
  2. $.fn.pluginName = function() {
  3. // Our plugin implementation code goes here.
  4. };
  5. })(jQuery);

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

2.1 在JQuery名称空间下申明一个名字
这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如： $.fn.doSomething()和 $.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“    
JavaScript Code复制内容到剪贴板
  1. $.fn.hilight = function() {
  2. // Our plugin implementation code goes here.
  3. };
  4. 我们的插件通过这样被调用：
  5. $('#myDiv').hilight();
但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight" 函数中被声明属性。稍后继续。
2.2 接受options参数以控制插件的行为
让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如：
 
JavaScript Code复制内容到剪贴板
  1. // plugin definition
  2. $.fn.hilight = function(options) {
  3. var defaults = {
  4. foreground: 'red',
  5. background: 'yellow'
  6. };
  7. // Extend our default options with those provided.
  8. var opts = $.extend(defaults, options);     //这里是对defaults对象进行扩展
  9. // Our plugin implementation code goes here.
  10. };
  11. 我们的插件可以这样被调用：
  12. $('#myDiv').hilight({
  13. foreground: 'blue'
  14. });
2.3 暴露插件的默认设置
我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。    
JavaScript Code复制内容到剪贴板
  1. // plugin definition
  2. $.fn.hilight = function(options) {
  3. // Extend our default options with those provided.
  4. // Note that the first arg to extend is an empty object -
  5. // this is to keep from overriding our "defaults" object.
  6. var opts = $.extend({}, $.fn.hilight.defaults, options);     //这是扩展$.fn.hilight.defaults名空间下进行扩展，这样就可以满足客户端的链式调用
  7. // Our plugin implementation code goes here.
  8. };
  9. // plugin defaults - added as a property on our plugin function
  10. $.fn.hilight.defaults = {     //在hilight的名空间下，有添加了一个名空间
  11. foreground: 'red',
  12. background: 'yellow'
  13. };
  14. 现在使用者可以包含像这样的一行在他们的脚本里：
  15. //这个只需要调用一次，且不一定要在ready块中调用
  16. $.fn.hilight.defaults.foreground = 'blue';
  17. 接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：
  18. $('#myDiv').hilight();
如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：
// 覆盖插件缺省的背景颜色 
$.fn.hilight.defaults.foreground = 'blue'; 
// ... 
// 使用一个新的缺省设置调用插件 
$('.hilightDiv').hilight(); 
// ... 
// 通过传递配置参数给插件方法来覆盖缺省设置 
$('#green').hilight({ 
 foreground: 'green' 
});  
2.4 适当的暴露一些函数
这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。
JavaScript Code复制内容到剪贴板
  1. // plugin definition
  2. $.fn.hilight = function(options) {
  3. // iterate and reformat each matched element
  4. return this.each(function() {
  5. var $this = $(this);     //最好写成这样，因为$this，一看就知道是jquery对象了，不会让人以为是原始对象
  6. // ...
  7. var markup = $this.html();
  8. // call our format function
  9. markup = $.fn.hilight.format(markup);
  10. $this.html(markup);
  11. });
  12. };
  13. // define our format function
  14. $.fn.hilight.format = function(txt) {
  15. return '<strong>' + txt + '</strong>';
  16. };

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧，是其他人能够传递他们自己设置来覆盖你的插件，换句话说，这样其他人也能够为你的插件写插件。 
      考虑到这个篇文章中我们建立的无用的插件，你也许想知道究竟什么时候这些会有用。一个真实的例子是Cycle插件.这个Cycle插件是一个滑动显示插件，他能支持许多内部变换作用到滚动，滑动，渐变消失等。但是实际上，没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。 Cycle插件对使用者暴露"transitions"对象，使他们添加自己变换定义。插件中定义就像这样：

$.fn.cycle.transitions = { 
// ... 
}; 
这个技巧使其他人能定义和传递变换设置到Cycle插件。
2.5 保持私有函数的私有性
这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。
那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。为了演示，我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。 
JavaScript Code复制内容到剪贴板
  1. (function($) {
  2. // plugin definition
  3. $.fn.hilight = function(options) {
  4. debug(this);
  5. // ...
  6. };
  7. // private function for debugging
  8. function debug($obj) {
  9. if (window.console && window.console.log)
  10. window.console.log('hilight selection count: ' + $obj.size());
  11. };
  12. //  ...
  13. })(jQuery);
我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。
2.6 支持Metadata插件
在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项（这非常有用当创建例子时）。而且支持它非常简单。更新：注释中有一点优化建议。
JavaScript Code复制内容到剪贴板
  1. $.fn.hilight = function(options) {
  2. // ...
  3. // build main options before element iteration
  4. var opts = $.extend({}, $.fn.hilight.defaults, options);
  5. return this.each(function() {
  6. var $this = $(this);
  7. // build element specific options
  8. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
  9. //...
 这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：
 调用的时候可以这样写： jQuery.foo(); 或 $.foo(); 
JavaScript Code复制内容到剪贴板
  1. <!--  markup  -->
  2. <div class="hilight { background: 'red', foreground: 'white' }">
  3. Have a nice day!
  4. </div>
  5. <div class="hilight { foreground: 'orange' }">
  6. Have a nice day!
  7. </div>
  8. <div class="hilight { background: 'green' }">
  9. Have a nice day!
  10. </div>
  11. 现在我们能高亮哪些div仅使用一行脚本：
  12. $('.hilight').hilight();
2.7 整合
下面使我们的例子完成后的代码：
JavaScript Code复制内容到剪贴板
  1. // 创建一个闭包
  2. (function($) {
  3. // 插件的定义
  4. $.fn.hilight = function(options) {
  5. debug(this);
  6. // build main options before element iteration
  7. var opts = $.extend({}, $.fn.hilight.defaults, options);
  8. // iterate and reformat each matched element
  9. return this.each(function() {
  10. $this = $(this);
  11. // build element specific options
  12. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
  13. // update element styles
  14. $this.css({
  15. backgroundColor: o.background,
  16. color: o.foreground
  17. });
  18. var markup = $this.html();
  19. // call our format function
  20. markup = $.fn.hilight.format(markup);
  21. $this.html(markup);
  22. });
  23. };
  24. // 私有函数：debugging
  25. function debug($obj) {
  26. if (window.console && window.console.log)
  27. window.console.log('hilight selection count: ' + $obj.size());
  28. };
  29. // 定义暴露format函数
  30. $.fn.hilight.format = function(txt) {
  31. return '<strong>' + txt + '</strong>';
  32. };
  33. // 插件的defaults
  34. $.fn.hilight.defaults = {
  35. foreground: 'red',
  36. background: 'yellow'
  37. };
  38. // 闭包结束
  39. })(jQuery);
这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。
3、总结
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。
3.1 jQuery.fn.extend(object);
fn 是什么东西呢。查看jQuery代码，就不难发现。
jQuery.fn = jQuery.prototype = {  
init: function( selector, context ) {//....　  
//......  
};   
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用语句　$("#btn1") 会生成一个jQuery类的实例。
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
$.fn.extend({        
     alertWhileClick:function(){       
         $(this).click(function(){      //给this绑定click事件
              alert($(this).val());       
          });       
      }       
});   
$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>
$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。
 
3.2 jQuery.extend(object);　
为jQuery类添加添加类方法，可以理解为添加静态方法。如：
$.extend({  
    add:function(a,b){return a+b;}  
});  
便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

自己动手开发jQuery插件全面解析 jquery插件开发方法的更多相关文章

  1. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  2. 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

    [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...

  3. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  4. jQuery 源码解析(三) pushStack方法 详解

    该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型 将要压入 jQuery 栈的数组元素 ...

  5. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

  6. 多日期选择jQuery插件 MultiDatesPicker for jQuery UI

    Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件.   GIT源码: https://github.com/dubrox/Multiple-Da ...

  7. jQuery插件实例六:jQuery 前端分页

    先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...

  8. 十七.jQuery源码解析之入口方法Sizzle(1)

    函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: ...

  9. 使用 Eclipse 可视化插件 windowbuilder 进行Java GUI开发（插件安装的两种方法）

    对于Java GUI开发 其实最方便的方法是用插件制作,当然先了解完代码原理是最好的. eclispe安装windowbuilder有两种方式,一种是离线安装,一种是在线安装. 一.第一种在线安装: ...

随机推荐

  1. HDU-4738 Caocao's Bridges 边联通分量

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4738 题意:在有重边的无向图中,求权值最小的桥. 注意trick就好了,ans为0时输出1,总要有一个 ...

  2. 设计模式（二）-- 外观模式(Facade)

    设计模式(二) 外观模式(Facade) 为了解决子系统外部的客户端在使用子系统的时候,既能简单地使用这些子系统内部的模块功能,而又不用客户端去与子系统内部的多个模块交互的问题. 为子系统中的一组接口 ...

  3. 1.4.2.5. 测试（Core Data 应用程序实践指南）

    测试的方法也很简单: 首先,在AppDelegate.h里面引用CoreDataHelper @property (strong, nonatomic, readonly)CoreDateHelper ...

  4. C# Winform 仪表盘

    winform 仪表盘相关下载链接://download.csdn.net/download/floweroflvoe/10432601?utm_source=bbsseo 控件首次拖拽上来是这样的: ...

  5. 10. Firewalls （防火墙 2个）

    Netfilter是在标准Linux内核中实现的强大的包过滤器. 用户空间iptables工具用于配置. 它现在支持数据包过滤(无状态或有状态),各种网络地址和端口转换(NAT / NAPT),以及用 ...

  6. HDU 1162 Eddy's picture （最小生成树 prim）

    题目链接 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to be ...

  7. npm 安装React Devtools调试工具

    有时候没有***工具时,怎么安装React DevTool, 其一直接搜索到Chrome的插件安装即可. 其二, 可以通过下载github上的react-devtools, 然后打包,最后导入chro ...

  8. FICO年终完全手册

    FICO年终完全手册 一:系统增加配置部分 1,FBN1增加凭证号码范围,OBH2维护会计凭证号码到新的会计年度 2,KS13检查成本中心的有效期 3,KA23检查成本要素的有效期 4,KL03检查作 ...

  9. IIS8.0 部署WCF Services

    今天在Win 8的IIS上部署WCF Services,访问SVC文件时出现找不到处理程序的错误,以前遇到这个问题时都是尝试通过注册asp.net的方式处理一下,但是在Win8下这招不灵了,出现如下提 ...

  10. Java实现BF算法

    package 串的算法; public class BF { public static void main(String[] args) { String a = "aaabbaaacc ...