您当前的位置： 首页 > 

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

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

8.1.8 封装 jQuery 插件

上面几节就 jQuery 插件的创建方法进行了详细讲解，一般对外发布的自定义插件都应该进行封装，封装的插件还应该符合规范，只有这样所创建的插件才具有推广价值，并得到其他用户的喜爱。

封装 jQuery 插件的第一步是定义一个独立域，代码如下所示。

[html] view plain copy
  1. <scripttype="text/javascript">
  2. (function($){
  3. //自定义插件代码
  4. })(jQuery);//封装插件
  6. $.extend($.fn,{//jQuery对象方法扩展
  7. //函数列表
  8. });
  9. })(jQuery);//封装插件
一般插件都会接受参数，用来控制插件的行为，根据 jQuery 设计习惯，我们可以把所有参数以列表形式封装在选项对象中进行传递。 例如，对于设置元素字体颜色的插件，应该允许用户设置字体颜色，同时还应该考虑如果用户没有设置颜色，则应确保使用默认色进行设置。实现代码如下所示。
[html] view plain copy
  1. (function($){
  2. $.extend($.fn,{//jQuery对象方法扩展
  3. color:function(options){//自定义插件名称
  4. varoptions=$.extend({//参数选项对象处理
  5. bcolor:"white",//背景色默认值
  6. fcolor:"black"//前景色默认值
  7. },options);
  8. //函数体
  9. }
  10. });
  11. })(jQuery);//封装插件
最后，设计插件自定义功能代码，如下所示。
[html] view plain copy
  1. (function($){
  2. $.extend($.fn,{//jQuery对象方法扩展
  3. color:function(options){//自定义插件名称
  4. varoptions=$.extend({//参数选项对象处理
  5. bcolor:"white",//背景色默认值
  6. fcolor:"black"//前景色默认值
  7. },options);
  8. returnthis.each(function(){//返回匹配的jQuery对象
  9. $(this).css("color",options.fcolor);//遍历设置每个DOM元素的字体颜色
  10. $(this).css("backgroundColor",options.bcolor);//遍历设置每个DOM元素的背景色
  11. });
  12. }
  13. });
  14. })(jQuery);//封装插件
完成插件封装之后，我们不妨来测试一下自定义的 color() 方法。代码如下。
[html] view plain copy
  1. <scripttype="text/javascript">
  2. (function($){
  3. $.extend($.fn,{
  4. color:function(options){//自定义插件名称
  5. varoptions=$.extend({//参数选项对象处理
  6. bcolor:"white",//背景色默认值
  7. fcolor:"black"//前景色默认值
  8. },options);
  9. returnthis.each(function(){//返回匹配的jQuery对象
  10. $(this).css("color",options.fcolor);//遍历设置每个DOM元素的字体颜色
  11. $(this).css("backgroundColor",options.bcolor);//遍历设置每个DOM元素的背景颜色
  12. });
  13. }
  14. });
  15. })(jQuery);//封装插件
  17. $(function(){//页面初始化
  18. $("h1").color({//设置标题的前景色和背景色
  19. bcolor:"#eea",
  20. fcolor:"red"
  21. });
  22. });
  24. $.extend($.fn,{
  25. color:function(options){
  26. varoptions=$.extend({},$.fn.color.defaults,options);
  27. returnthis.each(function(){//返回匹配的jQuery对象
  28. $(this).css("color",options.fcolor);//遍历设置每个DOM元素的字体颜色
  29. $(this).css("backgroundColor",options.bcolor);//遍历设置每个DOM元素的背景颜色
  30. });
  31. }
  32. });
  33. $.fn.color.defaults={//独立设置$.fn.color对象的默认参数值
  34. bcolor:"white",
  35. fcolor:"black"
  36. };
  37. })(jQuery);//封装插件
  39. $(function(){//页面初始化
  40. $("h1").color({//设置标题的前景色和背景色
  41. bcolor:"#eea",
  42. fcolor:"red"
  43. });
  44. });
  46. $.extend($.fn,{
  47. color:function(options){
  48. varoptions=$.extend({},$.fn.color.defaults,options);
  49. returnthis.each(function(){//返回匹配的jQuery对象
  50. $(this).css("color",options.fcolor);//遍历设置每个DOM元素的字体颜色
  51. $(this).css("backgroundColor",options.bcolor);//遍历设置每个DOM元素的背景颜色
  52. });
  53. }
  54. });
  55. $.fn.color.defaults={//独立设置$.fn.color对象的默认参数值
  56. bcolor:"white",
  57. fcolor:"black"
  58. };
  59. })(jQuery);//封装插件
  61. $(function(){//页面初始化
  62. $.fn.color.defaults={//预设默认的前景色和背景色
  63. bcolor:"#eea",
  64. fcolor:"red"
  65. };
  66. $("h1").color();
  67. $("p").color({bcolor:"#fff"});//为段落文本设置默认色，同时覆盖背景色为白色
  68. $("div").color();//为盒子设置默认色
  69. });
  71. //扩展方法
  72. };
