최효성 jQuery

간단한 jQuery 플러그인 작성하기(번역)

jQuery 객체에 어떤 기능을 추가하고 싶은 경우 플러그인을 작성해서 사용할 수 있다.

[1] jQuery 객체 메소드

먼저 jQuery가 작동하는 방식에 대해서 알아 둘 필요가 있다.

$( "a" ).css( "color", "red" );

$ 함수를 사용하여 엘리먼트를 선택하면 jQuery 객체를 반환하게 된다. 이 객체는 .css(), .click() 등과 같은 jQuery의 모든 메소드와 선택한 모든 엘리먼트를 가지게 된다. jQuery 객체는 $.fn 객체로부터 이러한 메소드를 가져와 사용하게 된다. 이 객체는 모든 jQuery 객체 메소드를 포함하기 때문에 플러그인을 작성할 때 이 메소드를 포함게 될 것이다.

[2] 기본 플러그인 작성

선택된 엘리먼트내의 텍스트를 green 색상으로 변경하는 플러그인을 작성해 보자. $.fn 객체에 greenify라는 이름의 함수를 작성하면 다른 jQuery 객체 메소드와 같이 사용할 수 있게 된다.

$.fn.greenify = function() {
  this.css( "color", "green" );
};

$( "a" ).greenify(); // 모든 링크를 green 색상으로 변경한다.

주의할 것은 jQuery의 다른 메소드인 .css()를 사용하기 위해서 $( this )가 아니라 this를 사용해야 한다는 것이다. 이것은 greenify 함수가 .css()와 동일한 객체에 대해서 정의되기 때문이다.

[3] 체인방식으로 메소드 사용하기

jQuery의 특징 중의 하나는 특정 선택자에 대해서 5 또는 6개의 액션을 연결할 때 메소드를 체인방식으로 연속해서 사용할 수 있다는 것이다. 이것은 모든 jQuery 객체 메소드가 최종적으로 원래의 jQuery 객체를 다시 반환하기 때문에 가능한 것이다. 그러나 몇가지 예외는 있다. 예를 들어, .width()를 매개변수 없이 호출 할 경우에는 해당 엘리먼트의 폭을 반환하여 다른 메소드를 연결해서 사용할 수 없다. 이와 같이 메소드를 체인방식으로 사용하기 위해서는 아래와 같이 코드 한줄을 추가해 주면 된다.

$.fn.greenify = function() {
  this.css( "color", "red" );
  return this;
}

$( "a" ).greenify().addClass( "greenified" );

[4] $ 변수 충돌 피하기

$ 변수는 자바스크립트 라이브러리에서 자주 사용하기 때문에 jQuery를 다른 라이브러리와 함께 사용할 경우 jQuery.noConflict() 메소드를 사용하여 jQuery에서 $ 변수를 사용하지 못 하도록 해야 한다. 그러나 이와 같은 조치를 취하게 되면 $를 jQuery 함수의 별칭으로 사용하여 작성한 플러그인은 제대로 동작하지 못하게 된다. 다른 플로그인과 함께 사용하면서 $ 별칭을 계속 사용하도록 하기 위해서는 작성하는 모든 코드를 IIFE 내부에 두고 함수로 jQuery를 넘겨주고 매개변수의 이름을 $로 명명한다.

(function ( $ ) {

  $.fn.greenify = function() {
    this.css( "color", "red" );
    return this;
  };

}( jQuery ));

이와 같이 IIFE를 사용하는 주된 목적은 자신만의 특별한 변수를 사용할 수 있게 하기 위함이다. 다른 색상의 green을 원할 경우 특정 변수에 저장하여 사용할 수 있다.

(function ( $ ) {

  var shade = "#556b2f";

  $.fn.greenify = function() {
    this.css( "color", shade);
    return this;
  };

}( jQuery ));

[5] 플러그인을 최소화하기

플러그인을 작성할 때 가능한한 $.fn 객체 내에 하나의 슬롯(slot, 차지하는 공간)만을 가지도록 하는 것이 좋다. 이것은 자신의 플러그인이 다른 플러그인에 의해서 변경되거나 반대의 경우가 발생할 경우를 줄여 주게 된다. 따라서 아래와 같은 코드는 바람직하지 못한 것이라고 할 수 있다.

