Question

我有数百甚至数千张商店图表。唯一的区别是商店和产品的名称。 HTML代码每天一次动态生成。即使是缩小，也需要永远加载（至少感觉就像永恒）。如果我使用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

我不能说我完全理解你的整个问题陈述是什么样的，但是你可以将所有代码大量压缩成一个一遍又一遍使用的函数。这将至少减少代码的大小。由于您只展示了一个数据示例，我无法确定从一个数据集到下一个数据集的确切共同点，但我做了一个假设，以向您展示如何对它们进行程序化。您可以将所有代码折叠到此：

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

然后，对于所有其他项，只需使用不同的idString调用checkItem（），而不使用其他代码。如果我没有正确地猜测它们之间的共性，那么你应该能够了解如何从一个或两个共同的根生成所有使用的名称。例如，如果“汤”在所有派生名称中并不常见，那么您可能需要将该根目录传递给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");

Answer 2

任何这些数据似乎都可以存储在商店名称上的哈希值中，包括图表本身;其余的只是字符串连接。但我同意，我会尝试将其中的一部分移到服务器端，即使只是为了检索用于创建图表的数据。

如何减少这个Javascript / HTML / jQuery代码？

2 个答案: