jQuery 플러그인을 개발하는 방법

jQuery 플러그인 개발 안내서 : 재사용 가능한 구성 요소 생성

코어 포인트 :

jQuery 플러그인을 만들면 개발자가 모든 웹 페이지에서 재사용 할 수있는 구성 요소를 만들 수있어 기능 이름 충돌의 위험이 줄어 듭니다. 플러그인은 jQuery 라이브러리에 추가 된 메소드의 기능 정의를 사용합니다. jQuery 플러그인을 개발할 때 매개 변수 처리가 매우 중요합니다. 복잡한 매개 변수 처리를 피하려면 여러 매개 변수 대신 단일 JSON 객체를 전달하십시오. jQuery의 함수를 사용하여 기본 매개 변수와 사용자 매개 변수를 병합 할 수 있습니다.

메소드가

를 반환하여 다른 함수가 체인 호출을 만들 수 있도록 jQuery의 주요 기능을 "체인 호출"이라고합니다. jQuery 라이브러리가로드 된 후 플러그인은
• 확장자와 함께 저장하고 HTML 페이지에 포함되어야합니다. fn this
• jQuery는 가장 인기있는 JavaScript 라이브러리로, 많은 웹 사이트가 동적 효과와 Ajax 기능을 달성하기 위해 사용합니다. 그러나 플러그인 개발을 조사하고있는 개발자는 상대적으로 적습니다. 이 튜토리얼은 기본 사항을 설명하기위한 간단한 플러그인을 만듭니다. 우리의 코드는 하나 이상의 선택된 노드에서 텍스트를 반전시킵니다 - 데모 페이지를보십시오. extend
왜 jQuery 플러그인을 만드는 이유는 무엇입니까?
• 간단히 말해 : 재사용. jQuery를 확장하면 모든 웹 페이지에서 재사용 할 수있는 구성 요소를 만들 수 있습니다. 코드가 캡슐화되어 있으며 다른 곳에서 동일한 함수 이름을 사용하지는 않습니다. this .js jQuery는 어떻게 작동합니까

핵심 부분에서 jQuery는 CSS 선택기를 포함하는 DOM 요소 또는 문자열을 수신합니다. 배열과 같은 DOM 노드 모음 인 jQuery 객체를 반환합니다. 그런 다음이 노드 그룹에 대한 체인에서 하나 이상의 방법 라고 불릴 수 있습니다.

참고 : jQuery 라이브러리를 "jQuery"라고하지만 "$"는이를 참조하는 바로 가기 변수입니다. 다른 라이브러리는 "$"를 차지할 수 있습니다.

jQuery 플러그인은 어떻게 작동합니까

jQuery를 사용하면 라이브러리에 메소드를 추가 할 수 있습니다. 이러한 방법이 호출되면 jQuery 객체는 javaScript의

객체로 전달됩니다. DOM 노드는 필요에 따라 작동 할 수 있으며 방법은 를 반환하여 다른 함수를 Chained라고 할 수 있습니다. 샘플 플러그인은 다음 코드를 사용하여 호출됩니다. 우리는 또한 두 가지 선택적 매개 변수를 추가 할 것입니다 :

와 . 이 두 매개 변수가 정의되면 반전 되려면 문자열 길이 가이 두 한계 사이에 있어야합니다.

플러그인 문

플러그인은 jQuery의 함수 정의를 사용합니다.

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

"$"대신 "jQuery"를 사용하면 다른 JavaScript 라이브러리와 충돌하지 않도록합니다. 모든 내부 코드는 "$"대신 "jQuery"를 참조해야합니다. 그러나 익명 함수를 사용하여 일부 입력을 저장하고 파일 크기를 줄일 수 있습니다.

이 함수는 즉시 실행되며 jQuery를 "$"라는 매개 변수로 전달합니다. "$"는 로컬 변수이므로 전역 "$"변수를 얻기 위해 첫 번째 다른 라이브러리가 아닌 jQuery 라이브러리를 항상 참조한다고 가정 할 수 있습니다.

플러그인 매개 변수

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

우리의 플러그인에는 두 가지 매개 변수가 필요합니다. 가장 쉬운 방법은 예를 들어 함수 매개 변수로 정의하는 것입니다.

그러나 나중에 더 많은 매개 변수를 추가하기로 결정하면 어떻게됩니까? 당사의 플러그인에는 수십 가지 옵션이있을 수 있습니다. 매개 변수 처리는 빠르게 복잡해질 수 있습니다. 대안으로, 우리는 단일 JSON 객체를 전달할 수 있습니다.

함수의 첫 번째 줄은 기본 매개 변수 세트를 정의한 다음

매개 변수를 사용자 정의 값 로 재정의해야합니다. jQuery의 기능은이 문제를 다루는 데 도움이 될 수 있습니다. 따라서 따라서 호출 코드 가이 값을 덮어 쓰지 않는 한 는 0이고 는 99999입니다.

플러그인 코드

이제 우리는 메인 플러그인 코드를 작성할 수 있습니다 : minlength <:> 설명 : maxlength 함수는 모든 jQuery dom 노드를 가로 지르고 익명 함수를 호출합니다.

함수에서 "이"에는 단일 노드가 포함되어 있습니다. jQuery 노드 컬렉션이 에 할당되어 jQuery 메소드를 실행할 수 있습니다.

jQuery.fn.reverseText = function(params) { ... };

variable

는 dom 노드에서 텍스트 문자열로 할당됩니다. 빈 문자열로 설정하십시오.

의 길이가

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

와

사이에 있으면 루프는 에서 역 텍스트 문자열을 만듭니다. 그런 다음 그에 따라 DOM 노드를 업데이트하십시오. reverseText 체인 호출을 깨지 마십시오! extend 마지막으로, 우리는 jQuery 객체를 반환하여 다른 방법을 쇄신이라고 불릴 수 있어야합니다.

전체 코드

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

플러그인 코드가 완료되었습니다 <p> <as>이 파일을 로 저장하십시오. 그런 다음 jQuery 라이브러리가로드 된 후 HTML 페이지에 jQuery 라이브러리를 포함시킬 수 있습니다. <code>params.minlength 이 페이지의 목록은 이제 첫 번째 및 세 번째 총알에서 텍스트를 뒤집습니다 (첫 번째 항목은 0으로 시작합니다) : params.maxlength.

리소스 :

뷰 플러그인 데모 페이지 뷰 플러그인 JavaScript 코드 플러그인 및 샘플 코드 다운로드
• 이제 jQuery 플러그인 개발을 잘 이해해야합니다. SitePoint JavaScript 포럼은 또한 도움과 조언을 구하는 훌륭한 자료입니다. 출시 예정 : 유용한 페이지 구성 요소를 jQuery 플러그인으로 빌드하는 방법에 대한 새로운 3 부 튜토리얼.
• (이 부분의 내용이 의사 원리 요구 사항과 일치하지 않고 너무 길기 때문에 원본 문서의 FAQ 부분은 여기서 생략됩니다.)

위 내용은 jQuery 플러그인을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!