jQuery目前是我们用到的前端比较流行的框架之一,有时候我们会在此基础上扩展一些方法,所以经常会用到extend方法,接下来一起了解下。
1. 首先看下jQuery的extend方法源代码
jQuery.extend = jQuery.fn.extend = function() { var src, copyIsArray, copy, name, options, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; // Handle a deep copy situation if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; // skip the boolean and the target i = 2; } // Handle case when target is a string or something (possible in deep copy) if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // extend jQuery itself if only one argument is passed if ( length === i ) { target = this; --i; } for ( ; i < length; i++ ) { // Only deal with non-null/undefined values if ( (options = arguments[ i ]) != null ) { // Extend the base object for ( name in options ) { src = target[ name ]; copy = options[ name ]; // Prevent never-ending loop if ( target === copy ) { continue; } // Recurse if we're merging plain objects or arrays if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } // Never move original objects, clone them target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values } else if ( copy !== undefined ) { target[ name ] = copy; } } } } // Return the modified object return target; };
2. 由上述源代码,我们很容易看出extend方法扩展原型
- $.extend(param, param1, param2, param3, param4...... )
含义是将【param1, param2, param3, param4......】合并到【param】,显然合并后【param】的结构会发生变化,如果不想【param】的结构发生变化,参照如下方式:
var param=$.extend({}, param1, param2, param3, param4......); //也就是将"{}"作为param参数。
- $.extend(boolean, param, param1, param2, param3, param4...... )
第一个参数代表是否进行深度拷贝,其它参数和上面一样。
- $.extend(param)
将param合并到jQuery的全局对象中。
3. Example
// 第一种情况 var result = $.extend({"name": "Jhon", "age": "20"}, {"name": "LiSha", "sex": "F"}, {"address": "American", "phone": "03-05555"}); result = {"address": "American", "age": "20", "name": "LiSha", "phone": "03-05555", "sex": "F"}; // 注意: 如果两个对象存在相同名的参数,后边的值会覆盖前边的值(ex: name) // 第二种情况 var result = $.extend({}, {"name": "Jhon", "age": "20"}, {"name": "LiSha", "sex": "F"}, {"address": "American", "phone": "03-05555"}); result = {"address": "American", "age": "20", "name": "LiSha", "phone": "03-05555", "sex": "F"}; // 第三种情况 var result = $.extend(true, {}, {"name": "Jhon", "age": "20", "address": {"country": "China", "town": "YuJi"}}, {"name": "LiSha", "address": {"country": "American", "city": "New York"}}); result={"address": { "country" :"American", "town": "YuJi", "city": "New York"}, "age": "20", "name": "LiSha"}; // 第四种情况 var result = $.extend(false, {}, {"name": "Jhon", "age": "20", "address": {"country": "China", "town": "YuJi"}}, {"name": "LiSha", "address": {"country": "American", "city": "New York"}}); result = {"address": { "country":"American", "city": "New York"}, "age": "20", "name": "LiSha"}; // 第五种情况 var result = $.extend({"aaaaa": "Jhon", "age": "20"}); // 返回jQuery对象,并且将参数添加到对象里 /** jQuery对象一部分 jQuery function(e, t){ "aaaaa":"Jhon", "age": "20" } */
相关推荐
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...
jQuery:jQuery.extend函数详解
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法.
jquery.extend函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解...var newSrc=$.extend({},src1,src2,src3...)//也就是将
开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 代码如下: var i = $.add(3,2); var j ...
$.extend(true, obj1, obj2); alert(obj1.x.xxx); // 得到”xxx” obj2.x.xxx = ‘zzz’;alert(obj2.x.xxx); // 得到”zzz”alert(obj1.x.xxx); // 得带”xxx”</s
extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如上篇文章中讲到的noConflict方法,就是用extend方法来扩展的。 在jQuery的API手册...
jquery 插件开发详解通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象…. 因此里面可以添加方法属性等等… 我么通过不同...
jQuery_extend 函数详解
1.$.extend({},defaults, options) 这样做的目的是为了保护包默认参数。也就是defaults里面的参数。 做法是将一个新的空对象({})做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是...
jQuery.extend 函数详解JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。一、Jquery的扩展方法原型是: