Drupal 7のフロントエンド開発者向けのJSスクリプト作成ガイド

Drupalのレイアウトを作成するにはさまざまな方法があります。 誰かがすでに暗くなっているページをタイプセットし、誰かが標準のテーマでやってみようとしますが、原則として、レイアウトデザイナーは最初にデザインによってページをタイプセットし、出力はHTMLファイルのセット-スライスです。 次に、開発者は、これらのファイルを調整時に部分的に統合します。

また、統合の過程でエラーが発生し、いくつかの修正が行われるため、それに関連するレイアウトとスクリプトは編集とテストに使用できるはずです。

主に説明するのは後者の方法です。D7用のJSスクリプトを作成する際の典型的な間違いとそれらを解決するためのベストプラクティスについて説明します。 Drupalのコーダーとモジュールの開発者の両方にとって興味深いものになると思います。 レイアウトデザイナーの場合、事実によって導かれるべき主な原則は、スクリプトがDrupal環境で動作することであり、これにより多くの制限が課せられます。 。

JQuery変数名

Drupal 7では、バージョン6とは異なり、$を使用してjQueryメソッドにアクセスすることはできません。この変数は単に宣言されていないためです。

多くの場合、タイプセッターがレイアウトで動作するスクリプトを作成した場合、または既成のスクリプトを使用しただけで統合の問題が発生した場合に対処する必要があります。 ほとんどの場合、問題は変数$の使用です。 怖がる必要はありません-どこに行っても$をjQueryに置き換える必要はありません。

スクリプトがあるとしましょう：

