如何減少這個Javascript/HTML/jQuery代碼？

Question

我有數百個，也許有數千個商店的圖表。唯一的區別是商店和產品的名稱。 HTML代碼每天動態生成一次。即使縮小，也需要永久加載（至少感覺像永恆）。如果我使用Firebug，那麼加載文件需要非常很長的時間才能加載。

商店和產品是從每天早上產生的表格創建的。由於每個表具有標題（例如，「JohnsMarket」），所以ID不能被縮減爲數字（例如，'store1'，'store2'）。

重複性代碼的所有其他SO解決方案使用編號ids。

對於每個商店/產品，我必須重複以下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

我不能說我完全理解你的整個問題陳述是什麼樣子，但是你可以將你所有的代碼徹底地壓縮到一個反覆使用的函數中。這將至少縮減代碼的大小。既然你只展示了一個數據的例子，我不能確定從一個數據集到另一個數據集究竟是什麼共同點，但我做了一個假設，以告訴你它是如何被全部程序化的。你可以摺疊所有的代碼如下：

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"); 

然後，對於所有其他項目只需要調用checkItem（）具有不同的idString並沒有額外的代碼。如果我沒有正確猜測它們之間的共同性，那麼你應該能夠了解如何從一個或兩個普通根生成所有使用的名稱。例如，如果「湯」在所有派生名稱中不常見，那麼也許您需要將該根簽入到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");