jQuery 플러그인 정의 방법

일부 WEB 개발자들은 JQuery 라이브러리를 인용한 다음 웹 페이지에 $("#"), $(".") 를 쓴다.몇 년 썼는데 남들한테 JQuery가 너무 익숙하다고.나도 일찍이 이런 사람이었다. 회사의 기술 교류가 한 번이 되어서야 나는 비로소 자신에 대한 생각을 바꾸었다.
jquery를 확장할 때가장 핵심적인 방법은 다음 두 가지입니다.
$.extend(object)는 jquery에 정적 방법을 추가하는 것으로 이해할 수 있습니다
$.fn.extend (object) 는 jquery 실례에 방법을 추가하는 것으로 이해할 수 있습니다.
$.extend(object)
예:

/* $.extend      
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("     "); } });//  
$.fun();//  
$.fn.extentd(object)
/* $.fn.extend      
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("    "); } });
$(this).fun();
//   
$.fn.fun = function () { alert("     "); }
$(this).fun();

jquery 플러그인의 기본 구조 정의
1. 역할 영역 정의:
플러그인에 개인 역할 영역을 정의합니다.외부 코드는 플러그인 내부에 직접 접근할 수 없습니다.플러그인 내부 코드는 외부의 간섭을 받지 않고 전체 변수를 오염시키지 않는다.

  //step   JQuery    
(function ($) {
})(jQuery);

2. 플러그인에 확장 방법을 추가합니다.

//step01   JQuery    
(function ($) {
  //step02          
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);

3. 기본값을 설정합니다.

//step   JQuery    
(function ($) {
  //step-a         
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step          
  $.fn.easySlider = function (options) {
    //step-b          ，    
    var options = $.extend(defaults, options);
  }
})(jQuery);

여기서: var options = $.extend(defaults,options)의 의미입니다.options가defaults의 값을 덮어쓰고 options에 값을 부여했음을 나타냅니다.플러그인 환경에서 사용자가 설정한 값을 표시하고 플러그인의 기본값을 덮어씁니다.사용자가 기본값의 속성을 설정하지 않으면 플러그인의 기본값을 유지합니다.
4. jquery 선택기 지원:

 //step   JQuery    
(function ($) {
  //step-a         
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step          
  $.fn.easySlider = function (options) {
    //step-b          ，    
    var options = $.extend(defaults, options);
    //step   JQuery   
    this.each(function () {
    });
  }
})(jQuery);

5. JQuery 링크 호출 지원:
링크 호출 효과에 도달하기 위해서는 순환하는 모든 요소return을

//step   JQuery    
(function ($) {
  //step-a         
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step          
  $.fn.easySlider = function (options) {
    //step-b          ，    
    var options = $.extend(defaults, options);
    //step   JQuery   
    //step       
    return this.each(function () {
    });
  }
})(jQuery);

6. 플러그인의 방법:
플러그인에 정의된 방법은 외부에서 직접 호출할 수 없고 내가 플러그인에 정의한 방법도 외부 환경을 오염시키지 않았다.

//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);

이상의 내용을 통해 jQuery가 플러그인을 정의하는 방법을 소개해 드리니 마음에 드셨으면 좋겠습니다.