jquery源码阅读之jquery.extend

最新推荐文章于 2022-11-23 22:56:03 发布

xiaobo620

最新推荐文章于 2022-11-23 22:56:03 发布

阅读量500

点赞数

分类专栏： jquery源码阅读

本文链接：https://blog.csdn.net/xiaobo620/article/details/47358847

版权

jquery源码阅读专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery.extend 在众多插件中都有应用，最常见的应用是把插件默认的参数和用户输入的参数进行合并，用户没有输入的参数则用插件默认的参数，设置了，则采用用户设置的参数;

首先我们看看jquery.extend API的解释：这里

测试代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
<script src="../jquery-1.7.1.js"></script>
   <script src="../bobojq.js"></script></head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
var o = {};
o.n1 = o;
$.extend(true,o,{n2:o}); //测试无线循环
//$.extend( object1, object2 );//非深度
$.extend( true, object1, object2 );//深度 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>

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 如过第一个参数是布尔值则调整修正参数顺序 例如$.extend( true, object1, object2 ); 
	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 //如果只有一个对象参数则认和jquery合并
	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 深度和非深度的区别
				/*
					var object1 = {apple: 0,banana: { weight: 52, price: 100 },cherry: 97};
					var object2 = {banana: { price: 200 },durian: 100};
					$.extend(object1,object2) {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
					$.extend(true,object1,object2) {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
				*/
				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;
};

xiaobo620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery源码阅读之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 de
复制链接

扫一扫