最近在看jquery插件开发，google找了很多教程看，现在总结一下，主要是对知识的一个总结和记录，很多都是参考别人的教程的，最后会贴参考链接。
最后的jquery插件模板：
(function($){
$.fn.插件名 = function(settings){
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},$.fn.插件名.defaultSettings,settings);
return this.each(function(){
debug(this);
// 引用回调函数,引用位置自己把握
if (typeof settings.initFn == 'function') { // 确保类型为函数类型
settings.initFn.call(this); // 执行回调函数
}
});
}
// 私有函数：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 插件的defaultSettings
var defaultSettings = {
initFn : null //当插件初始化完成后执行的回调函数， 默认为null
}
})(jQuery)
现在从头开始，先上jquery插件的基础模板：
(function($){
$.fn.插件名 = function(settings){
var defaultSettings = {
}
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},defaultSettings,settings);
return this.each(function(){
});
}
})(jQuery)
现在我们来分析这段模板代码：
一、首先看第一句：
(function($){
})(jQuery);
这段代码是为了创建一个匿名函数，[JavaScript中的匿名函数及函数的闭包](http://www.cnblogs.com/rainman/archive/2009/05/04/1448899.html)这篇文章详细介绍了匿名函数和闭包，可以仔细看下。匿名函数最大的用途是创建闭包，并且还可以构建命名空间，以减少全局变量的使用。
_1、模板中匿名函数的作用_
保护“$”这个变量，避免“$”这个变量与你页面中的全局变量冲突。
这点非常重要，“$”这个变量在编程语言中使用率非常高，你无法保证你所引入的其他js都是用“$”来代表“jQuery”。
_2、$与jQuery_
jQuery是jquery库定义的一个全局变量，而$这个变量相当于jQuery的简写，$的冲突率是非常高的，不同的js框架$有不同的含义，但如果都使用jQuery，那是非常繁琐的一件事，这就是
(function($){
})(jQuery);
这行代码的用处，这个匿名函数创建了闭包，意味着在这个闭包内，你可以任意的使用$这个变量，不用担心冲突的问题。
_3、匿名函数的函数体形式_
(function( x , y){
alert( x + y);
})(2 ,3 );
你可以试运行下上面的代码，再对照下模板中的第一行代码，也许你就会大致明白其形式。
(function($){
});
定义一个带有个名为“$”参数的匿名函数。
(function($){
})(jQuery);
将jQuery这个全局变量传入匿名函数，并执行匿名函数。
**二、$.fn的含义**
(function($){
$.fn.插件名= function(settings){
}
});
$.fn或者jQuery.fn本质上可以等于jQuery.prototype。
**三、jquery的继承方法$.extend**
(function($){
$.fn.插件名= function(settings){
//默认参数
var defaultSettings = {
}
/* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultSettings,settings);
}
})(jQuery);
$.extend在jquery插件开发中有个很重要的作用，就是用于合并参数。
举个例子：
(function($){
$.fn.colorTip= function(settings){
var defaultSettings = {
//颜色
color : 'yellow',
//延迟
timeout : 500
}
/* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultSettings,settings);
alert(settings.color);
}
});
//插件调用
$('a').colorTip({color:'blue'});
如果你运行以上代码，就会发现弹出的值为blue，而不再是默认的yellow。
$.extend(defaultSettings,settings);的含义是，使用settings来覆盖defaultSettings（同名键值）。
实际上.extend不止接受二个参数，相对于模板上的写法，还有下面的写法：
settings = $.extend({},defaultSettings,settings);
即不去覆盖defaultSettings（默认参数），而是合并到一个空的Object。
推荐阅读：[jQuery.extend 函数详解](http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html)，这篇文章讲解的非常到位。
**三、this**
其中的 this 关键字，指向的是调用这个插件的 jQuery 对象。
一个典型的 jQuery 对象通常包含许多 DOM 元素，所以说 jQuery 对象也被看做是 DOM 对象集。因此，如果要对对象集中的每个元素作处理，就要借助于 jQuery 的 each() 方法：
return this.each(function(){
});
附上Colortip的代码
(function($){
$.fn.colorTip = function(settings){
var defaultSettings = {
//颜色
color : 'yellow',
//延迟
timeout : 500
}
//提示框的颜色
var supportedColors = ['red','green','blue','white','yellow','black'];
/* 合并默认参数和用户自定义参数 */
settings = $.extend(true,defaultSettings,settings);
return this.each(function(){
var elem = $(this);
// 如果该对象不包含title属性，直接予以返回
if(!elem.attr('title')) return true;
// 实例化eventScheduler（定时器）
var scheduleEvent = new eventScheduler();
//实例化Tip(提示类，产生、显示、隐藏)
var tip = new Tip(elem.attr('title'));
// 产生提示框，并给提示框父容器添加样式
elem.append(tip.generate()).addClass('colorTipContainer');
// 检查提示框父容器是否有颜色样式
var hasClass = false;
for(var i=0;i<supportedColors.length;i++)
{
if(elem.hasClass(supportedColors[i])){
hasClass = true;
break;
}
}
// 如果没有，使用默认的颜色
if(!hasClass){
elem.addClass(settings.color);
}
// 鼠标滑过提示框父容器时，显示提示框
// 鼠标移出，则隐藏
elem.hover(function(){
tip.show();
//清理定时器
scheduleEvent.clear();
},function(){
//启动定时器
scheduleEvent.set(function(){
tip.hide();
},settings.timeout);
});
//删除title属性
elem.removeAttr('title');
});
}
/*
/ 定时器类
/ 这里需要你具备javascript面向对象编程方面的一些知识。
/ eventScheduler类很简单，只有二个方法，set()：添加定时器，clear ()：清理定时器
*/
function eventScheduler(){}
eventScheduler.prototype = {
set : function (func,timeout){
//添加定时器
this.timer = setTimeout(func,timeout);
},
clear: function(){
//清理定时器
clearTimeout(this.timer);
}
}
/*
/ 提示类
/ Tip也是个javascript类，具有三个方法：generate、show、hide。
/ 值得一提的是，Tip和eventScheduler类是在$.fn.colorTip函数体外。
*/
function Tip(txt){
this.content = txt;
this.shown = false;
}
Tip.prototype = {
generate: function(){
//产生提示框
return this.tip || (this.tip = $(''+this.content+
''));
},
show: function(){
//显示提示框
if(this.shown) return;
this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
this.shown = true;
},
hide: function(){
//隐藏提示框
this.tip.fadeOut();
this.shown = false;
}
}
})(jQuery);
补充优化：
1、Colortip的代码有个定时器类和提示类，这个可以看做是插件的私有函数，这样我们可以定义更多的函数而不搅乱命名空间也不暴露实现，这就是闭包的功能。代码示例：
(function($){
$.fn.插件名 = function(settings){
debug(this);
}
// 私有函数：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
})(jQuery)
2、暴露插件的默认设置
我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。
(function($){
$.fn.插件名 = function(settings){
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},$.fn.插件名.defaultSettings,settings);
return this.each(function(){
});
}
// 插件的defaultSettings
var defaultSettings = {
}
})(jQuery)
如果再结合上篇的jquery插件回调函数，可以修改jquery模板代码：
(function($){
$.fn.插件名 = function(settings){
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},$.fn.插件名.defaultSettings,settings);
return this.each(function(){
debug(this);
// 引用回调函数,引用位置自己把握
if (typeof settings.initFn == 'function') { // 确保类型为函数类型
settings.initFn.call(this); // 执行回调函数
}
});
}
// 私有函数：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 插件的defaultSettings
var defaultSettings = {
initFn : null //当插件初始化完成后执行的回调函数， 默认为null
}
})(jQuery)
自己写的一个简单例子：
(function($){
$.fn.arayzou = function(settings){
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},$.fn.arayzou.defaultSettings,settings);
return this.each(function(){
console.log('执行插件');
var $this = $(this);
$this.hover(function(){
debug();
})
$this.click(function(){
// 引用回调函数
if (typeof settings.initFn == 'function') { // 确保类型为函数类型
settings.initFn.call(this); // 执行回调函数
}
})
});
}
// 私有函数：debugging
function debug() {
console.log('私有函数');
};
// 插件的defaultSettings
var defaultSettings = {
initFn : null //当插件初始化完成后执行的回调函数， 默认为null
}
})(jQuery)
调用：
demo地址：jqueryPlug.html
文章参考：
制作jquery文字提示插件—jquery插件实战教程
jQuery插件开发全解析
A Plugin Development Pattern