|
|
|
|
移动端

抛砖引玉 自定义jQuery扩展接口

jQuery是一款很优秀的轻量级JavaScript框架,有其独特的优点,本文将用一个简单的例子演示jQuery的扩展接口的简单示例,希望能对读者起到抛砖引玉的作用。

作者:狼图腾来源:豆豆网|2010-07-01 09:38

技术沙龙 | 4月21日多位区块链专家进行区块链技术应用场景解读!


jQuery是一款很优秀的轻量级JavaScript框架,有其独特的优点。很多Web开发者都却对其乐此不疲。因为在这个框架中,除了拥有丰富的客户端处理功能、动画功能外,更是提供了很自定义扩展接口,方便更多的开发者来扩展jQuery。

51CTO推荐专题: jQuery从入门到精通

  1. $.extend({  
  2.       max: function(a, b) {  
  3.           return a > b ? a : b;  
  4.       },  
  5.       min: function(a, b) {  
  6.           return a > b ? b : a;  
  7.       },  
  8.       avg: function(a, b) {  
  9.           return a / b;  
  10.       }  
  11. });  

该示例用以在jQuery中增加新函数,该函数是静态函数。调用如下:

  1. jQuery.min(2,3); // => 2  
  2. jQuery.max(4,5); // => 5 


如果针对组件的功能扩展函数,同样也是很简单。比如,你想要扩展TextBox的功能,使到它在获取焦点时,高亮显示;失去焦点时,则取消高亮。当然,高亮的效果可以使用CSS来实现,因此,你可以用一个颜色的名称作为参数进行调用。代码如下:

  1. $.fn.hightlight = function(colorName) {  
  2.     this.mouseover(function() {  
  3.         $(this).css('background-color', colorName);   //this对是对组件自身的引用  
  4.     });  
  5.     this.mouseout(function() {  
  6.         $(this).css('background-color', '');  
  7.     });  

调用如下:

  1. $(function() {  
  2.     $('#test').hightlight('red');  
  3. });  

扩展jQuery的Json技巧

下面我们将分析在jQuery基础上扩展了其处理Json字符串能力,伟大的jQuery将会更伟大用jQuery写JavaScript非常高效,jQuery对Ajax的封装也非常到位;使用jQuery一段时间后发现,jQuery在处理Json字符串方面功能不是很强,至少比prototype.js差远了。

以前用习惯了扩展Jquery的Json,在进行Ajax开发时,处理json数据非常方便;而在jQuery中,只提供了一个简单的jQuery.getJSON()方法,并未提供jQuery本身对json数据的转换处理,将json字符串转换为Javascript数据对象还比较容易利用eval()函数即可,但要将Javascript的数据类型转换成json字符串就比较难了;刚开始不得同时使用prototype.js和jQuery。扩展Jquery的Json代码:

  1. //扩展jQuery对json字符串的转换    
  2. jQuery.extend({     
  3.  /** * @see 将json字符串转换为对象   
  4.      * @param json字符串   
  5.      * @return 返回object,array,string等对象 */      
  6.  evalJSON: function(strJson)   
  7. {      return eval("(" + strJson + ")");      
  8. }    
  9. }); 
  1. jQuery.extend({      
  2. /** * @see 将javascript数据类型转换为json字符串   
  3. * @param 待转换对象,支持  
  4. object,  
  5. array,string,function,number,boolean,regexp   
  6. * @return 返回json字符串 */      
  7. toJSON: function(object) {        
  8. var type = typeof object;        
  9. if ('object' == type) {          
  10. if (Array == object.constructor) type = 'array';          
  11. else if (RegExp == object.constructor)   
  12. type = 'regexp';          
  13. else type = 'object';        
  14. }        
  15. switch (type) {        
  16. case 'undefined':        
  17. case 'unknown':          
  18. return;          
  19. break;        
  20. case 'function':        
  21. case 'boolean':        
  22. case 'regexp':          
  23. return object.toString();          
  24. break;   
  25. case 'number':          
  26. return isFinite(object) ?   
  27. object.toString() : 'null';          
  28. break;        
  29. case 'string':          
  30. return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function()   
  31. {            
  32. var a = arguments[0];           
  33. return (a == '\n') ? '\\n': (a == '\r') ? '\\r': (a == '\t') ? '\\t': ""          
  34. }) + '"';          
  35. break;        
  36. case 'object':          
  37. if (object === null) return 'null';          
  38. var results = [];          
  39. for (var property in object) {            
  40. var value = jQuery.toJSON(object[property]);            
  41. if (value !== undefined) results.push(jQuery.toJSON(property) + ':' + value);          
  42. }          
  43. return '{' + results.join(',') + '}';          
  44. break;        
  45. case 'array':          
  46. var results = [];          
  47. for (var i = 0; i < object.length; i++) {            
  48. var value = jQuery.toJSON(object[i]);            
  49. if (value !== undefined) results.push(value);         
  50. }          
  51. return '[' + results.join(',') + ']';          
  52. break;        
  53. }      
  54. }    
  55. });  
  56. 示例:    
  57. var obj = {      
  58. name: "sean",      
  59. friend: ["fans", "bruce", "wawa"],      
  60. action: function() {      alert("gogogog")      
  61. },      
  62. boy: true,    age: 26,      
  63. reg: /\b([a-z]+) \1\b/gi,      
  64. child: {      name: "none",      age: -1    }  };   
  65.  var json = $.toJSON(obj);    
  66. var objx = $.evalJSON(json);  

【编辑推荐】

  1. 改变获取对象方式 万能的jQuery选择器
  2. 5种方法教你用jQuery重写表单验证
  3. 你应该学习jQuery的七大理由
  4. 即刻提升jQuery性能的十个技巧
  5. 12种jQuery性能优化方法解析
【责任编辑:王晓东 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网管员必读-网络管理(第2版)

本书是对《网管员必读—网络管理》第1版的全面重写,因为书中所涉及的两个主要网络操作系统都已升级。本书介绍的是Windows Server 2003 R2...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