[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate

jQueryのプラグインを開発するためのテンプレートを紹介します。

jQuery Boilerplate

[ad#ad-2]

jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。

jQuery Boilerplate (stripped version)

jQueryのプラグインのテンプレート(stripped version)です。
※2011年7月26日現在のものです。

(function($) {

   $.pluginName = function(element, options) {
  
      var defaults = {
         foo: 'bar',
         onFoo: function() {}
      }
      
      var plugin = this;
  
      plugin.settings = {}
  
      var $element = $(element),
         element = element;
  
      plugin.init = function() {
         plugin.settings = $.extend({}, defaults, options);
         // code goes here
      }
		
      plugin.foo_public_method = function() {
         // code goes here
      }
		
      var foo_private_method = function() {
         // code goes here
      }
		
      plugin.init();
		
   }
	
   $.fn.pluginName = function(options) {
		
      return this.each(function() {
         if (undefined == $(this).data('pluginName')) {
            var plugin = new $.pluginName(this, options);
            $(this).data('pluginName', plugin);
         }
      });
		
   }
  
})(jQuery);

プラグインの使い方

プラグインを使用する際は下記のようになります。

$(document).ready(function() {
        
   // attach the plugin to an element
   $('#hello').pluginName({'foo': 'bar'});
        
   // call a public method
   $('#hello').data('pluginName').foo_public_method();
        
   // get the value of a property
   $('#hello').data('pluginName').settings.foo;
        
});

[ad#ad-2]