>웹 프론트엔드 >JS 튜토리얼 >jQuery 기본 Framework_jquery에 대한 간략한 분석

jQuery 기본 Framework_jquery에 대한 간략한 분석

WBOY
WBOY원래의
2016-05-16 17:45:15906검색

1. 프로토타입 패턴 구조

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

// jQuery 생성자 정의
var jQuery = function() {
}// jQuery 프로토타입 확장
jQuery.prototype = {
};

위는 프로토타입 패턴 구조, jQuery 생성자의 프로토타입 객체 및 jQuery 인스턴스화 객체입니다. 일반적으로 다음과 같이 사용합니다.


var jq = new jQuery(); //jq 변수가 new 키워드를 통해 jQuery 생성자를 인스턴스화한 후 다음을 사용할 수 있습니다. 프로토타입 객체의 메서드이지만 jQuery는 이런 방식으로 사용되지 않습니다.


2. 선택기 인스턴스 반환

var jQuery = function() {
// 선택기 인스턴스 반환
새 jQuery를 반환합니다. 프로토타입.init();
} ;
jQuery.prototype = {
// 선택기 생성자
init: function() {
}
};
객체를 인스턴스화하기 위해 jQuery에 new 키워드가 전달되지 않더라도 jQuery 함수를 실행할 때 다음과 같이 new 키워드를 통해 init 선택기를 인스턴스화하는 객체를 얻게 됩니다.
var navCollections = jQuery('. nav'); //navCollections 변수는 클래스 이름이 nav인 DOM 객체의 컬렉션을 저장합니다.
3. 프로토타입 메소드에 액세스



코드 복사
코드는 다음과 같습니다. var jQuery = function() { // 선택기 인스턴스 반환
return new jQuery.prototype.init( );
};
jQuery.prototype = {
// 선택기 생성자
init: function() {
},
// 프로토타입 메서드
toArray: function( ) {
},
get: function() {
}
}
// 공유 프로토타입
jQuery.prototype.init.prototype = jQuery.prototype


일반적으로 jQuery 함수에서 반환되는 선택기 인스턴스 개체는 jQuery 개체입니다. 예를 들어 다음과 같이 사용할 수 있습니다.



코드 복사
코드는 다음과 같습니다. jQuery.('.nav').toArray() // 결과 집합을 배열로 변환
toArray 메소드를 사용할 수 있는 이유는 무엇입니까? 즉, jQuery.prototype 객체에서 jQuery 객체에 액세스할 수 있도록 하는 방법은 무엇입니까? 위의 객체를 인스턴스화하는 프로토타입 객체와 jQuery.prototype 객체를 공유하기만 하면 됩니다. 코드는



코드 복사
코드는 jQuery.prototype.init입니다. 프로토타입 = jQuery.prototype; // 공유 프로토타입

4. 자체 실행 익명 함수


코드 복사
코드는 다음과 같습니다. (function(window, undefine) { var jQuery = function() {
// Return selector 인스턴스
return new jQuery.prototype.init();
};
jQuery.prototype = {
/ / 선택기 생성자
init: function() {
},
/ /Prototype 메소드
toArray: function() {
},
get: function() {
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
// 익명 함수 실행 후 지역 변수 및 함수가 취소됩니다.
var a, b, c;
function fn() {
}
// jQuery를 전역 변수로 만들기
window.jQuery = window.$ = jQuery;
})(window);


자체 실행 익명 함수에 선언된 지역 변수 및 함수는 익명 함수가 취소된 후 취소됩니다. 실행되면 메모리가 해제되고 jQuery 전역 변수 인터페이스만 외부에 유지됩니다.

출처: http://www.cnblogs.com/yangjunhua/archive/2012/12/27/2835989.html
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.