`

jquery源码分析笔记:jQuery.extend

阅读更多

基于jQuery-2.1.4,一切尽在注释中呀

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {},//获取第一个参数
		i = 1,
		length = arguments.length,
		deep = false;//默认浅复制

	// Handle a deep copy situation
	/* 
	 *判断是否为深复制或者浅复制,$.extend(true|false,target,src);
	 */
	if ( typeof target === "boolean" ) {
		deep = target;

		// Skip the boolean and the target
		//如果第一个参数是boolean值那么第二个参数就是复制后的目标,i = 1;
		target = arguments[ i ] || {};
		i++;
	}

	// Handle case when target is a string or something (possible in deep copy)
	/*
	*  如果复制目标既不是对象也不是方法(是一个字符串或者其他。。),就变为一个空对象;如:$.extend(undefined|'',src);
	*/
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// Extend jQuery itself if only one argument is passed
	/*
	 * 扩展jQuery自身插件,当只有一个参数的时候;i = 1,length = 1;jquery插件开发一般基于两种方式,1:基于类;2:基于对象;
	 * 基于类  $.sayHello()                            基于对象 $().sayHello;
	 * $.extend({                                       $.fn.extend({ sayHello: 'hello word' })
	 *    sayHello:function(){
	 *        alert('hello');
	 *    }
	 *  })
	 */
	if ( i === length ) {
		target = this;
		i--;   //i = 0;
	}
    
    //循环复制开始
	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		//判断值是否为null|undefined
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			//for in遍历对象属性
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				/*防止死循环复制,$.extend(name,{obj:name})
				* 所以是 target 跟 copy比较,而不是src跟copy比较
				*/
				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
					//递归遍历复制,当属性值也是对象时,,如$.extend(true,{name:'zhangsan'},{student:[{name:'jack',age:23},{name:'tontjon',age:43}]})
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				//浅复制的时候,跳过undefined
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};
分享到:
评论

相关推荐

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    给jQuery添加扩展时用$.extend()如:jQuery.extend({add:function(a,b){return a+b}}) 使用:$.add(1,3)=====&gt;4; 给jQuery实例对象添加扩展时用$.fn.extend(); $.fn.extend({gys:function(){$(this).css(“color”,”...

    JQueryEasyUI学习笔记(十)源码

    **jQuery EasyUI 学习笔记(十):深入源码** 在Web开发中,jQuery EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建交互式的用户界面。本篇笔记主要关注jQuery EasyUI的源码...

    jQuery-1.3.2 学习笔记(转).txt

    ### jQuery-1.3.2 学习笔记 #### 一、概述 jQuery 是一个快速、简洁的 JavaScript 库,使用户能更方便地处理 HTML 文档、选择 DOM 元素、制作动画效果,并为应用程序添加 AJAX 交互。版本 1.3.2 在 2009 年 2 月...

    jquery 笔记精要

    - **jQuery源码初步分析**:jQuery采用了自执行函数的形式,为`window`对象扩展了两个等价的函数`jQuery()`和`$()`。通过调用`$()`函数,返回的是一个由jQuery封装的伪数组对象,通常称之为jQuery对象。 - **核心...

    jQuery产品列表滑动轮播展示代码.zip

    插件通常通过`$.fn.extend()`方法扩展jQuery对象。 7. **二次修改**:由于代码是可修改的,用户可以根据自己的需求进行定制。例如,调整滑动速度、增加分页指示器、添加自定义动画效果等。 **学习与实践** 对于...

    jQuery手机移动端上传图片裁剪代码.zip

    jQuery插件通常是通过`$.fn.extend`或`$.fn.pluginName = function(options)`这种方式扩展jQuery对象,使得可以在任何jQuery选择器后直接调用该插件。 8. **二次开发**:由于代码可以进行二次修改,开发者可以根据...

    jQuery单面板日历日期选择插件.zip

    **jQuery单面板日历日期选择插件** 在网页开发中,日期选择器是一个常见的功能,用于用户输入日期或选择日期范围。jQuery库以其简洁的API和丰富的插件库,为开发者提供了实现这一功能的便捷途径。本教程将围绕...

    jQuery 源码分析笔记

    《jQuery 源码分析笔记》 jQuery 是一个广泛使用的JavaScript库,它的最新版本1.6.1在2011年5月12日发布,包含8937行未压缩的代码,体积约为229KB。该库的核心设计理念是“Write Less, Do More”,旨在通过简洁的...

    教你如何做一个自己的jQuery插件,jQuery扩展笔记

    这里的`$.fn`是jQuery的实例方法集合,即`$.prototype`,通过`$.fn.extend`我们可以向jQuery的所有实例添加新方法。 3. **使用插件**:现在,我们可以在任何jQuery选择器后面调用这个插件了。 ```javascript $('....

    jQuery桌面右键创建便签贴纸代码.zip

    jQuery库通过$.fn.extend()方法扩展了原型链,使得我们可以用$符号来调用各种方法,如$(selector).method()。在这个例子中,可能涉及到的选择器可能包括id、class或元素类型,而方法可能包括click()、append()等。 ...

    jQuery-1.6.2.js+jQuery-1.4.2.js +笔记

    《jQuery 1.6.2.js与jQuery 1.4.2.js:源码解析与学习笔记》 jQuery,作为一款强大的JavaScript库,为开发者提供了简洁的API,使得DOM操作、事件处理、动画制作和Ajax交互变得更加简单。本文将重点讨论jQuery 1.6.2...

    jQuery每日实时薪资收入计算器代码.zip

    此外,`$.fn.extend`或者`$.extend`方法可以用来扩展jQuery的功能,创建自定义的插件。虽然在这个例子中没有明确使用,但了解这一机制对于理解更复杂的jQuery应用至关重要。jQuery插件是封装和重用代码的好方式,...

    jQuery手机移动端弹窗单选菜单插件.zip

    这些代码通常基于jQuery编写,通过$.fn.extend扩展jQuery的功能,创建自定义的插件方法。 ### 插件使用 要使用这个插件,首先需要在HTML文档中引入jQuery库和插件的JavaScript文件。接着,可以通过jQuery的选择器...

    jQuery网页大转盘抽奖代码.zip

    一个简单的jQuery插件通常包含一个函数,通过$.fn.extend()方法扩展jQuery对象。 4. **HTML结构**:`index.html`文件是网页的主体,包含了抽奖界面的基本布局。HTML元素如`&lt;div&gt;`可能被用来创建转盘的结构,而`...

    Jquery 学习帮助文档

    - **jQuery插件**: 开发者可以通过`$.fn.extend()`扩展jQuery功能,创建自己的插件。 - **第三方插件**: 如jQuery UI提供丰富的UI组件,EasyUI则简化了前端开发。 ### 6. 性能优化 - **减少DOM操作**: 避免频繁...

    jQuery点击添加快捷留言表单代码.zip

    它可能使用了jQuery的`$(document).ready()`函数来确保在DOM加载完毕后执行代码,`$('selector').click(function() {...})`来绑定点击事件,以及`$('element').append('&lt;form&gt;...&lt;/form&gt;')`或`$.fn.extend()`来创建...

    JQuery1.3笔记.txt

    ### JQuery 1.3 笔记知识点总结 #### 属性操作 (Attribute) 1. **添加样式** - `$("p").addClass("css类名")`: 给指定的`&lt;p&gt;`元素添加一个CSS类名定义的样式。 2. **添加属性/值** - `$("img").attr({"属性...

    锋利的jQuery学习笔记

    压缩包中的JQuery笔记.doc文件,很可能是对以上知识点的详细展开和实例演示,包括可能的代码示例、常见问题解答以及最佳实践。通过阅读这份文档,你将有机会深化对jQuery的理解,提高实际开发效率,成为一名更加熟练...

Global site tag (gtag.js) - Google Analytics