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