新手如何开始写jq插件

最新推荐文章于 2022-07-01 07:54:53 发布

baibaibeaytiful

最新推荐文章于 2022-07-01 07:54:53 发布

阅读量2.6k

点赞数 2

分类专栏： web前端 javascript 文章标签： jquery js 插件开发

本文链接：https://blog.csdn.net/wzdlovewen/article/details/52199919

版权

web前端 javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

插件的意义在于保护了整体的js的稳定性，是在jquery这个命名空间里发生的事，这样即省事，方便他人的调用，而且根据需求提供不同的参数，让对象继承这些参数然后改动插件，而不是人为的去改动函数，而且调用极为简单，这是我对jq插件的理解。

那么如何去写自己第一个插件呢。

昨天同事用的一个滚动广告的插件，说不能用了，不知道为什么。那我说索性我给你写一个吧，那么我们通过我写的这个简易的插件来初探插件的玄妙之处。

;(function($){
	$.fn.wroll=function(option){	
		var data={
			'time':3000,
			'rollheight':20,
			'movespeed':1000
		}
		var options=$.extend(data,option);

		this.each(function(){			
			var that=this;
			var nowtop=$(this).children().position().top;
			var vigro=setInterval(function(){
			console.log($(that).children().position().top);
			nowtop=nowtop-options.rollheight;
			if(Math.abs(nowtop)>($(that).children().height()-options.rollheight)){nowtop=0;}
			$(that).children().animate({'top':nowtop},options.movespeed)
			},options.time);			
		})	
	}
})(jQuery)

首先是通过

(function($){})(jQuery);

这样的一个立刻执行函数把我们的插件封装在一个函数体内。把jQuery传进去，用$符号去接收。

$.fn.name

这是jquery为我们进行的一个拓展函数，name就是我们这个插件的名字啦。

option是我们要传的参数，当然你也可以不传，因为

var data={
			'time':3000,
			'rollheight':20,
			'movespeed':1000
		}

这是我们写默认参数的地方。

我们通过

var options=$.extend(data,option);

这样一个extend方法，就是像对象里面的继承，一样，如果属性想同就会覆盖，如果不相同，就不会覆盖。我们用这种方式让他们的想同属性融合，形成新的参数，这样我们就完成了用户的传递。

this.each(function(){			
			var that=this;
			var nowtop=$(this).children().position().top;
			var vigro=setInterval(function(){
			console.log($(that).children().position().top);
			nowtop=nowtop-options.rollheight;
			if(Math.abs(nowtop)>($(that).children().height()-options.rollheight)){nowtop=0;}
			$(that).children().animate({'top':nowtop},options.movespeed)
			},options.time);			
		})

这样的一些操作，就是dom的基本操作了，封装的插件最重要的就是两点，如何让参数和自带的参数融合，还有就是如何进行dom操作。

最后附上测试用的html码

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0; padding:0;}
.one{ height:20px; width:100px; overflow:hidden; position:relative;}
.two{position:absolute;width:100px; }
p{line-height:20px;}
</style>
<script src="wsroll.js"></script>
<script>
$(function(){

$('.one').wroll({'time':1500,'movespeed':100});

})
	

</script>

</HEAD>

<BODY>

<div class="one" >
	<div class="two">
		<p>111111111111</p>
		<p>111111111111</p>
		<p>111111111111</p>
		<p>111111111111</p>
		<p>111111111111</p>
		<p>111111111111</p>
		<p>111111111111</p>
	</div>
</div>


</BODY>
</HTML>

希望可以对新手有参考意义