jquery의 확장 메소드 분석

1. 저는 얼마 전부터 데이터 시각화(d3.js, three.js)와 PHP의 라라벨 프레임워크를 공부하느라 바빴습니다.

돌이켜보면 제가 처음 일을 시작했을 때는 무엇을 배워야 할지 목표가 아주 명확했어요. 당신은 미래에 어떤 높이에 도달하고 싶습니까? 위대한 신들과 나란히 앉아 모든 것에 대해 이야기해야합니까? 이 목표를 향해 계속 열심히 노력하세요. 하지만 더 많은 것을 보고 일할수록 점점 더 혼란스러워졌습니다. Du Niang과 함께라면 기본적으로 직장에서 어떤 문제도 겪지 않을 것 같았습니다.

하지만 곰곰히 생각해보면 아무것도 모릅니다. 눈을 감고 글을 쓰다 보면 이것저것 기억이 나지 않는다(나이 때문인지도). 목표는 변하지 않았는데 어떻게 아이돌이 될 수 있을지 혼란스럽습니다.

앞 바다에서 혼자 표류하며 더듬으며 많은 우회를 했음을 알면서도 계속 앞으로 나아가고 있다는 것도 알고 있습니다. 앞으로 나아가는 과정에는 밝은 빛이 부족합니다. 우리는 어떻게 우리만의 밝은 빛을 찾을 수 있을까요?

심심할 때 나만의 빛을 찾고자 jQuery 소스코드를 읽었다.

/**
    1. $.extend的用法。 第一个参数是决定是否需要深复制。 由 true, false。 默认是浅复制
    params:
    options => 接收传递过来的arguments 的中间参数。
    name =>  没对对象的key值。
    src =>   当传递的对象key值相同到时候。要和并
    copy =>   复制的value 值。
    copyIsArray =>  判断value对象是不是数组。
    clone =>    当深度复制的时候。需要新建一个变量。不会改变原始的值。
    target =>  最开始是默认值是取传进来的第一个参数。过后往后一直跳。$.extend(a,b,c); target 为 a, 为b,为c。
    i =>  决定当前target 等于参数中的某个值
    length =>
    deep => 默认是false 是决定是否需要深复制的参数。 true 是深复制。 false 是浅复制*/jQuery.extend = jQuery.fn.extend = function() {    var options, name, src, copy, copyIsArray, clone,
        target = arguments[ 0 ] || {},
        i = 1,
        length = arguments.length,
        deep = false;    // 判断 target 来决定是否 深复制
    if ( typeof target === "boolean" ) {
        deep = target;        //当深复制的时候，需要跳过第一个参数。 来循环传进来的参数。 刚开始 1,2,3
        target = arguments[ i ] || {};
        i++;
        
    }    // 当 target 不是一个对象且 不是一个函数对象 这个时候就把target 变为空对象。
    if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
        target = {};
    }    // 如果传递过来的参数只有一个的情况下。target 就是该参数。
    if ( i === length ) {
        target = this;
        i--;  // 把i 改为1    }    for ( ; i < length; i++ ) {        // 处理非空 或者 undefined 的情况。   null == null 。 undefined == null;
        //options  是来接收除了第一个参数外的所有参数。中间桥梁的作用吧
        if ( ( options = arguments[ i ] ) != null ) {            // name in options 决定了 传过来的值必须是对象。如果不是对象的话。将要被拆分
            for ( name in options ) {                //这个是决定后面同级 的key 值， 后面将要覆盖前面的。
                src = target[ name ];                //获取 key值为 name 的 value值。
                copy = options[ name ];                // Prevent never-ending loop 阻止无限循环。 ？？？没有搞懂，设么情况下才会出现这种情况。

                if ( target === copy ) {                    
                continue;
                }                /**

                1.深复制，且value 为对象属性的时候执行递归复制。 isPlainObect(copy) 判断copy第不是一个 纯对象
                2.copy 时一个数组的时候。执行里面的函数。
                3.(因为只有对象value 和 数组value 是需要进行深复制的。)                */
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {                    
                    if ( copyIsArray ) {
                        
                        copyIsArray = false;
                        clone = src && Array.isArray( src ) ? src : [];

                    } else {
                        
                        clone = src && jQuery.isPlainObject( src ) ? src : {};
                    }                    // 创建新对象。来进行深度复制。
                    target[ name ] = jQuery.extend( deep, clone, copy );                //除了对象数组，和undefined 的值。
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }    // Return the modified object
    return target;
};

이 문단은 jquery에서 나온 것입니다. 버전 = 버전 3.2.1. 사람마다 관점이 달라야 합니다. 어떤 실수라도 지적해 주셨으면 좋겠습니다. 함께 배우세요.

위 코드에는 제가 한 번도 파악하지 못한 내용이 있습니다.

 // Prevent never-ending loop 阻止无限循环。 ？？？没有搞懂，设么情况下才会出现这种情况。 {} != {} 没有想出来什么情况下才会出现target === copy的情况。

                if ( target === copy ) {                    
                continue;
                }

지금까지 10분의 1정도 봤는데 루틴을 많이 배웠네요. 어쩌면 당신은 정말로 당신 자신의 빛을 찾을 수 있을지도 모릅니다.

위 내용은 jquery의 확장 메소드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!