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