教你写 jquery 插件
2018-02-17 本文已影响203人
_于易
类级别的插件开发：
1.1使用jQuery.extend(object);
jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});
1.2 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名，但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
采用命名空间的函数仍然是全局函数，调用时采用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');
通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
第二种是对象级别的插件开发
形式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);
形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。
这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.
OK,有了上面的理论基础我们就来实践一哈~，现在我来自己写一个jquery的fullpage插件。
先写好一个规定的HTML结构：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<section class="sc">1</section>
<section class="sc">2</section>
<section class="sc">3</section>
<section class="sc">4</section>
<section class="sc">5</section>
</div>
</body>
</html>
然后开发我们的插件：
(function ($){
function Slide(colors,direction){
this.colors = colors || ['pink','blue','green','yellow','gray'];
this.direction = direction || 'vertical';
this.init();
this.bind();
}
Slide.prototype.init = function($wrapper,$scs){
var _this = this;
$('html,body').css({
'width':'100%',
'height':'100%',
overflow:'hidden',
padding: 0,
margin: 0
});
this.$wrapper =$('.wrapper');
this.$scs = $('.sc');
this.curIndex = 0;
this.sliding = false;
this.$wrapper.css({
'width':'100%',
'height':'100%',
position: 'relative'
});
this.$scs.css({
position: 'relative',
'width': '100%',
'height': '100%',
'background': function(index){
return _this.colors[index];
}
});
};
Slide.prototype.bind = function(){
var _this = this;
var timer;
this.$wrapper.on('mousewheel',function(e){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
if(e.originalEvent.deltaY > 0){
if(_this.curIndex == _this.colors.length-1) return;
_this.$wrapper.animate({
top: -100 * (_this.curIndex+1) +"%"
});
_this.curIndex++;
console.log(_this.curIndex);
}
if(e.originalEvent.deltaY < 0){
if(_this.curIndex === 0) return;
_this.$wrapper.animate({
top: -100 * (_this.curIndex -1) +"%"
});
_this.curIndex--;
console.log(_this.curIndex);
}
},300);
});
};
$.mySlide = function(){
return new Slide();
};
$.mySlide();
})(jQuery);
大概写了一下jquery开发插件的思路，不是很精细，比较丑陋，希望大佬不要嘲笑我o(╯□╰)o
