新手如何开始写jq插件

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

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

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

[html] view plain copy
  1. ;(function($){  
  2.     $.fn.wroll=function(option){      
  3.         var data={  
  4.             'time':3000,  
  5.             'rollheight':20,  
  6.             'movespeed':1000  
  7.         }  
  8.         var options=$.extend(data,option);  
  9.   
  10.         this.each(function(){             
  11.             var that=this;  
  12.             var nowtop=$(this).children().position().top;  
  13.             var vigro=setInterval(function(){  
  14.             console.log($(that).children().position().top);  
  15.             nowtop=nowtop-options.rollheight;  
  16.             if(Math.abs(nowtop)>($(that).children().height()-options.rollheight)){nowtop=0;}  
  17.             $(that).children().animate({'top':nowtop},options.movespeed)  
  18.             },options.time);              
  19.         })    
  20.     }  
  21. })(jQuery)  


首先是通过

[html] view plain copy
  1. (function($){})(jQuery);  
这样的一个立刻执行函数把我们的插件封装在一个函数体内。把jQuery传进去,用$符号去接收。

[html] view plain copy
  1. $.fn.name  

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

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

[html] view plain copy
  1. var data={  
  2.             'time':3000,  
  3.             'rollheight':20,  
  4.             'movespeed':1000  
  5.         }  
这是我们写默认参数的地方。

我们通过

[html] view plain copy
  1. var options=$.extend(data,option);  

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

[html] view plain copy
  1. this.each(function(){             
  2.             var that=this;  
  3.             var nowtop=$(this).children().position().top;  
  4.             var vigro=setInterval(function(){  
  5.             console.log($(that).children().position().top);  
  6.             nowtop=nowtop-options.rollheight;  
  7.             if(Math.abs(nowtop)>($(that).children().height()-options.rollheight)){nowtop=0;}  
  8.             $(that).children().animate({'top':nowtop},options.movespeed)  
  9.             },options.time);              
  10.         })    

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

最后附上测试用的html码

[html] view plain copy
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE> New Document </TITLE>  
  4. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  
  5. <style>  
  6. *{margin:0; padding:0;}  
  7. .one{ height:20px; width:100px; overflow:hidden; position:relative;}  
  8. .two{position:absolute;width:100px; }  
  9. p{line-height:20px;}  
  10. </style>  
  11. <script src="wsroll.js"></script>  
  12. <script>  
  13. $(function(){  
  14.   
  15. $('.one').wroll({'time':1500,'movespeed':100});  
  16.   
  17. })  
  18.       
  19.   
  20. </script>  
  21.   
  22. </HEAD>  
  23.   
  24. <BODY>  
  25.   
  26. <div class="one" >  
  27.     <div class="two">  
  28.         <p>111111111111</p>  
  29.         <p>111111111111</p>  
  30.         <p>111111111111</p>  
  31.         <p>111111111111</p>  
  32.         <p>111111111111</p>  
  33.         <p>111111111111</p>  
  34.         <p>111111111111</p>  
  35.     </div>  
  36. </div>  
  37.   
  38.   
  39. </BODY>  
  40. </HTML>  

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

tags: JavaScript