JQuery 플러그인을 정의할 줄 모르며 JQuery를 안다고 말하지 마라

안내
일부 WEB 개발자들은 JQuery 라이브러리를 인용한 다음 웹 페이지에 $("#"), $(".") 를 쓴다.몇 년 썼는데 남들한테 JQuery가 너무 익숙하다고.나도 일찍이 이런 사람이었다. 회사의 기술 교류가 한 번이 되어서야 나는 비로소 자신에 대한 생각을 바꾸었다.
2. JQuery 지식 보급
지식 1: JQuery로 플러그인을 작성할 때 가장 핵심적인 방법은 다음과 같습니다.
$.extend(object)는 JQuery에 정적 메서드를 추가하는 것으로 이해할 수 있습니다.
$.fn.extend(object)는 JQuery 인스턴스에 메서드를 추가하는 것으로 이해할 수 있습니다.
기본 정의 및 호출:

/* $.extend      
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("     "); } });
$.fun1();
/*  $.fn.extend      
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("    2"); } });
$(this).fun2();
//   
$.fn.fun3 = function () { alert("     "); }
$(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 플러그인 개발에 사용되며 플러그인의 개인 영역을 정의하는 역할을 합니다.
   
3: JQuery 플러그인 표준 구조 개발
1. 역할 영역 정의: JQuery 플러그인을 정의합니다. 우선 이 플러그인의 코드를 외부의 방해를 받지 않는 곳에 두어야 합니다.전문적으로 말하자면 이 플러그인에 개인 역할 영역을 정의하는 것이다.외부 코드는 플러그인 내부의 코드에 직접 접근할 수 없습니다.플러그인 내부의 코드는 전역 변수를 오염시키지 않습니다.일정한 작용에서 플러그인과 운행 환경의 의존을 풀었다.이렇게 많이 말했는데, 플러그인의 개인 역할 영역을 어떻게 정의해야 합니까?
//step01   JQuery     
  
(function ($) {

})(jQuery);
  
이 작용역을 얕보지 마라. c#가 클래스를 정의하는class 키워드처럼 중요하다.
2, JQuery를 위한 플러그인 확장: JQuery의 역할 영역을 정의한 후 가장 핵심적이고 가장 절실한 단계는 이 JQuery의 실례에 확장 방법을 추가하는 것이다.우선 이 Jqury 플러그인에 easySlider라는 방법을 명명합니다. 이 플러그인을 호출할 때 옵션스를 통해 이 플러그인에 파라미터를 전달할 수 있습니다.구체적인 정의 방법은 다음과 같다.

//step01   JQuery     (function ($) { //step02           $.fn.easySlider = function (options) {
        
    }
})(jQuery);
지금까지 사실 가장 간단한 JQuery 플러그인 하나가 완성되었다.호출할 때 $("#domName")을 사용할 수 있습니다.easySlider({}) 또는 $(".domName").easySlider ({}) 또는 더 많은 방식으로 이 플러그인을 호출합니다.
3, 기본값 설정: JQuery 플러그인을 정의하는 것과 같이 정의합니다.net 컨트롤.완벽한 플러그인은 비교적 유연한 속성이 있어야 한다.이 코드를 살펴보겠습니다:  .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'
        //……
    };
    //step02          
    $.fn.easySlider = function (options) {
        //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", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "   ：XiaoJian", girlfriend: { name: "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)의 의미입니다.options가defaults의 값을 덮어쓰고 options에 값을 부여했음을 나타냅니다.플러그인 환경에서 사용자가 설정한 값을 표시하고 플러그인의 기본값을 덮어씁니다.사용자가 기본값의 속성을 설정하지 않으면 플러그인의 기본값을 유지합니다.
4, JQuery 선택기 지원: JQuery 선택기, JQuery의 우수한 기능입니다. 만약에 우리의 플러그인이 JQuery 선택기를 지원하지 않는다고 쓰면 적지 않은 유감입니다.JQuery 플러그인을 사용하여 여러 선택기를 지원할 수 있는 경우 코드는 다음과 같이 정의해야 합니다.
//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02          
    $.fn.easySlider = function (options) {
        //step03-b          ，    
        var options = $.extend(defaults, options);
        //step4   JQuery   
        this.each(function () {

        });
    }
})(jQuery);
  

  
5, JQuery 지원 링크 호출: 위의 코드는 완벽해 보이지만 사실은 완벽하지 않다.지금까지 링크 호출이 지원되지 않았습니다.링크 호출 효과에 도달하기 위해서는 순환하는 모든 요소return을

//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02          
    $.fn.easySlider = function (options) {
        //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, 플러그인 안의 방법: 흔히 하나의 플러그인의 기능을 실현하려면 대량의 코드가 필요하다. 수백 줄, 수천 줄, 심지어 수만 줄에 달할 수 있다.우리는 이 코드를 구조화하려면function의 도움을 빌려야 한다.첫 번째 부분에서 말했듯이 플러그인에 정의된 방법은 외부에서 직접 호출할 수 없고 내가 플러그인에 정의한 방법도 외부 환경을 오염시키지 않았다.이제 플러그인에 어떤 방법을 정의할지 시도해 봅시다.

//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a         
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02          
    $.fn.easySlider = function (options) {
        //step03-b          ，    
        var options = $.extend(defaults, options);
        //step4   JQuery   
        //step5       
        return this.each(function () {
            //step06-b         
            showLink(this);
        });
    }
})(jQuery);
단계 step06-a: 플러그인에 showLink () 라는 방법을 정의합니다.이 방법은 플러그인 외에는 직접 호출할 수 없다. 약간 C#류의 개인적인 방법과 같아서 플러그인 내부의 사용만 만족시킬 수 있다.단계 step06-b는 플러그인 내부를 어떻게 호출하는지 보여 줍니다.