jQueryプラグインの作成

この記事は、jQuery用のプラグインを開発する際に注意すべき基本的なルール、最良の結果をもたらすアプローチ、および一般的なエラーについて説明することを目的としています。

はじめに

最初に、jQueryオブジェクトの新しいプロパティ関数を作成します。新しいプロパティの名前はプラグインの名前になります。

jQuery.fn.myPlugin = function() { //      };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、待ってください、私たちがよく知っているおなじみのドルのアイコンはどこにありますか？ それはまだここにあり、ドル記号も使用できる他のライブラリと競合しないように、jQueryオブジェクトを「$ 「実行時に別のライブラリによってオーバーライドされないようにします。

 (function( $ ) { $.fn.myPlugin = function() { //      }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

良いです さて、このクロージャ内で、ドル記号を自由に使用できます。

コンテキスト

これで、プラグインコードの記述を開始できるシェルができました。 しかし、始める前に、コンテキストについていくつかの言葉を述べたいと思います。 プラグインの機能の直接の範囲では、キーワード「this」は、このプラグインが呼び出されたjQueryオブジェクトを指します。



そして、ここでは、jQueryがコールバック関数を受け入れる他の呼び出しで「this」がDOMツリー要素を指していると信じて、しばしばミスを犯します。 これにより、開発者はこれをjQuery関数でさらにラップすることになります。

 (function( $ ){ $.fn.myPlugin = function() { //    $(this),   "this" -    jQuery //  $(this)   $($('#element')); this.fadeIn('normal', function(){ //  "this" -    DOM }); }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  $('#element').myPlugin();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

基本

コンテキストの操作方法を理解したので、有用な作業を行うjQueryプラグインを作成します。

 (function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 var tallest = $('div').maxHeight(); //     div-
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、 .height（）を使用して、ページで最も高いdivの高さを返すシンプルなプラグインです。

コールチェーンの可能性をサポートします

前の例では、ページの最も高いdivの整数値を計算して返します。 通常、プラグインはDOMツリーの要素セットを変更し、それらを呼び出しチェーンの次のメソッドに渡します。 これがjQueryの美しさであり、その人気の理由の1つです。 プラグインがコールチェーンをサポートするように、プラグインがこれを返すことを確認してください。

 (function( $ ){ $.fn.lockDimensions = function( type ) { return this.each(function() { var $this = $(this); if ( !type || type == 'width' ) { $this.width( $this.width() ); } if ( !type || type == 'height' ) { $this.height( $this.height() ); } }); }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 $('div').lockDimensions('width').css('color', 'red');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインは直接のスコープでこれを返すため、呼び出しチェーンをサポートし、jQueryコレクションは.cssなどのjQueryメソッドによって引き続き処理できます 。

また、プラグインが計算値を返さない場合は、プラグイン関数の直接のスコープで常にこれを返す必要があります。 呼び出されたときにプラグインに渡される引数は、プラグイン関数の直接のスコープに渡されます。 したがって、前の例では、文字列「幅」はプラグイン関数の「タイプ」パラメーターの値です。

設定とデフォルト

多数のカスタマイズオプションを提供する、より複雑でカスタマイズ可能なプラグインの場合、プラグインが呼び出されたときに（ $ .extendを使用して）展開するデフォルト設定を持つことをお勧めします。



したがって、多数のパラメーターを使用してプラグインを呼び出す代わりに、1つのパラメーターでプラグインを呼び出すことができます。パラメーターは、拡張する設定のオブジェクトリテラルです。 たとえば、これを行うことができます：

 (function( $ ){ $.fn.tooltip = function( options ) { //   -,     ,    var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { //     tooltip }); }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 $('div').tooltip({ 'location' : 'left' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、指定されたパラメーターでツールチッププラグインを呼び出した後、locationパラメーターの値（ 'location'）

パラメータ「background-color」の値は「blue」に等しいままですが、「left」の値によってオーバーライドされます。 最後に、設定オブジェクトには次の値が含まれます。

 { 'location' : 'left', 'background-color' : 'blue' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、使用可能な各設定を定義することなく、カスタマイズ可能なプラグインを作成するための良い方法です。

名前空間の定義

プラグインのネームスペースを正しく定義することは非常に重要であり、同じページで実行されている別のプラグインまたはコードによってオーバーライドされる可能性はかなり低くなります。 さらに、名前空間の定義は、必要なメソッド、イベント、およびデータの追跡を容易にするため、開発を簡素化します。

プラグインメソッド

どのような状況でも、1つのプラグインでjQuery.fnオブジェクトの名前空間を1つだけ定義する必要があります。

 (function( $ ){ $.fn.tooltip = function( options ) { //   }; $.fn.tooltipShow = function( ) { //  }; $.fn.tooltipHide = function( ) { //  }; $.fn.tooltipUpdate = function( content ) { // !!! }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは$ .fn名前空間を汚染するため、推奨されていません

これを回避するには、プラグインのすべてのメソッドを単一のオブジェクトリテラルに結合し、メソッド名を文字列として渡すことで呼び出します。

 (function( $ ){ var methods = { init : function( options ) { //    }, show : function( ) { //  }, hide : function( ) { //  }, update : function( content ) { // !!! } }; $.fn.tooltip = function( method ) { //    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 + '    jQuery.tooltip' ); } }; })( jQuery ); //   init $('div').tooltip(); //   init $('div').tooltip({ foo : 'bar' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //   hide $('div').tooltip('hide');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //   update $('div').tooltip('update', '   ');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このタイプのプラグインアーキテクチャを使用すると、プラグインクロージャーに関して親のすべてのメソッドをカプセル化し、最初にメソッド名を文字列として渡し、次にこのメソッドの追加パラメーターを渡すことでそれらを呼び出すことができます。 メソッドをカプセル化するこのアプローチは、jQueryプラグインコミュニティの標準であり、 jQueryUIの無数のプラグインとウィジェットで使用されています。

イベント

bindメソッドのあまり知られていない機能は、関連するイベントの名前空間を定義できることです。 プラグインが何らかの機能を何らかのイベントに関連付ける場合、このイベントの名前空間を設定するのが適切な形式です。 後でこの機能をイベントから切り離す必要がある場合は、同じタイプのイベントにアタッチできる機能に影響を与えることなく実行できます。



通信するイベントのタイプの名前にドットとネームスペース名を追加するだけで、イベントのネームスペースを定義できます。

 (function( $ ){ var methods = { init : function( options ) { return this.each(function(){ $(window).bind('resize.tooltip', methods.reposition); }); }, destroy : function( ) { return this.each(function(){ $(window).unbind('.tooltip'); }) }, reposition : function( ) { // ... }, show : function( ) { // ... }, hide : function( ) { // ... }, update : function( content ) { // ... } }; $.fn.tooltip = function( method ) { 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 + '    jQuery.tooltip' ); } }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 $('#fun').tooltip(); //   ... $('#fun').tooltip('destroy');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、ツールチッププラグインがinitメソッドを使用して初期化されたときに、repositionメソッドをウィンドウのresizeイベントに関連付けて、ネームスペース「tooltip」を指定します。 後で、開発者がツールチップオブジェクトを破棄する場合、適切なネームスペースを指定することにより、プラグインに接続されているすべてのハンドラーを解放できます。 この場合、バインド解除メソッドの「ツールチップ」。 これにより、このプラグインの外部のハンドラーに関連付けられたイベントを誤って解放するリスクなしに、イベントからハンドラーを安全に解放できます。

データ

多くの場合、プラグインの開発中に、状態を保存したり、指定された要素に対してプラグインが既に初期化されているかどうかを確認したりする必要がある場合があります。 jQueryのデータメソッドを使用すると、各要素の変数の状態を追跡できます。 ただし、異なる名前の多数の個別のデータ呼び出しを追跡する代わりに、1つのオブジェクトリテラルを使用することをお勧めします。これにより、すべての変数が1つの屋根の下で結合され、1つの名前空間を介してこのオブジェクトにアクセスします

 (function( $ ){ var methods = { init : function( options ) { return this.each(function(){ var $this = $(this), data = $this.data('tooltip'), tooltip = $('<div />', { text : $this.attr('title') }); //      if ( ! data ) { /* *    */ $(this).data('tooltip', { target : $this, tooltip : tooltip }); } }); }, destroy : function( ) { return this.each(function(){ var $this = $(this), data = $this.data('tooltip'); //   !!11 $(window).unbind('.tooltip'); data.tooltip.remove(); $this.removeData('tooltip'); }) }, reposition : function( ) { // ... }, show : function( ) { // ... }, hide : function( ) { // ... }, update : function( content ) { // ...} }; $.fn.tooltip = function( method ) { 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 + '    jQuery.tooltip' ); } }; })( jQuery );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データを使用すると、プラグインの呼び出し間の変数の状態を追跡できます。 1つのオブジェクトリテラル内のデータの名前空間の定義は、プラグインのプロパティへの単純な集中アクセスと名前空間データの削減の両方を提供し、必要に応じて不要なデータを簡単に削除できます。

結論とヒント

jQuery用のプラグインを作成すると、このライブラリを最大限に活用し、最も成功したソリューションと頻繁に使用する機能を再利用可能なコードに抽象化して、時間を節約し、開発プロセスを効率化できます。 以下は、jQueryプラグインを開発する際に覚えておく必要のある簡単な抜粋です。

• プラグインは常にコンストラクトでラップします。
  
  
  
  

    (function( $ ){ /*     */ })( jQuery );
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  翻訳者注：元の記事では、この構文はクロージャーと呼ばれていますが、これはクロージャーではなく、直接呼び出される関数（IIFE）です。
  
  
  
  
• プラグインの関数の直接の範囲では、これを不必要な構文構造でラップしないでください。
• プラグイン関数から特定の値を返さない限り、呼び出しチェーンをサポートするために常にこれへのリンクを返します。
• パラメータの長いリストを転送する必要がある場合は、プラグインの設定をオブジェクトリテラルの形式で渡します。オブジェクトリテラルの値は、プラグインのパラメータのデフォルト値に拡張されます。
• 単一のプラグインに対して複数のjQuery.fn名前空間を定義しないでください。
• メソッド、イベント、およびデータのネームスペースを常に定義します。