jQuery Plugin

plugin

jQuery plugin은 jQuery를 확장하여 사용자 정의 메소드를 추가한 것. 이를 위해 사용자가 정의한 메소드를 $.fn 객체에 추가하여 jQuery를 확장. jQuery의 동작 원리는 $ 함수가 jQuery 객체를 반환하고, 해당 객체의 메소드들은 $.fn 객체에 정의되어 있는 구조.

(function ($) {

  $.fn.greenify = function( options ) {

    // This is the easiest way to have default options.
    let settings = $.extend({
      // These are the defaults.
      color: '#556b2f',
      backgroundColor: 'white'
    }, options );

    // Greenify the collection based on the settings variable.
    return this.css({
      color: settings.color,
      backgroundColor: settings.backgroundColor
    });
  };

}(jQuery));

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