(function ( $ ) {

  $.fn.openPopup = function() {
    // 팝업을 여는 코드
  };

  $.fn.closePopup = function() {
    // 팝업을 닫는 코드
  };

}( jQuery ));

따라서, 하나의 슬롯을 가지도록 작성하는 것이 더 좋기 때문에 매개변수를 사용하여 하나의 슬롯이 수행하는 동작을 제어하도록 작성한다.

(function ( $ ) {

  $.fn.popup = function( action ) {

    if ( action === "open" ) {
      // 팝업을 여는 코드
    }

    if ( action === "close" ) {
      // 팝업을 닫는 코드
    };
  };
}( jQuery ));

[6] ‘each( )’ 메소드 사용하기

일반적인 jQuery 객체는 DOM 엘리먼트에 대한 참조값들을 포함하기 때문에 jQuery 객체들은 종종 컬렉션으로 참조되기도 한다. 따라서 특정 엘리먼트에 대해서 데이터 속성 값을 가져오거나 특정 위치를 계산하는 것 같은 조작을 하고자 한다면 .each() 메소드를 사용해서 루프를 사용하도록 한다.

$.fn.myNewPlugin = function() {

  return this.each(function() {
    // 각 엘리먼트에 대해서 수행할 코드를 여기에 작성한다.
  });

};

주의해서 볼 것은 this가 아니고 .each()의 결과를 반환한다는 것이다. .each() 메소드는 체인방식으로 사용할 수 있기 때문에 이 메소드가 반환하는 this를 반환하게 되는 것이다. 이 방법이 지금까지 사용했던 것보다 체인방식을 유지하기가 더 용이하다.

[7] 옵션 사용하기

플러그인이 점점 더 복잡해지면 옵션을 넘겨 주어 플러그인의 설정을 쉽게 할 수 있도록 하는 것이 좋다. 특히 옵션이 많을 경우 가장 손쉽게 구현할 수 있는 방법은 옵션 객체를 사용할 것이다. 지금까지 작업한 greenify 플러그인을 변경해서 옵션을 받을 수 있도록 하자.

(function ( $ ) {

  $.fn.greenify = function( options ) {

    // 기본 옵션을 지정하는 가장 손쉬운 방법
    var settings = $.extend({
      // 기본 옵션
      color: "#556b2f",
      backgroundColor: "white"
    }, options );

    // settings 변수를 이용하여 색상값을 변경한다
    return this.css({
      color: settings.color,
      backgroundColor: settings.backgroundColor
    });

  };

}( jQuery ));

사용예:

$( "div" ).greenify({
  color: "orange"
});

[8] 종합해서 보기

지금까지 논의되었던 방법을 이용해서 작성한 플러그인 예는 아래와 같다.

(function( $ ) {

  $.fn.showLinkLocation = function() {

    this.filter( "a" ).each(function() {
      var link = $( this );
      link.append( " (" + link.attr( "href" ) + ")" );
    });

    return this;

  };

}( jQuery ));

// 사용예
$( "a" ).showLinkLocation();

이 플러그인은 컬렉션 내의 모든 a 태그를 찾아서 href 속성 값을 괄호 안에 추가해 태그 뒤에 붙여 준다.

<!-- 플러그인 호출 전 -->
<a href="page.html">Foo</a>

<!-- 플러그인 호출 후 -->
<a href="page.html">Foo (page.html)</a>

이것은 아래와 같이 코드를 최적화할 수 있다.

(function( $ ) {

  $.fn.showLinkLocation = function() {

    this.filter( "a" ).append(function() {
      return " (" + this.href + ")";
    });

    return this;

  };

}( jQuery ));

콜백을 호출할 수 있는 .append() 메소드를 사용했고 콜백이 반환하는 값이 각 엘리먼트에 붙게 되는 값이 된다. 또한 href 속성값을 얻기 위해서 .attr() 메소드를 사용하지 않았다는 것을 주의해서 보자. DOM API의 href 메소드를 사용하면 쉽게 href 속성값을 얻을 수 있기 때문이다.

원문 : How to Create a Basic Plugin(https://learn.jquery.com/plugins/basic-plugin-creation/)