>웹 프론트엔드 >JS 튜토리얼 >Jquery 선택기 $implementationprinciple_jquery

Jquery 선택기 $implementationprinciple_jquery

WBOY
WBOY원래의
2016-05-16 18:40:431249검색

그런데 업무상의 문제로 오랫동안 웹사이트 프로젝트를 하지 않았고 Jquery의 소스코드를 공부할 시간도 없었습니다. 오늘은 시간이 날 때마다 이 질문이 해결되지 않았습니다. Jquery의 소스코드를 열어서 살펴보면 내일 구현될 예정입니다. jquery의 js 파일을 추가하면 실제로 함수가 실행되는데, 그 안에는 $와 JQuery 변수가 초기화되어 있습니다. 이 기능을 구현하는 방법은 다음과 같습니다(코드는 삭제 및 변경되었으며, 구현 원리에 영향을 미치지 않습니다):

코드 복사 코드는 다음과 같습니다:

(function() {
var
// window에 대한 참조 속도를 높이고 이름을 munging할 수 있습니다.
window =
// undefine에 대한 참조 속도를 높이고 해당 이름을 삭제할 수 있습니다.
undefine,
// 덮어쓸 경우 jQuery를 통해 매핑
_jQuery = window.jQuery,
/ / 덮어쓸 경우 $ 위에 매핑
_$ = window.$,
jQuery = window .jQuery = window.$ = function(selector, context) {
// jQuery 객체는 실제로는 init 생성자 'enhanced'
return new jQuery.fn.init(selector, context)
},
// HTML 문자열 또는 ID 문자열을 확인하는 간단한 방법
// (둘 다) 그 중 최적화)
quickExpr = /^[^// 단순 선택기인가요
isSimple = /^.[^:#[.,] *$/
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
// 선택 항목이 제공되었는지 확인하세요
// 선택 항목이 제공되었는지 확인하세요
selector = selector || document
this[0] = selector; this.length = 1;
this.context = 선택기;
return this;
} ,
show:function() {
alert("this.show"); },
// 빈 선택기로 시작
selector: "",
// 현재 사용 중인 jQuery 버전
jquery: "1.3.2"
}; jQuery.fn.init.prototype = jQuery.fn;
})();
함수 테스트(src){
alert($(src))
$(src).show( );


코드에서 이러한 함수가 실행되는 것을 확인할 수 있습니다( funtion(){})();
var window =
_jQuery = window.jQuery;
_$ = window.$;

이 코드는 jQuery와 $ 변수를 선언해야 하는 이유는 무엇인지 모르겠습니다. 아직은 전문가들이 해결해줄 때까지 기다리겠습니다! !

하지만 중요하지 않다고 생각합니다. 가장 중요한 것은 다음 코드이기 때문입니다.

jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);

jQuery.fn.init와 같은 함수를 생성하면 $ 인스턴스가 반환되는 것을 볼 수 있습니다. 사용할 수 있지만 아직은 사용할 수 없습니다. jQuery.fn의 메서드에 액세스하려면 다음 문장을 추가해야 합니다.

jQuery.fn.init.prototype = jQuery.fn; Jquery의 이러한 기능과 기타 기능은 프로토타입이나 확장에 메서드를 추가하는 것 외에는 이해하기 쉽습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.