深刻理解jQuery插件开发总结（一）

因为这篇文章比较长，因此分了四个阶段讲，从简单的入门级到最后到综合级，有些列子和图片都是转载其余博主的，但愿对想写插件对同窗会有帮助。这里分享个很久以前写的一个jquery插件（网站的功能引导插件，思路应该有些落伍了，仅供参考）： javascript

github.com/BothEyes199…

（入门级）

1、插件的几种写法

首先，在具体说明编写插件以前，咱们先假定一个使用场景：有一个HTML页面，页面上放置了一个5行3列的表格。css

<table id="newTable">
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
</table>
复制代码

要实现的功能是：鼠标移到表格的某一行时，当前行高亮显示，其余行正常。java

利用JQuery插件实现上述功能。经常使用的JQuery插件有以下几种写法：jquery

1.对JQuery自身的扩展插件

这种插件是对JQuery自身的方法库进行扩展的。在使用的时候经过$.MethodName()的方式直接使用。git

$.extend({
    handleTableUI : function(table){
        var thisTable = $("#" + table);
        $(thisTable).find("tr").bind("mouseover", function () {
            $(this).css({ color: "#ff0011", background: "blue" });
        });
        $(thisTable).find("tr").bind("mouseout", function () {
            $(this).css({ color: "#000000", background: "white" });
        });
    }
});
复制代码

说明：当要对JQuery自身进行扩展的时候，须要采用$.extend();的形式进行开发，JQuery的extend()方法为咱们提供了扩展 JQuery自身的方式，在extend()方法中，咱们采用{...}的形式编写具体的方法体。其中，最重要的是要定义咱们本身的扩展方法，如示例中的 handleTableUI。定义的方式是：方法名 : function(参数){ 方法体 }。经过此种方式咱们就能够定义JQuery本身的扩展方法，并且这个方法能够在web页面经过智能提示显示出来。github

页面中调用的代码以下：web

<script type="text/javascript">
    $(document).ready(function () {
        $.handleTableUI("newTable");
    });
</script>
复制代码

二、对JQuery对象的插件开发

形式1：bash

(function($){  
   $.fn.extend({  
    pluginName:function(opt,callback){  
              // Our plugin implementation code goes here.   
    }  
   }) 
})(jQuery);  
复制代码

形式2：markdown

(function($) {   
    $.fn.pluginName = function() {  
         // Our plugin implementation code goes here.  
    };  
})(jQuery);  
复制代码

使用这种插件的扩展上面的实例jquery插件

(function ($) {
    $.fn.setTableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
            $(thisTable).find("tr").bind("mouseover", function () {
                $(this).css({ color: "#ff0011", background: "blue" });
            });
            $(thisTable).find("tr").bind("mouseout", function () {
                $(this).css({ color: "#000000", background: "white" });
            });
        });
    };
})(jQuery);
复制代码

说明：当要对页面元素进行JQuery扩展时，须要采用(function($){...})(JQuery);的方式进行开发。在“...”处，定义咱们本身的方法，定义方式是：$.fn.自定义方法名 = function(参数){...};的形式定义扩展方法的具体内容。在页面调用的时候不一样于对JQuery自身的扩展。

具体调用代码以下：

<script type="text/javascript">
    $(document).ready(function () {
        $("#newTable").setTableUI();
    });
</script>
复制代码

2、编写jQuery插件时，必定要注意如下列出的地方

一、插件的推荐命名方法为：jquery.[插件名].js 二、全部的对象方法都应当附加到JQuery.fn对象上面，而全部的全局函数都应当附加到JQuery对象自己上。三、在插件内部，this指向的是当前经过选择器获取的JQuery对象，而不像通常方法那样，内部的this指向的是DOM元素。
四、能够经过this.each 来遍历全部的元素

五、全部方法或函数插件，都应当以分号结尾，不然压缩的时候可能会出现问题。为了更加保险写，能够在插件头部添加一个分号（；），以避免他们的不规范代码给插件带来影响。六、插件应该返回一个JQuery对象，以便保证插件的可链式操做。七、避免在插件内部使用$做为JQuery对象的别名，而应当使用完整的JQuery来表示。这样能够避免冲突。

八、在JQuery命名空间下声明只声明一个单独的名称九、接受options参数，以便控制插件的行为例如

// plugin definition 
$.fn.hilight = function(options) { 
  var defaults = { 
    foreground: 'red', 
    background: 'yellow' 
  }; 
  // Extend our default options with those provided. 
  var opts = $.extend(defaults, options); 
  // Our plugin implementation code goes here. 
}; 
复制代码

咱们的插件能够这样被调用

$('#myDiv').hilight({ 
  foreground: 'blue' 
});
复制代码

十、暴露插件的默认设置，以便外面能够访问例如

.fn.hilight = function(options) {

  // Extend our default options with those provided.

  // Note that the first arg to extend is an empty object - 
  // this is to keep from overriding our "defaults" object. 
  var opts = $.extend({}, $.fn.hilight.defaults, options); 
  // Our plugin implementation code goes here. 
}; 
// plugin defaults - added as a property on our plugin function 
$.fn.hilight.defaults = { 
  foreground: 'red', 
  background: 'yellow' 
};  
复制代码