您当前的位置： 首页 > 

第8章 高效开发和使用插件 (一)

发布时间：2013-12-28 16:22:00 ，浏览量：0

jQuery 的流行在很大程度上归功于其对插件的支持。插件也就是功能扩展的意思，jQuery 允许任何开发人员超越最初的库函数创建并扩展 jQuery 函数。这种开放性框架设计思路催生了无数实用型的插件，jQuery 几乎能够提供 Web 应用程序内所需的任何一种函数。

jQuery 的易扩展性吸引了越来越多的开发者和业余爱好者去研究、设计和使用 jQuery 插件。目前，全球有超过上千种不同应用需要的插件。使用这些插件能够帮助开发人员提升开发速度，节约劳动成本。最权威的插件可以访问 jQuery 官方网站 (http://plugins.jquery.com) 获取。本章将重点讲解如何创建自己的 jQuery 插件，并就网络上比较经典的几个插件设计原理和使用进行介绍。

8.1 创建 jQuery 插件

网络上流传着成百上千的第三方插件，这些插件虽然能够增强我们的编程体验，但是很难满足所有设计需要，特别是个性化开发需求。如果自己编写的代码可以重用，或者供其他用户参考，很自然任何人都希望把这些代码进行封装，打包为一个新插件。这个实现过程并不困难，只要读者认真阅读本节内容即可轻松实现。

8.1.1 jQuery 插件的类型

jQuery 插件主要分为三种类型，说明如下。

1. jQuery 方法

这种类型的插件是把一些常用或者重复使用的功能定义为函数，然后绑定到 jQuery 对象上，从而成为 jQuery 对象的一个扩展方法。

目前，大部分jQuery插件都是这种类型的插件，由于这种插件是将对象方法封装起来，在 jQuery 选择器获取 jQuery 对象的过程中进行操作，从而发挥 jQuery 强大的选择器优势。有很多 jQuery 内部方法，也是在 jQuery 脚本内部通过这种形式插入到 jQuery 框架中的，如 parent() 、appendTo() 和 addClass() 等方法。

2.全局函数

也可以把自定义的功能函数独立附加到 jQuery 命名空间下，从而作为 jQuery 作用域下的一个公共函数使用。例如，jQuery 的 ajax() 方法就是利用这种途径内部定义的全局函数。

==由于全局函数没有被绑定到 jQuery 对象上，故不能够在选择器获取的 jQuery 对象上调用。需要通过 jQuery.fn() 或者 $.fn() 方式进行引用。==

3.选择器

jQuery 提供了强大的选择器，当然在个性化开发中，读者也可能会感觉到这些选择器不够用，或者使用不是很方便。这个时候，我们就可以考虑自定义选择器，以满足特定环境下的选择元素需要。

8.1.2 解析 jQuery 插件机制

为了方便用户创建插件，jQuery 自定义了 jQuery.extend() 和 jQuery.fn.extend() 方法。其中 jQuery.extend() 方法能够创建全局函数或者选择器，而 jQuery.fn.extend() 方法能够创建 jQuery 对象方法。

例如，下面的示例将在 jQuery 命名空间上创建两个公共函数。

[html] view plain copy
  1. <scripttype="text/javascript">
  2. jQuery.extend({//扩展jQuery的公共函数
  3. minValue:function(a,b){//比较两个参数值，返回最小值
  4. returna<b?a:b;
  5. },
  6. maxValue:function(a,b){//比较两个参数值，返回最大值
  7. returna<b?b:a;
  8. }
  9. });
  11. $("input").click(function(){
  12. vara=prompt("请输入一个数值?");
  13. varb=prompt("请再输入一个数值?");
  14. varc=jQuery.minValue(a,b);
  15. vard=jQuery.maxValue(a,b);
  17. alert("你输入的最大值是："+d+"\n你输入的最小值是："+c);
  18. });
  19. });
  21. for(varnameinc){//遍历对象c，显示合并后的对象c的具体属性和值
  22. $("div").html($("div").html()+"<br/>"+name+":"+c[name]);
  23. }
  24. });
  26. varoptions=jQuery.extend({//默认参数选项列表
  27. name1:value1,
  28. name2:value2,
  29. name3:value3,
  30. },options);//使用函数的参数覆盖或合并到默认参数选项列表中
  31. //函数体
  32. }
  34. fn({name1:value2,name2:value3,name3:value1});//覆盖新值
  35. fn({name4:value4,name5:value5});//添加新选项
  36. fn();//保持默认参数值
  38. returna<b?a:b;
  39. };
  40. jQuery.maxValue=function(a,b){
  41. returna<b?b:a;
  42. };
  44. minValue:function(a,b){
  45. returna<b?a:b;
  46. },
  47. maxValue:function(a,b){
  48. returna<b?b:b;
  49. }
  50. };
  52. alert('这是jQuery对象方法!');
  53. };
  55. alert('这是jQuery对象方法!');
  56. };
  57. $(function(){
  58. $("input").click(function(){//绑定click事件
  59. $(this).test();//在当前的jQuery对象上调用test()方法
  60. });
  61. });
  63. alert(this[0].nodeName);//提示当前jQuery对象的DOM节点名称
  64. };
  65. $(function(){
  66. $("input").click(function(){//绑定click事件
  67. $(this).test();//在当前的jQuery对象上调用test()方法
  68. });
  69. });
  71. this.each(function(){//遍历所有匹配的元素，此处的this表示对象集合，即jQuery对象
  72. alert(this.nodeName);//显示当前元素的节点名称，此处的this表示元素对象
  73. });
  74. };
