【jQuery】プラグインの様々な作り方(定義パターン)

「プラグインの作り方」と調べて出てくるのが大抵
$.fn.プラグイン名 = function(){全ての処理}
この形でした。

ですが、配布されているプラグインのソースコードを確認すると上の形と違うことが多いです。
なので今回はよく見る定義パターンとそれぞれのメリット、デメリットをまとめてみます。
(間違っているところがあったらご指摘していただけると有難いです。)

jQuery プラグインの定義パターンについて調べてみた
(主にこの記事の内容、その他の記事、書籍を自分なりに整理したもの。)

1.いつもの定義

基本的なjQueryのプラグインの作り方。

(function($){
    $.fn.myPlugin = function( option ) {        
        var elements = this;     
        return this.each(function() {    
        });
        var func = function(){};
    };
})(jQuery);

のように $.fn.プラグイン名 = function() の中に全て書くやつ。

メリット

JavaScriptの初心者でも読める。

デメリット

以下のように呼び出した際、func()がインスタンスで共通の処理であっても、$(‘#testA’)、$(‘#testB’)のそれぞれのインスタンスの内部でfunc()は生成されてしまいます。

$('#testA').myPlugin();
$('#testB').myPlugin();

関数1つ程度なら全然問題ないですが、適用する要素、またはソースコードが増えるにつれ無駄なメモリを消費してしまうことになります。

参考プラグイン

switchingPlugins

内部変数の数にもよりますが、100~200行程度のプラグインならこの書き方でいいのではないかと思います。

2.メソッドをカプセル化

先ほどのよりは少し難しいかもしれません。
return 関数を見るとクロージャを使った変数の保存をしているのかと思ったけど、このreturn methodはjQueryオブジェクトを返している。( $.fn.tooltipはクロージャであるが、以下のリンク先のトグルボタンのような記憶域を使用する為ではない)
クロージャの仕組みを理解する

(function( $ ){

  var methods = {
    init : function( options ) { 
      // THIS 
      return this;
    },
    show : function( ) {
      // IS
    },
    hide : function( ) { 
      // GOOD
    },
    update : function( content ) { 
      // !!! 
    }
  };

  $.fn.tooltip = function( method ) { 
    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
  };

})( jQuery );

// calls the init method
$('div').tooltip(); 

// calls the init method
$('div').tooltip({
  foo : 'bar'
});

メリット

methodsをプラグインの外部に定義しapply()で自分のメソッドとし呼び出している。

デメリット

文字列を引数で渡しメソッドを実行するというのは少し使いづらい。

参考プラグイン

メソッドの呼び出しに.apply() データの受け渡しに.data() を使ったシンプルで理解しやすいプラグイン
jqFloat.js

3.コンストラクタを使った定義(パブリックメソッド不要)

$(‘#example’).calendar({})
プラグインメソッドとオプション、コールバック関数だけで機能的に問題ない場合はこっち。

メリット

各要素固有のパラメータをインスタンス側で保持することができ、オブジェクト指向
また追加機能はオプションからのコールバック関数を実行することで、初心者も使いやすい。

デメリット

メソッドが用意されていないので機能が制限される。

参考プラグイン

シンプルなカレンダー
無駄がなく、十分なコールバック関数も用意されおりデメリットは感じられない。
シンプルなイベントカレンダーを実装するjQueryプラグイン|jQuery.calendar

4.コンストラクタを使った定義(パブリックメソッド必要)

参照先を.data(‘carousel’)に保存しているのがポイント
$(this).data(‘carousel’).move(1)で moveメソッドを実行できる。

 ;(function ($) {
    $.fn.carousel = function(options) {
   ...
    elements.each(function () {
      $(this).data('carousel', new Carousel($(this), opts));
    });
    return this;
  };
  ...
  function Carousel(root, options) {
    var self = this,
        viewport = root.find('.viewport:first'),
       
   this.move  = function (direction) {
               current += direction;
    }
 
 
    var initialize = function() {
      pages.width(viewport.width());
      pageSize = $(pages[0]).outerWidth(true);
      steps = pages.length;
      contents.css('width', (pageSize * pages.length));
      return self;
    }
    return initialize();
  }
})(jQuery);

メリット

メソッドも用意されており、インスタンスの参照を.data()を使い要素に保存しています。
これぞjQueryのプラグインの作り方だと思いました。

デメリット

とくになし。

参考プラグイン

プラグインの作り方を1から説明しており、完成したプラグイン、デモもあります。
画像スライドショーでjQueryプラグインの基本を学ぶ

パブリックメソッド、プライベートメソッドの使い分けとか参考になりました。
1200行程あります。
FlexsSider

さいごに

主要な定義パターンを理解できたので、プラグインのソースコードを苦しまず読むことができるようになったと思います。
簡単なプラグイン作るときは1の方法を、その他はそれぞれのプラグインの特徴に合わせ使っていこうと思います。

JavaScriptでのオブジェクト指向を実現するパターンをjQueryのプラグインを通し楽しく学ぶことができました。プラグインを作ってみようとしている方は是非一度参考プラグインのコードを読んでみてください。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD