jquery.data()&jquery.extend()

JQuery.data()方法

Jquery提供的在节点存取数据的方法。

var $el = $('#app');
//使用键值对的方式存数据
$el.data('name', 'jinx');
$el.data('age', '19');
//也可以使用对象同时存储
$el.data({
    name: 'jinx',
    age: '19'
});

//获取存到节点的全部数据
$el.data();
//按照键获取
$el.data('name');

//移除添加的数据
$el.removeData();
$el.removeData('age');

JQuery.extend()方法

Jquery提供的对象拼接方法：

$.extend( [deep ], target, object1 [, objectN ] )

var obj1 = {
    name : 'jinx',
    age: 14,
    info: {
        hobby: 'run',
        hair: 'braids'
    }
}
var obj2 = {
    age: 10,
    sex: 0,
    info: {
        hobby: 'jump'
    }
}
//非深度拼接
$.extend(obj1, obj2);
console.log(obj1);
/*:obj1={
	name : 'jinx',
    age: 10,
    info: {
        hobby: 'jump'
    },
    sex: 0
}
*/
//若是使用 $.extend(true, obj1, obj2);
//则为深度拼接：
/*:obj1={
	name : 'jinx',
    age: 10,
    info: {
        hobby: 'jump',
        hair: 'braids'
    },
    sex: 0
}*/

注：返回值为拼接完成的目标对象。

非深度拼接时，相同键则替换值，而不同键则拼接，所以在非深度拼接的情况下修改拼接对象可能会改变其他拼接对象，因为是引用值。

观察obj1.info的变化，深度拼接则是进行深度克隆。

JQuery.data()方法

Jquery提供的在节点存取数据的方法。

var $el = $('#app');
//使用键值对的方式存数据
$el.data('name', 'jinx');
$el.data('age', '19');
//也可以使用对象同时存储
$el.data({
    name: 'jinx',
    age: '19'
});

//获取存到节点的全部数据
$el.data();
//按照键获取
$el.data('name');

//移除添加的数据
$el.removeData();
$el.removeData('age');

JQuery.extend()方法

Jquery提供的对象拼接方法：

$.extend( [deep ], target, object1 [, objectN ] )

var obj1 = {
    name : 'jinx',
    age: 14,
    info: {
        hobby: 'run',
        hair: 'braids'
    }
}
var obj2 = {
    age: 10,
    sex: 0,
    info: {
        hobby: 'jump'
    }
}
//非深度拼接
$.extend(obj1, obj2);
console.log(obj1);
/*:obj1={
	name : 'jinx',
    age: 10,
    info: {
        hobby: 'jump'
    },
    sex: 0
}
*/
//若是使用 $.extend(true, obj1, obj2);
//则为深度拼接：
/*:obj1={
	name : 'jinx',
    age: 10,
    info: {
        hobby: 'jump',
        hair: 'braids'
    },
    sex: 0
}*/

注：返回值为拼接完成的目标对象。

非深度拼接时，相同键则替换值，而不同键则拼接，所以在非深度拼接的情况下修改拼接对象可能会改变其他拼接对象，因为是引用值。

观察obj1.info的变化，深度拼接则是进行深度克隆。

扩展：对象的克隆和拼接（原生js）

• 对象的克隆

//可以先将对象转为字符形式，然后再转为对象即可（需要注意的是Json.syringify对数据有长度限制）
function cloneJSON(jsonObj){
  try{
    return jsonObj ? JSON.parse(JSON.stringify(jsonObj)) : jsonObj;
  }catch(e){
    console.log(e, jsonObj);
    return jsonObj;
  }
}

• 对象的拼接（jQuery.extend的源码）

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
	if ( typeof target === "boolean" ) {
		deep = target;

		// skip the boolean and the target
		target = arguments[ i ] || {};
		i++;
	}

	// 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 ( i === length ) {
		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;
};