然后，在调用该方法时，就不用担心 jQuery 选择器所匹配的元素有多少了。例如，在下面的示例中，当单击不同类型的元素，会提示当前元素的节点名称。
[html] view plain copy
  1. <scripttype="text/javascript">
  2. jQuery.fn.test=function(){
  3. this.each(function(){//遍历所有匹配的元素，此处的this表示对象集合，即jQuery对象
  4. alert(this.nodeName);//显示当前元素的节点名称，此处的this表示元素对象
  5. });
  6. };
  7. $(function(){
  8. $("body*").click(function(){//选择body元素下所有元素
  9. $(this).test();//为当前元素调用test()方法，提示当前DOM元素对象的节点名称
  10. });
  11. });
  13. returnthis.each(function(){//返回迭代的jQuery对象
  14. alert(this.nodeName);
  15. });
  16. };
然后，我们就可以在应用示例中连写行为了。例如，在下面的示例中，先弹出提示节点名称的信息，然后使用当前节点名称改写当前元素内包含的信息，最后再慢慢隐藏该元素。
[html] view plain copy
  1. <scripttype="text/javascript">
  2. jQuery.fn.test=function(){
  3. returnthis.each(function(){//返回迭代的jQuery对象
  4. alert(this.nodeName);
  5. });
  6. };
  7. $(function(){
  8. $("body*").click(function(){//选择body元素下所有元素
  9. $(this).test().html(this.nodeName).hide(4000);//行为连写
  10. });
  11. });
  13. test:function(){
  14. returnthis.each(function(){
  15. alert(this.nodeName);
  16. });
  17. }
  18. });
jQuery.fn.extend()方法仅包含一个参数，该参数是一个对象直接量，是以名/值对形式组成的多个属性，名称表示方法名称，而值表示函数体。因此，在这个对象直接量中可以附加多个属性，为 jQuery 对象同时定义多个方法。

针对上面定义的 test() 方法，同样可以在 jQuery 选择器中直接调用。

[html] view plain copy
  1. <scripttype="text/javascript">
  2. jQuery.fn.extend({
  3. test:function(){
  4. returnthis.each(function(){
  5. alert(this.nodeName);
  6. });
  7. }
  8. });
  10. $(function(){
  11. $("body*").click(function(){//选择body元素下所有元素
  12. $(this).test().html(this.nodeName).hide(4000);//行为连写
  13. });
  14. });
关注
打赏
1688896170
查看更多评论

暂无认证

  • 0浏览

    0关注

    108697博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

[ 申请 ]友情链接：

快连vpn 快连 快连vpn 搜外友链 笔趣阁 爱思助手 ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.4317s