어떻게이 Javascript/HTML/jQuery 코드를 줄일 수 있습니까?

Question

나는 수백 점이나 수천 점의 점포 차트를 가지고 있습니다. 유일한 차이점은 상점 및 제품의 이름입니다. HTML 코드는 하루에 한 번 동적으로 생성됩니다. 심지어 분화 되어도 영원히 짐을 짊어집니다 (적어도 그것은 영원과 같다고 느낍니다). Firebug를 사용하면 파일을로드하는 데로드가 매우 오래 걸릴 수 있습니다.

상점과 제품은 매일 아침 생성되는 테이블에서 생성됩니다. 각 표에는 제목 (예 : "JohnsMarket")이 있으므로 숫자를 숫자로 줄일 수 없습니다 (예 : '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

전체 문제점 문이 어떻게 보이는지 완전히 이해할 수는 없지만 모든 코드를 반복적으로 사용되는 하나의 기능으로 압축 할 수 있습니다. 적어도 코드 크기를 줄입니다. 데이터의 한 가지 예를 보여 주었기 때문에 한 데이터 세트에서 다음 데이터 세트까지 정확히 공통점이 무엇인지 확신 할 수 없지만 모든 데이터를 절차화할 수있는 방법을 보여주기 위해 가정했습니다. 이 모든 코드를 축소 할 수 :

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