美文网首页
jquery.data()&jquery.extend()

jquery.data()&jquery.extend()

作者: 一颗脑袋 | 来源:发表于2019-03-27 16:37 被阅读0次

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

    相关文章

      网友评论

          本文标题:jquery.data()&jquery.extend()

          本文链接:https://www.haomeiwen.com/subject/adxtbqtx.html