JQuery 플러그인_jquery 작성에 대한 기본 지식

JQuery 지식 대중화

지식 1: JQuery로 플러그인을 작성할 때 핵심 방법은 다음과 같습니다.

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

$.extend(object)는 JQuery에 정적 메서드를 추가하는 것으로 이해될 수 있습니다.

$.fn.extend(object)는 JQuery 인스턴스에 메서드를 추가하는 것으로 이해될 수 있습니다.

기본 정의 및 명칭:

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

/* $.extend 정의 및 호출
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend( { fun1 : function () { Alert("실행 방법 one"); } });
$.fun1();
/* $.fn.extend 정의 및 호출
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: 함수 () { 경고("메소드 2 실행"); } });
$(this).fun2();
//
$.fn.fun3 = function () { 경고( "방법 3 실행") }
$(this).fun3();

지식 2: jQuery(function () { })와 (function ($) { })(jQuery);의 차이점:

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

jQuery(function () { });
//
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * *와 동일 * * * * * * * * * * * * */
(function ($) { })(jQuery);
//
와 동일 var fn = function ($) { };
fn(jQuery);

jQuery(function () { });는 DOM 요소가 로드된 후 실행 메서드의 코드입니다.
(function ($) { })(jQuery);는 익명 함수를 정의합니다. 여기서 jQuery는 이 익명 함수의 실제 매개변수를 나타냅니다. 주로 JQuery 플러그인 개발에 사용되며, 플러그인의 프라이빗 도메인을 정의하는 역할을 합니다.

세 번째: JQuery 플러그인 표준 구조 개발

1. 범위 정의: JQuery 플러그인을 정의하려면 먼저 플러그인의 코드를 외부 간섭이 없는 곳에 배치해야 합니다. 좀 더 전문적인 용어로 표현하려면 이 플러그인에 대한 비공개 범위를 정의해야 합니다. 외부 코드는 플러그인 내부의 코드에 직접 액세스할 수 없습니다. 플러그인 내부의 코드는 전역 변수를 오염시키지 않습니다. 어느 정도까지는 플러그인과 실행 환경 간의 종속성을 분리합니다. 그렇다면 플러그인의 비공개 범위를 어떻게 정의합니까?

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

(함수($){
})( jQuery);

지금까지 가장 간단한 JQuery 플러그인 중 하나가 완성되었습니다. 호출 시 $("#domName").easySlider({}) 또는 $(".domName").easySlider({}) 이상에서 이 플러그인을 호출할 수 있습니다.

3. 기본값 설정: .net 컨트롤을 정의하는 것과 마찬가지로 JQuery 플러그인을 정의합니다. 완벽한 플러그인은 상대적으로 유연한 속성을 가져야 합니다. 다음 코드를 살펴보겠습니다. . TextBox 컨트롤에는 Width 및 Height 속성이 있습니다. TextBox를 사용할 경우 컨트롤 자체에 기본값이 있으므로 사용자가 컨트롤의 Height 및 Width를 자유롭게 설정하거나 값을 설정하지 않을 수 있습니다. JQuery 플러그인 개발을 준비할 때 사용자가 속성을 지정하지 않을 경우 기본값이 있어야 합니다. JQuery에서는 이러한 정의를 두 단계로 구현할 수 있습니다. 다음 코드 step03-a, step03-b를 참조하세요. .

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

//step01 JQuery의 범위를 정의합니다
( function ($) {
//step03-a 플러그인의 기본 값 속성
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
};
}; //step03-b 사용자 정의 속성, 기본 속성 병합
var options = $.extend(defaults, options);
}
})(jQuery);

프로그래머는 변수 이름 변경, 줄 변경 등 혁신을 좋아합니다. 기본 속성을 표현하는 데 사용되는 var defaults = {}를 보고 JQuery 플러그인을 작성할 때와 다르다는 생각이 들어서 var default01 ={}과 var default02 ={}를 사용하여 기본 속성을 표현했습니다. 그런 다음 기본 속성 이름은 모든 종류이며 점점 더 나빠집니다. 따라서 JQuery 플러그인을 작성할 때 기본 속성을 정의할 때 기본 속성을 나타내기 위해 defaults 변수를 사용하는 것이 더 읽기 쉽습니다.

