你的位置:首页 > Java教程

[Java教程]制作一个简洁的jquery插件


原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect


英文原文链接:http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

1,简介

对于jquery初学者来说,制作一个jquery插件还是一个比较高级的话题。最近一个月一致在倒腾jquery。因此学些了怎么把javascript代码从html文件中分离出来,对于现在所写的代码并不满意。因此,我决定去深入了解如何做一个jquery插件来使得javascript文件更加的简洁。

本文中制作的插件是基于我上一次的教程:Navigation List menu + jQuery Animate Effect Tutorial(http://www.queness.com/post/68/navigation-list-menujquery-animate-effect-tutorial)改教程中我把所有的js代码都放到了document.ready回调函数中,就像这样:


但是这一次,代码是这样的:

它看起来简洁多了,而且也容易复用到别的项目当中。

2.插件结构

关于制作jquery插件,jquery官网提供了一份非常详细的说明文档。但是,我觉得它实在是太难理解了。

为了是我们的编程生活更美好一些,简单一些,我在线研究了相关的文档。下买呢的这段代码是一段优雅的jquery插件结构。

    1. //You need an anonymous function to wrap around your function to avoid conflict

    2. 匿名包裹函数,避免了全局变量

    3. (function($){

    4.  

    5.     //Attach this new method to jQuery

    6.     $.fn.extend({

    7.         

    8.         //This is where you write your plugin's name

    9.                // jquery插件名称

    10.         pluginname: function() {

    11.  

    12.             //Iterate over the current set of matched elements

      // 迭代选择器选中的dom元素

    1.         return this.each(function() {

    2.             

    3.                 //code to be inserted here

// jquery插件的代码

  1.             

  2.         });

  3.     }

  4.     });

  5.     

  6. //pass jQuery to the function,

  7. //So that we will able to use any valid Javascript variable name

  8. //to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )        

  9. })(jQuery);

3. Plugin With Options

如果你看过了第一部分的简介,padding值是可配置的。让用户根据自己的业务需求传递一些参数给插件是很有必要的。保证每一个变量都有一个默认值是一个良好的编程实践。现在,你需要下面的这段代码:

  1. (function($){

  2.  

  3.     $.fn.extend({

  4.         

  5.         //pass the options variable to the function

  6.         pluginname: function(options) {

  7.  

  8.  

  9.             //Set the default values, use comma to separate the settings, example:

  10.             var defaults = {

  11.                 padding: 20,

  12.                 mouseOverColor : '#000000',

  13.                 mouseOutColor : '#ffffff'

  14.             }

  15.                 

  16.             var options =  $.extend(defaults, options);

  17.  

  18.         return this.each(function() {

  19.                 var o = options;

  20.                 

  21.                 //code to be inserted here

  22.                 //you can access the value like this

  23.                 alert(o.padding);

  24.             

  25.         });

  26.     }

  27.     });

  28.     

  29. })(jQuery);

     

4. The animateMenu Plugin

现在您已经知道了jquery插件的基本结构。接下来的这个插件就是基于我之前的一个教程。它接收4个参数:

  • animatePadding : Set the padding value for the animate effect

  • defaultPadding : Set the default padding value

  • evenColor : Set the color this color if index value is even number

  • oddColor : Set the color this color if index value is odd numbe

  1. (function($){

  2.     $.fn.extend({

  3.         //plugin name - animatemenu

  4.         animateMenu: function(options) {

  5.  

  6.             //Settings list and the default values

  7.             var defaults = {

  8.                 animatePadding: 60,

  9.                 defaultPadding: 10,

  10.                 evenColor: '#ccc',

  11.                 oddColor: '#eee'

  12.             };

  13.             

  14.             var options = $.extend(defaults, options);

  15.         

  16.         return this.each(function() {

  17.                 var o =options;

  18.                 

  19.                 //Assign current element to variable, in this case is UL element

  20.                 var obj = $(this);                

  21.                 

  22.                 //Get all LI in the UL

  23.                 var items = $("li", obj);

  24.                 

  25.                 //Change the color according to odd and even rows

  26.                 $("li:even", obj).css('background-color', o.evenColor);                

  27.                  $("li:odd", obj).css('background-color', o.oddColor);                    

  28.                 

  29.                 //Attach mouseover and mouseout event to the LI  

  30.                 items.mouseover(function() {

  31.                     $(this).animate({paddingLeft: o.animatePadding}, 300);

  32.                     

  33.                 }).mouseout(function() {

  34.                     $(this).animate({paddingLeft: o.defaultPadding}, 300);

  35.                 });

  36.                 

  37.         });

  38.     }

  39.     });

  40. })(jQuery);

译者注:对于web前端从业者来说,使用jquery插件自然可以提升我们的开发效率。但是我们不仅是要知其然也要知其所以然。不仅要做到会使用,也要知道其实现原理。一方面看一些业内优秀的jquery插件的源代码可以有效的提升我们的编码能力;另一方面,掌握了编写jquery插件的方法,可以把我们项目中常用的组件通过这种方式写成jquery插件,便于代码的复用,使代码更加的简洁和可维护。译者也是一个前端小沫沫,从业时间也不长,文中如果有不对的地方,还望指出,不胜感激。

注:感兴趣的可以关注笔者微信公众号,每周推送一篇前端干货