抛砖引玉自定义jQuery扩展接口-jquery扩展自定义方法

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

$.extend({  
      max: function(a, b) {  
          return a > b ? a : b;  
      },  
      min: function(a, b) {  
          return a > b ? b : a;  
      },  
      avg: function(a, b) {  
          return a / b;  
      }  
});

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

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

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

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

调用如下：

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

扩展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代码：

#p#

//扩展jQuery对json字符串的转换    
jQuery.extend({     
 /** * @see 将json字符串转换为对象   
     * @param json字符串   
     * @return 返回object,array,string等对象 */      
 evalJSON: function(strJson)   
{      return eval("(" + strJson + ")");      
}    
});

jQuery.extend({      
/** * @see 将javascript数据类型转换为json字符串   
* @param 待转换对象,支持  
object,  
array,string,function,number,boolean,regexp   
* @return 返回json字符串 */      
toJSON: function(object) {        
var type = typeof object;        
if ('object' == type) {          
if (Array == object.constructor) type = 'array';          
else if (RegExp == object.constructor)   
type = 'regexp';          
else type = 'object';        
}        
switch (type) {        
case 'undefined':        
case 'unknown':          
return;          
break;        
case 'function':        
case 'boolean':        
case 'regexp':          
return object.toString();          
break;   
case 'number':          
return isFinite(object) ?   
object.toString() : 'null';          
break;        
case 'string':          
return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function()   
{            
var a = arguments[0];           
return (a == '\n') ? '\\n': (a == '\r') ? '\\r': (a == '\t') ? '\\t': ""          
}) + '"';          
break;        
case 'object':          
if (object === null) return 'null';          
var results = [];          
for (var property in object) {            
var value = jQuery.toJSON(object[property]);            
if (value !== undefined) results.push(jQuery.toJSON(property) + ':' + value);          
}          
return '{' + results.join(',') + '}';          
break;        
case 'array':          
var results = [];          
for (var i = 0; i < object.length; i++) {            
var value = jQuery.toJSON(object[i]);            
if (value !== undefined) results.push(value);         
}          
return '[' + results.join(',') + ']';          
break;        
}      
}    
});  
示例：    
var obj = {      
name: "sean",      
friend: ["fans", "bruce", "wawa"],      
action: function() {      alert("gogogog")      
},      
boy: true,    age: 26,      
reg: /\b([a-z]+) \1\b/gi,      
child: {      name: "none",      age: -1    }  };   
 var json = $.toJSON(obj);    
var objx = $.evalJSON(json);

【编辑推荐】

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

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