`
weiqingfei
  • 浏览: 317368 次
  • 性别: Icon_minigender_1
  • 来自: 黑洞
社区版块
存档分类
最新评论

JQuery小刨-3

阅读更多
再来看一下jQuery的扩展方法吧,这可是jQuery的核心。
其实这个方法并不复杂,它的功能有以下几个
1.对object jQuery的扩展,也就是做成所谓的Utilities方法集,方便大家使用jQuery.functionName()的方式调用。
2.对jQuery.fn(也就是jQuery.fn.init.prototype,也就是jQuery.fn.init的实例,也就是调用$()方法返回的对象)的扩展,扩充jQuery实例的功能。
3.对object进行属性或者方法的复制(包括深度复制)。

对jQuery以及jQuery.fn进行扩充,从source里可以看出,因为参数只有一个,走的是个很简单的路径,如果把source抽出来,就如同下面所示:
jQuery.extend = jQuery.fn.extend = function() {
	// copy reference to target object
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;

	// 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;
				}
				// Don't bring in undefined values
				if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};


除去杂乱的变量声明,赋值以及判断。其实就是简单的对对象的属性方法扩充。

如果不是深度复制,那基本上就是对对象方法的clone了,从jQuery的source来看,就是把对象object的方法属性赋值一份。如:5557行(以版本1.4.2的普通版为准)
var opt = jQuery.extend({}, optall)

就是把object optall里的属性方法clone给一个空的object。
剥离出的代码如下:

jQuery.extend = jQuery.fn.extend = function() {
	// copy reference to target object
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	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;
				}

				// Don't bring in undefined values
				if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

从source的4931行,还可以看出,这个方法除了clone外,还可以覆盖掉原有object的默认设置。
		jQuery.extend( jQuery.ajaxSettings, settings );


深度复制其实就是如果复制对象的属性里有object或者数组的话,使用递归的方式把它们都复制过来。
举个例子来讲
	var src = {name:"wqf"};
	var copy = {info:{company:"macrohard",position:"CEO"}};
	var ret =jQuery.extend(true,src,copy);


得到的结果就是
	ret ={name:"wqf",info:{company:"macrohard",position:"CEO"}}

当然,如果出现重复的属性或者方法的话,也会覆盖掉。

这个方法并不复杂,可是却是jQuery里比较重要的一个方法,弄清楚它的几个作用,有助于快速理清一些方法的实现。
分享到:
评论

相关推荐

    jquery-ui-1.8.16

    jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jquery-migrate-1.2.1.js文件

    `jquery-migrate-1.2.1.min.js` 是这个插件的压缩版本,用于生产环境,它具有更小的文件大小,减少了页面加载时间,但同样提供向后兼容性支持。 **jqPrint插件与jQuery Migrate的结合** `jqPrint` 是一个jQuery...

    jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css

    在实际项目中,`jquery-ui-1.8.2.custom.min.js`和`jquery-ui-1.8.4.custom.css`通常一起使用,以确保JavaScript组件的外观和行为与CSS样式协调一致。然而,需要注意的是,这两个版本相对较旧,可能不包含后来版本中...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    在本篇文章中,我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` 和相关的 CSS 文件,以理解它们如何协同工作,为网页带来强大的功能和美观的界面。 首先,`jquery-ui-1.8.18.custom.min.js` 是 ...

    jquery.editable-select

    3. **自定义输入**:用户在输入框中输入字符时,插件会实时过滤下拉列表,显示出与输入相匹配的选项。这种功能对于有大量选项的下拉列表特别有用,可以快速定位到用户想要的选项。 4. **API 和事件**:`jquery....

    jquery.datepicker-zh-CN.js

    &lt;script src="./public/js/jquery-ui-1.10.3.min.js"&gt; &lt;script src="./public/js/jquery.datepicker-zh-CN.js"&gt;&lt;/script&gt; &lt;link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"&gt; $( "#...

    jquery-ui-datepicker中文版

    jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...

    jquery-ui-1.10.2.custom

    在这个主题中,我们将深入探讨的是 `jquery-ui-1.10.2.custom` 版本,这是一个定制化的版本,包含了对 jQuery 1.9.1 的支持。 首先,让我们从 `jquery-ui-1.10.2.custom` 的核心组件开始。这个版本提供了包括但不...

    jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1

    jquery-1.6.4-vsdoc.js

    压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:...

    jQuery版本迁移辅助插件jquery-migrate-1.2.1.min.js

    jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js

    jquery-ui-1.11.2日期控件datepicker

    ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" &gt; ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...

    jquery-migrate-3.0.0.zip

    在压缩包内,包含了两个主要文件:`jquery-migrate-3.0.0.js` 和 `jquery-migrate-3.0.0.min.js`。这两个文件分别是未压缩的完整版和压缩后的精简版。未压缩版本方便开发者阅读和调试,而压缩版则用于生产环境,以...

    jquery-migrate-3.0.1.js jar包

    &lt;script src="path/to/jquery-3.x.x.js"&gt; &lt;script src="path/to/jquery-migrate-3.0.1.js"&gt; ``` 这里的`path/to`应该替换为实际的文件路径。 **四、迁移策略** 使用jQuery Migrate并不是长久之计,它只是一种过渡...

    jquery-ui-1.9.2.custom.min.js

    在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中,我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”,这两个特点使得它在实际项目中更具灵活性和效率...

    jquery-ui-1.10.3.min.js

    jquery-ui-1.10.3.min.js

    jquery-migrate-1.2.1.min.js

    jquery-migrate-1.2.1.min.js 在网上下载一些 js 插件使用的时候,经常出现这种情况。但是更换低版本 jquery,比如 使用 1.7 版本的 jquery 却不会报错,能正常使用。 经过一番搜索,发现是因为高版本(1.9版本以后)...

    jquery-ui-1.10..3.min.js

    jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载

Global site tag (gtag.js) - Google Analytics