这个技巧就可以允许其他用户定义和传递参数到 Cycle 插件内部。

例如，继续以上一节的示例为基础，我们为其添加一个格式化的扩展功能，这样用户在设置颜色的同时，还可以根据需要适当进行格式化功能设计，如加粗、斜体、放大等功能操作。扩展的 color() 插件代码如下所示。

[html] view plain copy
  1. (function($){
  2. $.extend($.fn,{
  3. color:function(options){
  4. varoptions=$.extend({},$.fn.color.defaults,options);//覆盖原来参数
  5. returnthis.each(function(){
  6. $(this).css("color",options.fcolor);
  7. $(this).css("backgroundColor",options.bcolor);
  8. var_html=$(this).html();//获取当前元素包含的HTML字符串
  9. _html=$.fn.color.format(_html);//调用格式化功能函数对其进行格式化
  10. $(this).html(_html);//使用格式化的HTML字符串重写当前元素内容
  11. });
  12. }
  13. });
  14. $.fn.color.defaults={//独立设置$.fn.color对象的默认参数值
  15. bcolor:"white",
  16. fcolor:"black"
  17. };
  18. $.fn.color.format=function(str){//开放的功能函数
  19. returnstr;
  20. }
  21. })(jQuery);//封装插件
在上面的示例中，通过开发的方式定义了一个 format() 功能函数，在这个功能函数中默认没有进行格式化设置，然后在 color() 函数体内利用这个开放性功能函数格式化当前元素内的 HTML 字符串。

例如，下面的示例调用了 color() 插件，同时在调用时分别扩展了它的格式化功能。

[html] view plain copy
  1. <scripttype="text/javascript">
  2. (function($){
  3. $.extend($.fn,{
  4. color:function(options){
  5. varoptions=$.extend({},$.fn.color.defaults,options);//覆盖原来参数
  6. returnthis.each(function(){
  7. $(this).css("color",options.fcolor);
  8. $(this).css("backgroundColor",options.bcolor);
  9. var_html=$(this).html();//获取当前元素包含的HTML字符串
  10. _html=$.fn.color.format(_html);//调用格式化功能函数对其进行格式化
  11. $(this).html(_html);//使用格式化的HTML字符串重写当前元素内容
  12. });
  13. }
  14. });
  15. $.fn.color.defaults={//独立设置$.fn.color对象的默认参数值
  16. bcolor:"white",
  17. fcolor:"black"
  18. };
  19. $.fn.color.format=function(str){//开放的功能函数
  20. returnstr;
  21. }
  22. })(jQuery);//封装插件
  24. $(function(){//页面初始化
  25. $.fn.color.defaults={//预设默认的前景色和背景色
  26. bcolor:"#eea",
  27. fcolor:"red"
  28. };
  29. $.fn.color.format=function(str){//扩展color()插件的功能，使内部文本加粗显示
  30. return"<strong>"+str+"
  31. $.extend($.fn,{
  32. color:function(options){
  33. if(!filter(options))//调用隐私方法验证参数，不合法则返回
  34. returnthis;
  35. varoptions=$.extend({},$.fn.color.defaults,options);//覆盖原来参数
  36. returnthis.each(function(){
  37. $(this).css("color",options.fcolor);
  38. $(this).css("backgroundColor",options.bcolor);
  39. var_html=$(this).html();//获取当前元素包含的HTML字符串
  40. _html=$.fn.color.format(_html);//调用格式化功能函数对其进行格式化
  41. $(this).html(_html);//使用格式化的HTML字符串重写当前元素内容
  42. });
  43. }
  44. });
  45. $.fn.color.defaults={//独立设置$.fn.color对象的默认参数值
  46. bcolor:"white",
  47. fcolor:"black"
  48. };
  49. $.fn.color.format=function(str){//开放的功能函数
  50. returnstr;
  51. }
  52. functionfilter(options){//定义隐私函数，外界无法访问
  53. //如果参数不存在，或者存在且为对象，则返回true，否则返回false
  54. return!options||(options&&typeofoptions==="object")?true:false;
  55. }
  56. })(jQuery);//封装插件
  58. $(function(){//页面初始化
  59. $.fn.color.defaults={//预设默认的前景色和背景色
  60. bcolor:"#eea",
  61. fcolor:"red"
  62. };
  63. $.fn.color.format=function(str){//扩展color()插件的功能，使内部文本加粗显示
  64. return"<strong>"+str+"
  65. $("p").color("#fff");
  66. });
8.1.12 优化 jQuery 插件 -- 非破坏性操作

在特定情况下，jQuery 对象方法可能会修改 jQuery 对象匹配的 DOM 元素，这时就有可能破坏方法返回值的一致性。为了遵循 jQuery 框架的核心设计理念，我们应该时刻警惕任何修改 jQuery 对象的操作。

例如，定义一个 jQuery 对象方法 parent() ，用来获取 jQuery 匹配的所有 DOM 元素的父元素。实现代码如下。

[html] view plain copy
  1. <scripttype="text/javascript">
  2. (function($){
  3. $.extend($.fn,{
  4. parent:function(){//扩展jQuery对象方法，获取所有匹配元素的父元素
  5. vararr=[];
  6. $.each(this,function(index,value){//遍历匹配的DOM元素
  7. arr.push(value.parentNode);//把匹配元素的父元素推入临时数组
  8. });
  9. arr=$.unique(arr);//在临时数组中过滤重复的元素
  10. returnthis.setArray(arr);//把变量arr打包为数组类型返回
  11. }
  12. });
  13. })(jQuery);//封装插件
  15. $.extend($.fn,{
  16. parent:function(){//扩展jQuery对象方法，获取所有匹配元素的父元素
  17. vararr=[];
  18. $.each(this,function(index,value){//遍历匹配的DOM元素
  19. arr.push(value.parentNode);//把匹配元素的父元素推入临时数组
  20. });
  21. arr=$.unique(arr);//在临时数组中过滤重复的元素
  22. returnthis.setArray(arr);//把变量arr打包为数组类型返回
  23. }
  24. });
  25. })(jQuery);//封装插件
  27. $(function(){
  28. var$p=$("p");//获取所有p元素，并存储到变量$p中
  29. $p.parent().css("border","solid1pxred");//调用parent()方法获取p元素的父元素，并设置它们的边框样式
  30. });
  32. var$p=$("p");//获取所有p元素，并存储到变量$p中
  33. $p.parent().css("border","solid1pxred");//调用parent()方法获取p元素的父元素，并设置它们的边框样式
  34. $p.hide();//隐藏所有p元素，即当前jQuery对象
  35. });