누군가 다음 코드 줄을 보고 var options = $.extend(defaults, options) 눈살을 찌푸리며 혼란스러워했습니다. 그럼 먼저 다음 코드를 살펴보겠습니다.

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

var obj01 = { name: "영문 이름 : Sam Xiao ", 나이: 29, 여자친구: { 이름: "Yang", 나이: 29} }
var obj02 = { 이름: "중국 이름: XiaoJian", 여자친구: { 이름: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);

코드를 개발 환경에 복사하고 각각 a, b, c, d 값을 보면 var options = $.extend(defaults, options)의 의미를 이해할 수 있을 것입니다. 옵션이 기본값을 무시하고 해당 값을 옵션에 할당함을 나타냅니다.
플러그인 환경에서는 사용자가 설정한 값이 플러그인의 기본값보다 우선한다는 의미이며, 사용자가 기본값으로 속성을 설정하지 않으면 플러그인의 기본값이 무시됩니다. 아직까지 유지되어 있습니다.

4. JQuery 선택기 지원: JQuery 선택기는 JQuery의 뛰어난 기능입니다. 우리 플러그인이 JQuery 선택기를 지원하지 않도록 작성되었다면 정말 후회할 일입니다. JQuery 플러그인이 여러 선택기를 지원하도록 하려면 코드를 다음과 같이 정의해야 합니다.

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

//step01 JQuery의 범위를 정의합니다
( function ($) {
//step03-a 플러그인의 기본 값 속성
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
};
}; //step03-b 사용자 정의 속성, 기본 속성 병합
var options = $.extend(defaults, options);
//step4 JQuery 선택기 지원
this.each(function () {

});
}})(jQuery);

5. JQuery 링크 호출 지원: 위 코드는 완벽해 보이지만 사실 그렇게 완벽하지는 않습니다. 링크 호출은 지금까지 지원되지 않습니다. 링크 호출 효과를 얻으려면 루프의 각 요소를 반환해야 합니다

코드 복사 코드는 다음과 같습니다.//step01 JQuery의 범위를 정의합니다

( function ($) {

//step03-a 플러그인의 기본 값 속성
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
};
}; //step03-b 사용자 정의 속성, 기본 속성 병합
var options = $.extend(defaults, options);
//step4 JQuery 선택기 지원
//step5 체인 호출 지원
       return this.each(function () {

});
}
})(jQuery);

이러한 정의는 링크 호출을 지원할 수 있습니다. 예를 들어, 다음과 같은 호출을 지원합니다: $(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color" : "red ", "border-bottom-style": "dotted" });

6. 플러그인의 방법: 플러그인 기능을 구현하려면 수백, 수천, 심지어 수만 줄에 달하는 많은 양의 코드가 필요한 경우가 많습니다. 이 코드를 구조화하려면 함수를 사용해야 합니다. 첫 번째 지점에서 언급했듯이 플러그인에서 정의한 메서드는 외부 세계에서 직접 호출할 수 없습니다. 플러그인에서 정의한 메서드는 외부 환경을 오염시키지 않습니다. 이제 플러그인에서 몇 가지 메서드를 정의해 보세요.

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

//step01 JQuery의 범위를 정의합니다
( function ($) {
//step03-a 플러그인의 기본 값 속성
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
};
};
//step06-a 플러그인에서 메소드 정의 (obj).append(function () { return " (" $(obj).attr("href") ")" });
}

//step02 플러그인 확장 메소드 이름 $.fn.easySlider = function(options) {

//step03-b 사용자 정의 속성, 기본 속성 병합
var options = $ .extend (기본값, 옵션);
//step4는 JQuery 선택기를 지원합니다
//step5는 체인 호출을 지원합니다
return this.each(function () {
//step06-b는 플러그인 방법
               showLink(this);
       });
Step06-a: showLink()라는 메서드가 플러그인에 정의되어 있습니다. 이 메서드는 플러그인 외부에서 직접 호출할 수 없으며 C# 클래스의 비공개 메서드와 약간 비슷하며 사용할 수만 있습니다. 플러그인 내에서. 06-b단계에서는 플러그인 내부에서 메소드를 호출하는 방법을 보여줍니다.