jQuery 插件简单模板

时间:2021-11-16 05:12:14
/*!
* Copyright yunos.com All rights reserved.
* jquery.scrollspy.js
* @author v10258@qq.com
* @version 0-0-1
*/
(function ($) { // contructor function
var ScrollSpy = function (element, options) {
this.element = $(element);
this.options = $.extend({}, ScrollSpy.defaults, options || {});
this.anchorArr = $(element).find('a');
this.init();
}; // default config
ScrollSpy.defaults = {
scrollEle: $(window)
}; // prototype
ScrollSpy.prototype = {
constractor: ScrollSpy,
init: function () {
var self = this,
element = this.element,
scrollEle = this.options.scrollEle,
anchorData,
scrollTop; scrollEle.on('scroll', function () {
// The realization of the bad dynamic acquisition
anchorData = self.getAnchorData();
scrollTop = $(this).scrollTop();
for (var i = 0, len = anchorData.length; i < len; i++) {
if (anchorData[i].min <= scrollTop && scrollTop < anchorData[i].max) {
$(anchorData[i].author).parent().addClass('current').siblings().removeClass('current');
break;
}
}
});
},
getAnchorData: function () {
var anchorArr = this.anchorArr,
active,
activeDom,
anchorTargetArr = []; anchorArr.each(function (i, n) {
active = $($(this).attr('href'));
activeDom = active[0];
anchorTargetArr.push({
ele: activeDom,
author: this,
min: active.offset().top,
max: active.offset().top + active.height()
});
});
return anchorTargetArr;
},
distroy: function(){
this.element.removeData('scrollspy');
this.options.scrollEle.off('scroll');
}
}; // bridging
$.fn.scrollspy = function (option) {
return this.each(function () {
var $this = $(this),
data = $this.data('scrollspy'),
options = typeof option == 'object' && option; if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)));
if (typeof option == 'string') data[option]();
});
};
})(jQuery);

  个人感觉,写插件,插件的具体结构,能用原生结构,还是用原生结构的好,最后桥接在jquery上.

  如果像下面这样,看起来是不是有点 蛋疼呢。

(function ($) {
$.love.defaults = {
// ......
};
$.love = function (element, o) {
this.element = element;
this.options = $.extend({}, $.love.defaults, o);
// ......
}; var $love = $.love;
$love.fn = $love.prototype = {
verson: '0.0.1'
// ......
};
$love.fn.extend = $love.extend = $.extend; $love.fn.extend({
metod: function () { }
// ......
}); $.fn.ilove = function (o) {
// ......
};
})(jQuery);