このJavascript/HTML/jQueryコードをどのように減らすことができますか？

Question

私は数百、数千もの店舗用のチャートを持っています。唯一の違いは、店舗と商品の名前です。 HTMLコードは1日1回動的に生成されます。ミニチュア化さえ、それは永遠に負荷をかける（少なくとも永遠のように感じる）。 Firebugを使用すると、ファイルをロードするのに非常に長い時間がかかります。

店舗と商品は、毎朝生成されるテーブルから作成されます。各表にタイトル（「JohnsMarket」など）があるため、IDを数字（「store1」、「store2」など）に縮小することはできません。

反復コードへの他のすべてのSO解決策はすべて番号の付いたIDを使用します。

各店舗/製品について、次の3つのスニペットを繰り返す必要があります。

<div id="JohnsMarket_Soup" class="frmStep"> 
    <div id="JohnsMarket_soup_chart" ></div> 
    <div class="layout"> 
     <div class="layout_slider-settings"> 
      <div class="loading" id="JohnsMarket_soup_loading"></div> 
     </div> 
     <div class="layout_slider"><input id="JohnsMarket_soup_slider" name="area" value="1" ></div> 
     <div class="layout_slider-settings"> </div> 
    </div> 
</div> 

if (ui.panel.id==='JohnsMarket') 
{ 
    if(typeof JohnsMarket_soup_chart_data === 'undefined') 
    { 
     $('.loading_graph_msg').show(); 
     window.setTimeout(function() { JohnsMarket_soup_data=checkData(JohnsMarket_soup_data,'JohnsMarket'); 
     JohnsMarket_soup_chart_data = createChart(JohnsMarket_soup_data, 'JohnsMarket_soup_chart', 'JohnsMarket Soup', 50, 7, -1); },50); 
     $('.loading_graph_msg').hide('fast'); 
    } 
} 
}); 

jQuery('#JohnsMarket_soup_slider').slider({} 
    $('#JohnsMarket_soup_loading').show(); 
    var x = this.getValue(); 
    window.setTimeout(function() { 
     JohnsMarket_soup_chart_data.replot(); 
     JohnsMarket_soup_chart_data.destroy(); 
     JohnsMarket_soup_chart_data = createChart(JohnsMarket_soup_data, 'JohnsMarket_soup_chart_data', 'JohnsMarket Soup', 5, x*7, -1); 
    },20); 
    } 
}); 

Answer 1

このデータは、チャート名を含むハッシュキーに格納されている可能性があります。残りは単なる文字列連結です。しかし、私は同意します、私はチャートの作成に使用されたデータを取得するだけであっても、サーバー側にその一部を移動しようとします。

Answer 2

あなたの全体の問題のステートメントがどのようなものかを完全に理解しているとは言えませんが、すべてのコードを1つの関数に繰り返し圧縮して何度も繰り返し使用できます。これは、少なくとも、コードのサイズを縮小します。あなたはデータの1つの例しか示していないので、あるデータセットから次のデータセットに至るまでの正確な内容を確かめることはできませんが、どのように手続き化できるかを示すために仮定しました。他のすべての項目が異なるだけidStringなし追加のコードでcheckItem（）を呼び出すために、そして、

function checkItem(idStr) { 
    if (ui.panel.id == idStr) { 
     // generate derived names 
     var soupChartDataName = idStr + "_soup_chart_data"; 
     var soupDataName = idStr + "_soup_data"; 
     var soupChartData = idStr + "_soup_chart_data"; 
     var soupChart = idStr + "_soup_chart"; 
     var soup = idStr + " Soup"; 
     var soupSlider = idStr + "_soup_slider"; 
     var soupLoading = idStr + "_soup_loading"; 

     if (typeof window[soupChartDataName] === 'undefined') { 
      $('.loading_graph_msg').show(); 
      window.setTimeout(function() { 
       window[soupDataName] = checkData(window[soupDataName], idStr); 
       window[soupChartData] = createChart(window[soupChartData], soupChart, soup, 50, 7, -1); 
      }, 50); 
      $('.loading_graph_msg').hide('fast'); 
     } 

     $("#" + soupSlider).slider({}); 
     $("#" + soupLoading).show(); 
     var x = this.getValue(); 
     window.setTimeout(function() { 
      window[soupChartDataName].replot(); 
      window[soupChartDataName].destroy(); 
      window[soupChartDataName] = createChart(soupDataName, soupChartData, soup, 5, x*7, -1); 
     }, 20); 
    } 
} 

checkItem("JohnsMarket"); 

：あなたはこれにすべてのコードを折りたたむことができます。私がそれらの間の共通性を非常に正確に推測していないなら、1つまたは2つの共通の根から使用されているすべての名前をどのように生成できるかについての考えを得ることができます。たとえば、「スープ」が派生したすべての名前の間で共通でない場合は、その名前を別の名前に変更できるように、rootをcheckItemに追加する必要があります。これが私のコードだった場合は、あまりにも多くのグローバル変数を使用していないので、私はそれらをページのいくつかのオブジェクトにぶら下げてしまいますが、それはあなたの選択です。

注 - グローバル変数の場合は、windowオブジェクトからアクセスして、派生した変数名をインデックスとして使用できます。

そして、あなたはこのような文字列テンプレートからHTMLを作成することができます。

function createItem(idStr) { 
    var template = '<div id="xxxx_soup_chart" ></div><div class="layout"><div class="layout_slider-settings"><div class="loading" id="xxxx_soup_loading"></div></div><div class="layout_slider"><input id="xxxx_soup_slider" name="area" value="1" ></div><div class="layout_slider-settings"> </div></div>'; 

    var o = document.createElement("div"); 
    o.id = idStr + "_Soup"; 
    o.className = "frmStep"; 
    o.innerHTML = template.replace(/xxxx/g, idStr); 
    document.body.append(o); // change this to append the item wherever it's supposed to go 
} 

createItem("JohnsMarket");