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