由于这篇文章比较长,所以分了四个阶段讲,从简单的入门级到最后到综合级,有些列子和图片都是转载其他博主的,希望对想写插件对同学会有帮助。这里分享个好久之前写的一个jquery插件(网站的功能引导插件,思路应该有些落伍了,仅供参考):
https://github.com/BothEyes1993/pageWalk
(入门级)
一、插件的几种写法
首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面,页面上放置了一个5行3列的表格。
<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>
要实现的功能是:鼠标移到表格的某一行时,当前行高亮显示,其他行正常。
利用JQuery插件实现上述功能。常用的JQuery插件有如下几种写法:
1.对JQuery自身的扩展插件
这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。
$.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页面通过智能提示显示出来。
页面中调用的代码如下:
<script type="text/javascript">
$(document).ready(function () {
$.handleTableUI("newTable");
});
</script>
2、 对JQuery对象的插件开发
形式1:
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
形式2:
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(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>
二、编写jQuery插件时,一定要注意以下列出的地方
1、插件的推荐命名方法为:jquery.[插件名].js
2、所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上。
3、在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。
4、可以通过this.each 来遍历所有的元素
5、所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分号(;),以免他们的不规范代码给插件带来 影响。
6、插件应该返回一个JQuery对象,以便保证插件的可链式操作。
7、避免在插件内部使用$作为JQuery对象的别名,而应当使用完整的JQuery来表示。这样可以避免冲突。
8、在JQuery命名空间下声明只声明一个单独的名称
9、接受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'
});
10、暴露插件的默认设置 ,以便外面可以访问
例如
.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'
};
11、适当地将子函数提供给外部访问调用
12、保持私有函数
13、支持元数据插件