jQuery에 대해 무엇을 알아야 합니까?

최근에 jQuery 소스 코드를 보고 싶어서 "jQuery 소스 코드에서 배운 10가지"라는 블로그를 발견했습니다.

이 기사는 이 비디오 블로그를 기반으로 작성되었으며, 여러분과 공유하기 위해 일부 내용을 다듬었습니다.

참고:
이 글은 2010년에 작성되었습니다. 작성자는 영상에서 언급된 내용을 바탕으로 jQuery 1.4 버전을 사용했으며, 현재 1.11 버전에 맞춰 일부 조정을 했습니다. 제거된 콘텐츠 페이지는 삭제되었으며 원저자님께 감사의 말씀을 전합니다

블랙박스/Black box

블랙박스 시스템의 개념은 입력에 따라 출력을 반환하는 시스템이며, 블랙박스는 구현 프로세스. 여기서 언급하는 jQuery 블랙박스는 js 전역 변수 창에 jQuery와 $를 출력하는 것으로, 그 과정이 블랙박스에 캡슐화되어 외부 세계에 간섭하지 않는다.

jQuery 버전 1.4의 블랙박스는 다음과 유사한 자체 실행 기능을 사용합니다

(function( window, undefined){})(window)

작가는 블랙박스를 구현하는 좀 더 일반적인 방법을 제시했습니다

undefined = true;
(function(window, document, undefined){    
    if(foo == undefined) {
        }
})(this, document)

jQuery의 블랙박스에는 undefine이라는 세 번째 형식 매개변수가 있습니다. , 실제 매개변수를 전달할 때, js에 전달된 값이 없는 형식 매개변수는 정의되지 않음으로 설정되어 블랙박스 내에서 정의되지 않음의 정확성을 보장합니다. js에서는 전역 속성으로 undefine에 위 코드에서 undefine = true와 같은 값을 할당할 수 있습니다.

자체 실행 기능 모드에서 블랙박스를 구현하는 또 다른 이점은 압축을 용이하게 한다는 것입니다. 다음과 같은 상황에서는 블랙박스 내에서 간단한 변수만 사용하면 됩니다.

(function(A, B, C)){
    B.getElementById('')
})(this, document)

작가는 페이지의 특정 부분을 지속적으로 업데이트(지속적으로 실행)하는 다음과 같은 익명 기능자체 실행의 많은 예를 제시했습니다.

(function loop(){
    doStuff();
    $('#update').load('awesomething.php',function(){
        loop();
    })
    //setTimeout(loop, 100)
})()

jQuery 1.11 버전의 블랙박스는 새로운 팩토리 메소드, 이 글에서는

noCon conflict

의 구현을 살펴보지 않았습니다. 1.11 버전 코드는 다음과 같습니다

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$;
jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
};

충돌 방지 구현은 이전 버전을 저장하는 것임을 알 수 있습니다. JQuery와 $를 먼저 호출한 다음 noCon conflict가 호출되면

네이티브 js 속성 이름 지정을 통한 변환

을 제공합니다. 1.4 버전은 props 객체를 사용하여 jquery의 속성 작업과 기본 js 속성 작업
간의 대응 관계를 저장합니다. 1.11 버전은 이렇습니다

jQuery.extend({
    propFix: {
        "for": "htmlFor",
        "class": "className"
    },
    prop: function( elem, name, value ) {
        //...
        name = jQuery.propFix[ name ] || name;
    },
    propHooks: {
        //...
    }
});
jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

propFix 이 객체는 클래스를 className으로 변환하는 등 해당 관계 테이블을 저장하고, prop 함수는 이 관계 테이블을 처리하는 역할을 담당합니다.
다음 각각은 매우 흥미롭습니다. 배열의 속성을 탐색한 다음 소문자 형식을 자체에 매핑하고 propFix에 넣습니다.

Special Effects Speed

jQuery의 일부 애니메이션의 경우 직접 보통, 빠름, 느림을 사용 구현 속도를 정의하기 위해 소스 코드에 이렇게 정의되어 있습니다

jQuery.fx.speeds = {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
};

나쁜 원저자는 다음과 같은 일을 했습니다.

