思洋互动网站建设学前班

延续--功能扩展

根据一般设计习惯，如果要为jQuery或者jQuery.prototype添加函数或方法，可以直接通过点语法实现，或者在jQuery.prototype对象结构中增加一个属性即可。但是，如果分析jQuery框架的源代码，你会发现它是通过extend()函数来实现功能扩展的。例如，下面两段代码都是jQuery框架通过extend()函数来扩展功能的。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. jQuery.extend({    //扩展工具函数  
2.     noConflict: function( deep ) {},  
3.     isFunction: function( obj ) {},  
4.     isArray: function( obj ) {},  
5.     isXMLDoc: function( elem ) {},  
6.     globalEval: function( data ) {}  
7. }); 

或者

1. jQuery.fn.extend({    //扩展jQuery对象方法  
2.     show: function(speed,callback){},  
3.     hide: function(speed,callback){},  
4.     toggle: function( fn, fn2 ){},  
5.     fadeTo: function(speed,to,callback){},  
6.     animate: function( prop, speed, easing, callback ) {},  
7.     stop: function(clearQueue, gotoEnd){}  
8. }); 

这样做的好处是什么呢？

extend()函数能够方便用户快速扩展jQuery框架的功能，但是不会破坏jQuery框架的原型结构，从而避免后期人工手动添加工具函数或者方法时破坏jQuery框架的单纯性，同时也方便管理。如果不需要某个插件，只需要简单地删除即可，而不需要在jQuery框架源代码中去筛选和删除。

extend()函数的功能实现起来也很简单，它只是把指定对象的方法复制给jQuery对象或者jQuery.prototype对象。例如，在下面的示例中，我们为jQuery类和原型定义了一个扩展功能的函数extend()，该函数的功能很简单，它能够把指定参数对象包含的所有属性复制给jQuery或者jQuery.prototype对象，这样就可以在应用中随时调用它，并动态扩展jQuery对象的方法。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script language="javascript" type="text/javascript"> 
2. var $ = jQuery = function(selector, context ){  
3.     return new jQuery.fn.init(selector, context );  
4. }  
5. jQueryjQuery.fn = jQuery.prototype ={  
6.     init : function(selector, context){  
7.     }  
8. }  
9. jQueryjQuery.fn.init.prototype = jQuery.fn;  
10. //jQuery功能扩展函数  
11. jQueryjQuery.extend = jQuery.fn.extend = function(obj) {  
12.     for (var prop in obj) {  
13.         this[prop] =  obj[prop];  
14.     }  
15.     return this;  
16. }  
17. //扩展jQuery对象方法  
18. jQuery.fn.extend({  
19.     test : function(){  
20.         alert("测试扩展功能");  
21.     }  
22. })  
23. //测试代码  
24. $("div").test();  
25. </script> 

在上面的示例中，先定义了一个功能扩展函数extend()，然后为jQuery.fn原型对象调用extend()函数，为其添加一个测试方法test()。这样就可以在实践中应用，如$("div").test()。

jQuery框架定义的extend()函数的功能要强大很多，它不仅能够完成基本的功能扩展，还可以实现对象合并等功能，详细代码和解释如下所示。

1. jQueryjQuery.extend = jQuery.fn.extend = function() {  
2.     // 定义复制操作的目标对象  
3.     var target = arguments[0] || {}, i = 1, length  = arguments.length, deep = false, options;  
4.     //获取是否深度复制处理  
5.     if ( typeof target === "boolean" ) {  
6.         deep = target;  
7.         target = arguments[1] || {};  
8.         // 跳出布尔值和目标对象  
9.         i = 2;  
10.     }  
11.     // 如果第一个参数是字符串，则设置为空对象  
12.     if ( typeof target !== "object" && !jQuery.isFunction(target) )  
13.         target = {};  
14.     //如果只有一个参数，表示把参数对象的方法复制给当前对象，则设置target为this  
15.     if ( length == i ) {  
16.         target = this;  
17.         --i;  
18.     }  
19.     for ( ; i < length; i++ )    //遍历参数  
20.         // 若参数值不为null，则进行处理  
21.         if ( (options = arguments[ i ]) != null )  
22.             // Extend the base object  
23.             for ( var name in options ) {    //遍历参数对象  
24.                 var src = target[ name ], copy = options[ name ];  
25.                 // 防止死循环访问  
26.                 if ( target === copy )  
27.                     continue;  
28.                 // 递归运算  
29.                 if ( deep && copy && typeof copy  === "object" && !copy.nodeType )  
30.                     target[ name ] = jQuery.extend( deep,  
31.                         // 不要复制原对象  
32.                         src || ( copy.length != null ? [ ] : { } )  
33.                     , copy );  
34.                 // 不要传递未定义的值  
35.                 else if ( copy !== undefined )  
36.                     target[ name ] = copy;  
37.             }  
38.     // 返回修改后的对象  
39.     return target;  
40. }; 

广州网站建设,网站建设,广州网页设计,广州网站设计