jQuery 원본 개인 소감 (1)
4369 단어 JavaScriptjquery
우선 전체적으로 jQuery의 코드 조직 구조를 보겠습니다.
(function( window, undefined ) {
......
window.jQuery = window.$ = jQuery;
})( window );
익명 함수를 실행하여 jQuery를 전역 역할 영역 window 이름으로 가져옵니다.
여기에 왜 window 대상을 전송해야 하는지에 대해 개인적으로는 다음과 같이 생각합니다.
1.jQuery 대상을 윈도우 대상에 연결하는 것입니다. (jQuery 대상을 전역 역할 영역에 노출시키려면 익명 함수를 실행하는 방식으로 윈도우 대상을 전달하지 않고 전역 역할 영역에 노출할 수 있습니까?)
함수를 통해 jQuery 객체를 반환하는 경우에도 이 기능을 사용할 수 있습니다. 코드는 다음과 같습니다.
var jQuery =
(function( ) {
......
return jQuery;
})( );
var $ = jQuery;
작가가 윈도우 대상을 전달하는 데는 분명 다른 이유가 있을 것이다.다음은 참조 게시물입니다.
[url]http://hi.baidu.com/tang_guangyao/item/8aaae79d88454c9b82d2950d
[/url]
2. 윈도우 대상을 익명 함수의 인삼으로 합니다. jQuery 코드 블록에서 윈도우에 접근할 때, 역할 체인을 맨 윗부분 역할 영역으로 되돌릴 필요가 없습니다. 그러면 윈도우에 더 빨리 접근할 수 있습니다. 만약 jQuery에서 윈도우 대상의 속성에 대한 접근이 빈번하다면 이 비용은 반드시 고려해야 합니다.
3. 또한 window는 함수의 인삼이기 때문에 코드가 압축될 때 더욱 최적화될 수 있다. 예를 들어 window를 a로 대체할 수 있다.
(function( a, undefined ) {
......
a.jQuery = a.$ = jQuery;
})( window );
작가가 당시에 코드 압축이라는 점을 고려했는지 아무도 모른다.
또 하나 이상한 점은 익명 함수에 undefined 인삼이 정의되어 있다는 것이다. 나와 같은 신인들이 원본을 보기 시작할 때 기분이 똑같을 것이다. 이게 뭐하는 짓이야!
인용하다
익명 함수를 호출하는 역할 영역에서undefined가 정말 정의되지 않았는지 확인하십시오.undefined를 다시 쓸 수 있기 때문에 새로운 값을 부여할 수 있습니다.
이것은 인터넷에서 찾은 해석이다.
위의 원인은 매우 이해하기 어렵다. 아래의 코드를 실행하면undefined가 여전히 바뀌었다는 것을 발견할 수 있다.
function test(undefined) {
console.log(undefined);
undefined='a';
console.log(undefined);
console.log(typeof undefined);
console.log(window.undefined === undefined);
}
test();
여기 사실 저자의 뜻은 undefined라는 전역 속성이 정확하다는 것을 보장할 수 없다는 것이다.undefined를 직접 사용하면undefined 값이 수정되었을 수도 있습니다.
여기에 익명 함수에 실삼을 전달하지 않는 형삼을 정의합니다.이 undefined 변수가 정말 정의되지 않았는지 확인하는 것이 목적입니다.익명 함수 내부에 대해 저자는 함수의 인삼undefined를 수정하지 않도록 확보하면 된다.
undefined가 수정할 수 있는 근원은 undefined가 전역 속성이기 때문에 ECMASCRIPT3에서 undefined를 읽을 수 있고 쓸 수 있기 때문에 undefined가 사용하기 전에 수정된 것으로 여겨질 수 있다.하지만 ECMASCRIPT5 사양에서는 undefined가 읽기 전용으로 정의되어 있습니다.[P44 javascript 권위 가이드]
한 문장을 본 적이 있는데 그 안에'John Resig 개인이 jQuery를 지키지 않는다면 누가 그의 덩어리를 이해할 수 있겠는가'라는 말이 있다.
John Resig 황소의 세계가 어찌 일반인에게 간파될 수 있겠는가. 그러나 jQuery의 코드는 매우 난해하다.
jQuery 대상은 어디에서 오는지 아래 참조
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
우리는 매번 $('xxx')일 때마다 사실 new jQuery에 있다.fn.init.
다음
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
......
}
......
}
여기에 보충해야 할 것은 함수는 모두prototype 속성이 있고 대상은 모두 가 있다는 것이다init__속성, 이 대상을 구축하는 대상의 원형을 가리키며 비교적 둘러싸인다
내려다보다
jQuery.fn.init.prototype = jQuery.fn;
삼단 코드는 정말 똑똑히 보려면 js의 기초 개념에 대해 어느 정도 이해해야 한다.
먼저 원형식 계승에 대한 이해입니다. 원형식 계승에 대한 상세한 소개는 인터넷에서 더욱 전문적인 글을 참고할 수 있습니다. 원형식 계승의 핵심은 바로prototype 속성입니다.
앞에서 말했듯이 함수는 하나의 프로토타입 속성이 있는데 프로토타입 속성에 속성과 방법을 추가하면 이 함수를 구조 함수로 하는 대상을 위해 속성과 방법을 확충할 수 있다.
return new jQuery.fn.init( selector, context, rootjQuery );이 코드는 매우 큰 미혹성을 가지고 있다.절대 이 코드에 빠지지 마세요.
첫 번째 코드는 사실 하나의 변수 jQuery 변수를 정의하고 함수를 이 변수에 부여하는 것이다
해석기에서 다음 코드를 실행할 수 있습니다.
var j = function (){ return new j.fn.init();}
너는 j가 단지 하나의 함수일 뿐이고 문법 오류도 존재하지 않는 것을 보게 될 것이다.
이어서 두 번째 코드를 보면 함수에prototype 속성이 있습니다. 여기는 jQuery라는 함수의protype 속성을 확장했습니다. 여러분이String 대상의 indexOf 방법을 확장하는 것과 같습니다.
이곳의 확충은 유사한 효과를 기대하는 것이다
var s = new String('abc'); s.indexOf('a');
같은 도리
var j = new jQuery(); j.xxx();
그러나 일반적으로 우리는 이렇게 쓰지 않는다. 우리는 이렇게 $('id')를 사용한다.코드에 대응하는 것은 new jQuery입니다.fn.init('id');
서두르지 마라. 여기에는 또 다른 문제가 있다. 바로 jQuery 대상에게 어떻게 자신을 확충할 수 있는 능력을 줄 것인가?
세 번째 코드를 보십시오.
여기에서 우리는 jQuery의 속성 fn을 jQuery에게 부여했다.fn.init.prototype, jQuery.fn.init는 우리가 jQuery 대상을 호출할 때 new의 대상이고,
이렇게 해서 우리는 jQuery의fn 속성을 확장할 때 간접적으로 jQuery 대상의 능력을 확장했다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.