jQuery 插件开发教程
一、入门
编写一个jQuery插件开端于给jQuery.fn参加新的功效属性，此处增加的对象属性的名称就是你插件的名称：
代码如下:
jQuery.fn.myPlugin = function(){
//你本人的插件代码
};会员非常喜爱的$符号哪里去了？ 它依然存在，但是，为了不和其他JavaScript库冲突，我们最好将jQuery传递给一个自我施行的封闭程序，jQuery在此程序中映射为$符号，这样可以幸免$号被其他库覆写。
代码如下:
(function ($) {
$.fn.myPlugin = function () {
//你本人的插件代码
};
})(jQuery);在这个封闭程序中，我们可以无穷制的使用$符号来表示jQuery函数。
二、环境
此刻，我们可以开端编写实际的插件代码。 但是，在这此前，我们必需得对插件所处的环境有个概念。 在插件的范畴里， this关键字代表了这个插件将要施行的jQuery对象， 这里容易发生一个遍及的误区，由于在其他包括callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会致使开发者误将this关键字无谓的包在jQuery中，如下所示。
代码如下:
(function ($) {
$.fn.myPlugin = function () {
//此处没有必要将this包在$号中如$(this)，由于this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$('#element').myPlugin();三、根基知识
此刻，我们懂得了jQuery插件的根基知识，让我们写一个插件，做一些事情。
代码如下:
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度这是一个简便的插件，利用.height()返回页面中高度最大的div元素的高度。
四、保护Chainability
许多时候，一个插件的企图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个办法。 这是jQuery的设计之美，是jQuery如此受欢迎的缘由之一。 因此，要保持一个插件的chainability，你必需确保你的插件返回this关键字。
代码如下:
(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以连续被jQuery办法如.css操纵。 因此，假如你的插件不返回固有的价值，你应当总是在其作用范畴内返回this关键字。 此外，你大概会推断出，传递给插件的参数将会在插件的作用范畴内被传递。 因此，在前面的例子，字符串'width'变成了插件的类型参数。
五、默许值和选项
关于比力复杂的和供给了很多选项可定制的的插件，最好有一个当插件被调取的时候可以被拓展的默许设定(通过使用$.extend)。 因此，相关于调取一个有大量参数的插件，你可以调取一个对象参数，包括你了你想覆写的设定。
代码如下:
(function ($) {
$.fn.tooltip = function (options) {
//创立一些默许值，拓展任何被供给的选项
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代码
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});在这个例子中，调取tooltip插件时覆写了默许设定中的location选项，background-color选项保持默许值，所以终究被调取的设定值为：
代码如下:
{
'location': 'left',
'background-color': 'blue'
}这是一个很灵敏的方式，供给一个高度可配置的插件，而无需开发人员定义所有可用的选项。
六、命名空间
准确命名空间你的插件是插件开发的一个非常重要的一部分。 准确的命名空间，可以包管你的插件将有一个非常低的时机被其他插件或统一页上的其他代码覆盖。 命名空间也使得你的生活作为一个插件开发人员更容易，由于它可以帮忙你更好地跟踪你的办法，事件和数据。
七、插件办法
在任何状况下，一个独自的插件不该该在jQuery.fnjQuery.fn对象里有多个命名空间。
代码如下:
(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);这是不被激励的，由于它$.fn使$.fn命名空间纷乱。 为理解决这个问题，你应当收集对象文本中的所有插件的办法，通过传递该办法的字符串名称给插件以调取它们。
代码如下:
(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 办法调取
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//调取init办法
$('div').tooltip();
//调取init办法
$('div').tooltip({
foo: 'bar'
});
// 调取hide办法
$('div').tooltip('hide');
//调取Update办法
$('div').tooltip('update', 'This is the new tooltip content!');这品种型的插件架构同意您封装所有的办法在父包中，通过传递该办法的字符串名称和额外的此办法需要的参数来调取它们。 这种办法的封装和架构类型是jQuery插件社区的标准，它被很多的插件在使用，包罗jQueryUI中的插件和widgets。
八、事件
一个不为人知bind办法的功效即同意绑定事件命名空间。 假如你的插件绑定一个事件，一个很好的做法是给予此事件命名空间。 通过这种方式，当你在解除绑定的时候不会干扰其他大概已经绑定的统一类型事件。 你可以通过追加命名空间到你需要绑定的的事件通过 ‘.<namespace>'。
代码如下:
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');在这个例子中，当tooltip通过init办法初始化时，它将reposition办法绑定到resize事件并给reposition非那办法给予命名空间通过追加.tooltip。 稍后， 当开发人员需要烧毁tooltip的时候，我们可以同时解除其中reposition办法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够平安地解除事件的绑定并不会影响到此插件之外的绑定。
九、数据
平常在插件开发的时候，你大概需要记载或者检查你的插件可否已经被初始化给了一个元素。 使用jQuery的data办法是一个很好的基于元素的记载变量的途径。尽管如此，相关于记载大量的不一样名字的别离的data, 使用一个独自的对象留存所有变量，并通过一个独自的命名空间读取这个对象不失为一个更好的办法。
代码如下:
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text: $this.attr('title')
});
// If the plugin hasn't been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。
十、总结和最好做法
编写jQuery插件同意你做出库，将最有用的功效集成到可重用的代码，可以节约开发者的时间，使开发更高效。 开发jQuery插件时，要紧记：
1.始终包裹在一个封闭的插件：
代码如下:
(function($) {
/* plugin goes here */
})(jQuery);2.不要冗余包裹this关键字在插件的功效范畴内
3.除非插件返回特定值，不然总是返回this关键字来保持chainability 。
4.传递一个可拓展的默许对象参数而不是大量的参数给插件。
5.不要在一个插件中屡次命名不一样办法。
3.始终命名空间的办法，事件和数据。
引荐教程：《JS教程》
以上就是jQuery 插件开发教程的具体内容，更多请关注百分百源码网其它相关文章！