var isIE 
//...
jQuery.fx.speeds._default = isIE ? 800 : 400
jQuery.fx.speeds.veryfast = 200;
$('...').fadeIn('veryfast')

하나는 기본 속성에 대해 조건 판단을 하고, "veryfast"와 같은 사용자 정의 속도도 있습니다

.ready

ready 버전 1.11과 버전 1.4 사이에 큰 차이가 있습니다. 새 버전에서는 이해가 안되는 부분이 많습니다. 호환성 이유로 살펴보세요

jQuery.ready.promise = function( obj ) {    //...省略若干        } else if ( document.addEventListener ) {            // 使用addEventListener "DOMContentLoaded" 监听ready事件            document.addEventListener( "DOMContentLoaded", completed, false );            // 备选方案 "load"            window.addEventListener( "load", completed, false );        //如果IE        } else {            // Ensure firing before onload, maybe late but safe also for iframes                        //IE下 attachEvent 的"onreadystatechange"            document.attachEvent( "onreadystatechange", completed );            // A fallback to window.onload, that will always work                        //备选方案onload            window.attachEvent( "onload", completed );            // If IE and not a frame            // continually check to see if the document is ready            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll ) {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini                            // http://javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        // detach all dom ready events                        detach();                        // and execute any waiting functions                        jQuery.ready();                    }                })();            }        }    }    return readyList.promise( obj );};
.ready 利用了下面的.promise去做确保载入完成的工作，重点是document.addEventListener( "DOMContentLoaded", completed, false );window.addEventListener( "load", completed, false );document.attachEvent( "onreadystatechange", completed );window.attachEvent( "onload", completed );

네 가지 확인 방법

위에서 시작하여 IE에서 수행하는 작업 중 하나는 dom 노드가 IE에서 스크롤이 있는지 여부를 결정하는 것입니다. 스크롤하지 않으면 준비에 영향을 미칩니다. 여기서는 잘 이해가 되지 않습니다. 간단히 말해서 jQuery는 댓글의 주소에서 더 많은 내용을 볼 수 있습니다.

Selector

$('#id').find('tag.thing') --- 더 빠릅니다

$('#id tag.thing') ------- sizzle

을 사용하여 원저자는 여기서 jquery 효율성 문제를 언급했는데, 위의 방법이 더 빠른 반면, 다음의 방법은 약간 느린 편입니다. 간단히 말하면, 다음의 방법이 sizzle을 호출하는데, 실제로 sizzle을 통해 위의 모드로 변환되기 때문이며, id는 다음과 같습니다. 호출은 jQuery.init을 통해 직접 이루어집니다.

이를 확장해야 합니다. 1.11

jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
}

jQuery 객체가 실제로 init라는 자체 생성자를 반환하는 모습을 살펴보겠습니다. init가 하는 일을 살펴보세요

// Initialize a jQuery object
    init = jQuery.fn.init = function( selector, context ) {
        var match, elem;
        // HANDLE: $(""), $(null), $(undefined), $(false)
            //超级省略...下略
        // Handle HTML strings
        // HANDLE: $(html) -> $(array)
        // HANDLE: $(html, props)
        // HANDLE: $(#id)
        // HANDLE: $(expr, $(...))
        // HANDLE: $(expr, context)
        // HANDLE: $(DOMElement)
        // HANDLE: $(function)
        return jQuery.makeArray( selector, this );
    };
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

위에서 추출한 코드 주석에서 html 태그 이름과 id 획득을 포함하여 jq 자체 생성자에서 어떤 상황이 처리되는지 확인할 수 있습니다. 즉, 이 두 인수가 가장 낮은 수준이라는 것을 의미합니다. 또한 $()의 다른 처리는 다른 기능을 거쳐야 하므로 위의 처리만큼 효율적이지 않습니다.
동시에 init의 프로토타입이 jQuery.fn에 할당되어 있는 것을 볼 수 있습니다. 관심 있는 친구들은 jQuery 객체에 대해 더 자세히 알아볼 수 있습니다.

jQ의 상태 선택기(예: not,:has,:eq)는
Sizzle.selectors.pseudos

에 저장됩니다.

위 내용은 jQuery에 대해 무엇을 알아야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!