编写jquery插件其实非常简单,代码结构也比较固定,只需要注意闭包和$.extends的使用即可。
下面以一个非常简单的higher插件来讲解jquery插件的编写过程。
higher插件作用是:当鼠标移到元素上时,高度变高,移走之后恢复。
首先,我们需要一个闭包来封装代码,避免污染window:
(function($) {
})(jQuery);
然后 我们需要把自己的插件添加到jquery的原型,即$.fn上,直接使用$.fn.extend方法即可:
(function($) {
$.fn.extend({
pluginName: function() {
}
})
})(jQuery);
当然,如果你不想用extend,直接添加 $.fn.pluginName来添加也行。
接下来就是一般插件都需要做的,提供对多个元素的支持。因为jquery选择器很可能会选择多个元素,我们需要提供对多个元素的支持,这里就需要用到 this.each方法来遍历选中的元素:
(function($) {
$.fn.extend({
pluginName: function() {
return this.each(function() {
// here is your code
});
}
})
})(jQuery);
至此,基本结构已经完成,下面就是如何实现插件的逻辑。
在实现上要注意利用闭包隐藏私有方法,然后注意一般如何使用options和defaults。这里,我们执行高度计算的函数是一个私有函数higher,整个插件代码如下:
(function($) {
// 私有方法放在这里
var higher = function (h, percent) {
return h * (100+percent) / 100;
}
// 拓展jquery 原型
$.fn.extend({
higher: function(options) {
var defaults = { // 默认设置
percent: 20
};
var settings = $.extend(defaults, options);
return this.each(function() { //遍历dom
var $this = $(this);
var old_ = $this.height();
var new_ = higher(old_, settings.percent)
$this.on("mouseover", function() {
$this.height(new_);
});
$this.on("mouseout", function() {
$this.height(old_);
});
});
}
});
})(jQuery)
最后这样使用插件:
$('xxx').higher();
$('xxx').higher({percent:50});