コンポーネント化されたモジュールを使用してページの最下部にJSを保持するためのベストプラクティス

Question

JavaScriptを外部JSファイル/ページの下部に保持するためのベストプラクティス/デザインパターンを探しています。私はページがいくつかのコンポーネントから構築され、各コンポーネントが渡されたいくつかのパラメータを必要とするjqueryコンポーネントに応答するという問題に遭遇しています。

JSP

で例えばので

<div class="component-a"> 
    <div id="js-slideshow-<%= slide-id %>" class="js-slideshow"></div> 
</div> 
<script>$('#js-slideshow-<%= slide-id %>').initslideshow({'path':<%= path %>});</script> 

問題は、私は今、私のマークアップをpepperingタグを持っており、リピートコードの多くがあります。理想的には、これらのJSコールをすべてページの下部にあるJSファイルに分解します。

私の最初の考えは、jqueryプラグインに必要なすべてのパラメータをdata- *属性としてロードすることです。呼び出しは、データ/コンテキストを必要とする場合でも、

JSP

<div class="component-a"> 
    <div data-path="<%= path %>" class="js-slideshow"></div> 
</div> 

JSファイル

<script> 
$(".js-slideshow").each(function() { 
    $(this).initslideshow('path': $(this).attr('data-path')); 
}); 
</script> 

のようなものにはJavaScriptを維持するための任意の他の良いパターンがあるがJSファイルに分離しましたサーバーは提供する必要があり、コンポーネントのコンテキストからのみ使用可能な場合があります。

---

明確化：

これは、単純に別々のファイルに共通のプレゼンテーション要素を壊すの実践です。 Ruby on Railsの部分的な部分はこれの一例です。 1つのコンポーネントは「スライドショー」でも構いませんが、表示するイメージのセット、サイズの異なるイメージ、別のタイトルなど、異なる値を使用して動作を調整したい場合があります。パラメタをサーバ側のデータストアから取得してJS呼び出しに書き込むためには、コンテキストを理解することはサーバに任されます。生成されたHTML の 1.減少ページの重量 2.増加の可読性：

理想的には私は同じ「塩基」JSが書き出される回数を最小限にし、次のような理由で一度下でそれを実行したいと思います3. HTMLファイルからJSファイルへのjavacriptコードの移動（たとえ呼び出しであっても） - コードとデータの明確な分離 4.より多くのデータをキャッシュすることができます（JSファイルは 5.複数のイベントが同じ要素にバインドされている、より複雑なコンポーネントのシナリオは避けてください。

$(".slideshow").init('<%= param %>').slideshow要素にバインドイベントを追加します。$(".slideshow").init('<%= param %>')を複数回呼び出すと、複数のイベントがそのDOM要素にバインドされます。 （私はバインドがそのように働いていると思う、生きていないか委任していないと思う）。 私は一意の名前の要素にinitを呼び出すことで回避することができますが、これは各スライドショーDOM要素に一意のIDを追加する必要があります。

開発の観点からは、各コンポーネントごとに別々のJSファイルが用意されていますが、ビルドプロセス中に1つのファイルにパッケージ化されます。

Answer 1

あなたのサイトの部分は、独自のHTMLとJSを持つ「モジュール」になっていて、それをすべて集計するとちょうど中間にあります。

スクリプトパスを変数として指定するか、またはdata-*をロードし、下部にローダーがある場合は、遅延ロードを後で実行することをお勧めします。言うような

：その後、

<div class="component" data-source="path_to_script"> 
    your module HTML 

あなたのページの下部に、あなたの `、あなたはありませんいくつかのスクリプトを持って前に：最後に

<script> 
    $(function(){ 

     //loader script 
     (function loader(){ 

      //loop through all components 
      $('.component').each(function(){ 

       //get the path and load script 
       var scriptUrl = $(this).data('source'); 
       $.getScript(scriptUrl); 

       //or if params 
       var params = $(this).data('params'); //may be in JSON string perhaps? 
       //parse JSON here 
       $(this).initSlideshow(params);      

      }); 
     }()); 
    }); 
</script> 

を、あなたはクリーンなページがあります。少なくとも、jQueryと上記のコードがページに必要です。残りのスクリプトは動的に最下部に読み込まれます。