$(function () { $('div.menu-expanded').hide(); $(....); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Drupalへの接続時に機能させるには、次のように再配置する必要があります。

 (function ($) { $(function () { $('div.menu-expanded').hide(); $(...); }); }) (jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、標準のスコープ割り当てメカニズムを使用して、すべてのコードを変更せずにラップするだけで、jQueryオブジェクトは$という名前で使用可能になりました。

将来の問題を回避し、修正でスクリプトを登らないために、そのようなテクニックをタイプセッターにすぐに説明することをお勧めします。

Drupal.behaviors

Drupalには、ドキュメント準備イベントDrupal.behaviorsを処理する特別な方法があり、多くの利点があります。 すでにD6にありましたが、書き方が少し変わっています。

たとえば、次のようなスクリプトがあります。

 $(function (){ $('a.tooltip').someTooltipPlugin(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが単純明快ですが、関心のあるクラスを持つ要素aが非同期にページに表示されるとどうなりますか？ すべてのハンドラーが再ハングするか、非同期コンテンツが返される場所でこのコードを複製する手で関数を呼び出す必要があることがわかります。

行動主義メカニズムは、次の概念を提供します。

ページの準備ができたときに呼び出す必要があるすべてのコードは、次の構造で囲む必要があります。

 (function ($) { Drupal.behaviors.yourName = { attach : function(context, settings) { // Your code here. } }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようにして、動作を指定しました-Drupal.behaviorsオブジェクトに新しいプロパティを追加しただけです。 その利点は、ページ全体をロードするときの呼び出しに加えて、Drupalがすべての動作を呼び出すことです。たとえば、ajaxリクエストを受信したときです（フォームまたはビューの更新などの標準リクエストの場合）。

すべての動作は、次のように手動で呼び出すことができます。

 Drupal.attachBehaviors(document, {});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Drupalは、Drupal.behaviorsのすべてのプロパティを調べて、attachメソッドを呼び出します。

最初の引数に注意してください（2番目の引数については、純粋にフロントエンドの開発者にとっては理解できないので、2番目の引数については話さないことにしました）。 ここでは、ビヘイビアを適用（「アタッチ」）する必要があるコンテンツ（DOM要素またはセレクター）を転送する必要があります。 この値は、各動作のコンテキスト引数として使用できます。 これは、動作内のコードの範囲を制限するために必要です。

前の例のコードを使用すると、動作の呼び出しごとにページ上のすべてのリンクにハンドラーが追加されます。 しかし、次のようにコードを書き直すと：

 $('a...', context).someTooltipPlugin();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、ページをロードすると、ページ全体のクラスとのすべてのリンクが処理されます。これは、ビヘイビアーへの最初の呼び出しがコンテキストとしてのドキュメントオブジェクトで発生するためです。

次に、行動主義者へのすべての呼び出しで、新しく受信したコンテンツ内でのみ。

たとえば、ajaxページネーションのリストがある場合、2ページ目に移動するときは、ドキュメント全体ではなく、2ページ目のコンテンツのみを再処理することに関心があります。

モジュールを作成する場合は、サードパーティの開発者がロジック動作をコンテンツに「アタッチ」できるように、機能を動作にラップするだけです。 そして、ページをロードするときだけでなく、いつでも。

レイアウト設計者向けのニュアンス。 レイアウトを最初に準備し、その後、Drupalにレイアウトする場合-ビヘイビアリストを使用してすぐにコードを作成する必要があります。

当然、レイアウト上の動作はネイティブのDrupalスクリプトなしでは機能しません。存在しない変数へのアクセスなどについてエラーがスローされます。

これを回避するには、Drupalコアのレイアウトにあるdrupal.jsスクリプトを接続することをお勧めします。

このようにして、Drupalに適した形式で基本的なスクリプトを記述し、レイアウトを適用するときにそれらをコピーするだけです。

コーダーが知っておく必要があるのは、通常のドキュメントの代わりに行動主義者を書くことです。 また、セレクターを構築するときは、内部で常にコンテキストを使用します。

jQuery.once

新しいコンテンツにハンドラーを追加するために動作が必要な場合は、今度は反対の問題を検討します。 一部のハンドラーは同じ要素に2回割り当てることができますが、これは必ずしも必要ではありません。

最初の処理中にクラスを追加し、セレクタにこのクラスがないことの条件を含める最も簡単な方法。

 $('a.tooltip:not(.processed)', context).addClass('processed').someTooltipPlugin();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビヘイビアー内のこの設計により、コードが再度実行されたときに、ハンドラーが1回追加されます。

同じメカニズムがjQuery.onceプラグインに組み込まれています。これはD7コアに含まれており、どのページでもデフォルトで使用可能です。

プラグインを使用すると、上記の構成を次のように置き換えることができます。

 $(context).once('myIdentifier', function () { // Your code here. });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

myIdentifierは、その処理されたクラスとして使用される一意の値です。

より短いデザインに置き換えることができます：

 $(context).once(function () { // Your code here. });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、プラグイン自体が一意のクラスを形成します。

ベースURL

かなりよくある間違い-彼らはベースURLを考慮することを忘れます。 実績のあるモジュールで彼女に何度も会った。

簡単に認識できます-パスの先頭にスラッシュがあります：

var url = '/ ajax / my-module / some-action';

通常、それらは同じ環境で開発され、単にスラッシュをハードコーディングし、ベースURLが変更されると、スクリプトの一部が動作を停止します...ほとんどの場合、ajaxリクエストのパスを形成するとき、およびaおよびimgタグの属性のパスを設定するときにエラーが発生します。

カーネルによって宣言された特別な変数を使用するのが正しいでしょう：

 var url = Drupal.settings.basePath + 'ajax/my-module/some-action';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Ajaxリクエストパス

小さな推奨事項（当社では単なる標準です）。ajaxリクエストのパスを形成するとき、ajaxという単語で始めます。これにより、必要に応じて、すべてのAjaxリクエストを通常のリクエストから簡単に分離できます。 たとえば、それらを一度にキャッシュから除外したり、ログを調べたりします。 次に、ハイフンを介したモジュール名-この要求のプロセッサを探す場所をすぐに通知します。 URLを読みやすくするためにハイフンを配置しないでください。誰にも見えない場合でも、下線付きのノードのエイリアスを作成しないので、同じ形式に従うことをお勧めします

このロジックの「正しい」パスの例は、ajax / my-module / some-actionです。

ライン出力

JSでテキストを表示するときに使用する必要のある関数がいくつかあります。

深化することなく、主なものだけをリストします-それらはすべてPHPカーネル関数の類似物です。

 //   . Drupal.t('text'); //  ""  . Drupal.checkPlain(name); //   ,    /  . Drupal.formatPlural(count, singular, plural, args, options);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらはすべてdrupal.jsで発表されており、それなしでは機能しません。