也就是说，在上面代码中 $p 变量已经被修改，它不再指向当前 jQuery 对象，而是指向 jQuery 对象匹配元素的父元素，因此在为 $p 调用 hide() 方法时，就会隐藏 div 元素，而不是 p 元素。

上面示例仅仅是破坏性操作的一种表现，如果要避免此类隐性修改 jQuery 对象的行为，建议采用非破坏性操作。例如，在本例中我们可以使用 pushStack() 方法创建一个新的 jQuery 对象，而不是修改 this 所引用的 jQuery 对象，这样可以避免破坏性操作行为，同时 pushStack() 方法还允许调用 end() 方法操作新创建的 jQuery 对象方法。把上面的示例的 jQuery 对象方法进行优化，代码如下所示。

[html] view plain copy
  1. <scripttype="text/javascript">
  2. (function($){
  3. $.extend($.fn,{
  4. parent:function(options){//扩展jQuery对象方法，获取所有匹配元素的父元素
  5. vararr=[];
  6. $.each(this,function(index,value){//遍历匹配的DOM元素
  7. arr.push(value.parentNode);//把匹配元素的父元素推入临时数组
  8. });
  9. arr=$.unique(arr);//在临时数组中过滤重复的元素
  10. returnthis.pushStack(arr);//返回新创建的jQuery对象，而不是修改后的当前jQuery对象
  11. }
  12. });
  13. })(jQuery);//封装插件
  15. $(function(){
  16. var$p=$("p");//获取所有p元素，并存储到变量$p中
  17. $p.parent().css("border","solid1pxred");//调用parent()方法获取p元素的父元素，并设置它们的边框样式
  18. $p.hide();//隐藏所有p元素，即当前jQuery对象
  19. });
  21. var$p=$("p");//获取所有p元素，并存储到变量$p中
  22. $p.parent().css("border","solid1pxred").end().hide();
  23. });
其中 end() 方法能够恢复被破坏的 jQuery 对象，也就是说 parent() 方法返回的是当前元素的父元素的集合，现在调用 end() 方法之后，又恢复到最初的当前元素集合，此时可以继续调用方法作用于原来的 jQuery 对象上了。
关注
打赏
1688896170
查看更多评论

暂无认证

  • 0浏览

    0关注

    108697博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

[ 申请 ]友情链接：

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

微信扫码登录

0.1257s