I'；我正在构建一个简单的锻炼程序应用程序，但我想简化Javascript/jQuery代码

这是我的密码

 $('#addmaxes').on('click',function(){
dlMax = $('#dlcurrentmax-input').val().trim();
ftsqMax = $('#ftsqcurrentmax-input').val().trim();
per = 95;
dlTrainingMax = (dlMax * per) / 100;
frsqTrainingMax = (ftsqMax * per) / 100;
per= 75;
var weekDl = (dlTrainingMax * per) / 100;
var rnWeekDl = Math.floor(weekDl);
per2= 60;
var weekDef = (dlTrainingMax * per2) / 100;
var rnDefWeek = Math.floor(weekDef);
var weekSq = (frsqTrainingMax * per2) / 100;
var rnWeekSq = Math.floor(weekSq);
var newDivOne = $('<div>');
var newDivTwo = $('<div>');
newDivOne.addClass('trainingProgram');
newDivTwo.addClass('trainingProgram');
newDivOne.html('<h3>Week 1');
newDivTwo.html('Deadlift (75%): 3x5 at ' + rnWeekDl + '<br/>Deficit Deadlift (60%): 8x3(90sec rest between sets) at ' + rnDefWeek + '<br/>Front Squat (60%): 3x8 at ' + rnWeekSq + '<br/>Stiff-leg deadlift: 3x8 ' + '<br/>Bent over rows: 3x8' + '<br/>Lat pulldowns:  3x12');

$('#program').append(newDivOne);
$('#program').append(newDivTwo);
}); 

然后在我的函数中添加一个for循环，如下所示：

const PERCENT_FOR_MAX = 95;
var percentagesPerWeek = [
{
deadlift: 75,
frontSquat: 50,
},
{
deadlift: 80,
frontSquat: 65,
},
/// etc
];

$('#addmaxes').on('click',function(){
for(var i = 0; i < percentagesPerWeek.length; i++) {
dlMax = $('#dlcurrentmax-input').val().trim();
ftsqMax = $('#ftsqcurrentmax-input').val().trim();
dlTrainingMax = (dlMax * PERCENT_FOR_MAX) / 100;
frsqTrainingMax = (ftsqMax * PERCENT_FOR_MAX) / 100;
var deadliftPercent = percentagesPerWeek[i].deadlift;
var weekDl = (dlTrainingMax * deadliftPercent) / 100;
var rnWeekDl = Math.floor(weekDl);
var frontSquatPercent = percentagesPerWeek[i].frontSquat;
var weekDef = (dlTrainingMax * frontSquatPercent) / 100;
var rnDefWeek = Math.floor(weekDef);
var weekSq = (frsqTrainingMax * frontSquatPercent) / 100;
var rnWeekSq = Math.floor(weekSq);
var newDivOne = $('<div>');
var newDivTwo = $('<div>');
newDivOne.addClass('trainingProgram');
newDivTwo.addClass('trainingProgram');
newDivOne.html('<h3>Week 2</h3>');
newDivTwo.html('Deadlift ('+deadliftPercent+'%): 3x5 at ' + rnWeekDl +
  '<br/>Deficit Deadlift (65%): 8x3(90sec rest between sets) at ' + rnDefWeek +
  '<br/>Front Squat ('+frontSquatPercent+'%): 3x8 at ' + rnWeekSq +
  '<br/>Stiff-leg deadlift: 3x8 ' +
  '<br/>Bent over rows: 3x8' +
  '<br/>Lat pulldowns:  3x12'
);
$('#program').append(newDivOne);
$('#program').append(newDivTwo);
}});

$（'addmaxes'）。在（'click'，function（）上{
对于（变量i=0；i不足死区提升（65%）：每周“+RNDEF”时8x3（两组之间休息90秒）+
“
前蹲（“+FrontShuckPercent+”）：在“+rnWeekSq”时3x8+
“
硬腿无侧举：3x8”+
“
弯曲成排：3x8”+
“
横向下拉：3x12”
);
$（“#程序”）.append（newDivOne）；
$（'#program'）.append（newDivTwo）；
}});

---

但我遇到的问题是，每个函数中的html每周都是相同的，我需要每周对其进行自定义，因为训练会发生变化。我怎样才能做到这一点。我是网络开发新手，做这项工作才一个月。所以我很抱歉，如果我的背景是没有意义的，这也是我第一次张贴到这个论坛。提前感谢。：）

如果您刚刚开始学习JavaScript，请尽量避免使用jQuery——在现代web浏览器上开发web并不需要jQuery。此外，本机浏览器API的性能更高

事件侦听器中不必显式包含click处理程序函数。关注点分离（SoC）原则指出，应避免在设计/代码中共同定位不同的关注点。这意味着您应该将处理事件的函数与触发处理程序的事件侦听器分开

您应该将处理程序设置为传入的命名函数，如下所示

var addMaxesHandler = function(event) {
  // handle the '#addmaxes' click event here

  // assuming you need integer values
  var dlMax = Math.parseInt(document.getElementById('dlcurrentmax-input').value, 10);
  var ftsqMax = Math.parseInt(document.getElementById('ftsqcurrentmax-input').value, 10);
  var presentationData = doTheCalculations(percentagesPerWeek, dlMax, ftsqMax);

  presentTheResults(presentationData);
};

// attach the listener to the HTML element
var el = document.getElementById('addmaxes');
el.addEventListener('click', addMaxesHandler);

这还意味着您可以在以后使用

removeEventListener（）

删除它。您不能使用匿名函数执行此操作

还记得单一责任原则（SRP）吗？在您的情况下，您应该让您的功能执行一项任务，并且只执行一项任务-不要将计算与演示混为一谈。不断地将问题分解成更小的部分，并将结果组合在一起

function doTheCalculations(dataArr, dl, ftsq) {

  // need a container for holding the results of calculations
  var calculationResults = [];

  // iterate through the 'percentagesPerWeek' array
  dataArr.forEach(function(values, index){
    // values is the array element e.g. { deadlift: 75, frontSquat: 50 }
    // index is the array index e.g. 0 for the first element of the array
    calculationResults.push(doTheMathsFunc(values, dl, ftsq));
  });

  return calculationResults;
}

我还没有实现它，但是

doTheMathsFunc（）

应该执行计算并返回一个包含要在演示中使用的值的对象或数组。此时，您返回了另一个对象数组，可用于创建HTML

function presentTheResults(resultsArr) {
  // this function will iterate through the array and build the HTML

  // use DocumentFragment object for efficiency
  var fragment = document.createDocumentFragment();

  // get some HTML content
  resultsArr.forEach(function(result, index){
    var weekFragment = getWeekHtmlBlock(result, (index + 1));
    fragment.appendChild(weekFragment);
  });

  // get a handle on the DOM container element
  var container = document.getElementById('program');

  // add the DocumentFragment to the DOM
  container.appendChild(fragment);
}

该函数只是将HTML片段缝合在一起，并将结果附加到DOM。HTML片段是由另一个函数创建的

getWeekHtmlBlock（）

希望到现在为止你已经有了这个想法——继续用函数解决问题的小部分

如果需要更改每周显示的说明，那么最好创建一个包含每个说明的对象数组。数组的第一个元素将包含第一周的指令，依此类推

是ES2015的一项功能，因此您现在应该能够利用它们。 也是ES2015中添加的JavaScript功能

// example array of instructions
var weeklyInstructionsArray = [
  [`Deadlift (${deadliftPercent}%): 3x5 at ${rnWeekDl}`,
  `Deficit Deadlift (65%): 8x3 (90sec rest between sets) at ${rnDefWeek}`,
  `Front Squat (${frontSquatPercent}%): 3x8 at ${rnWeekSq}`,
  `Stiff-leg deadlift: 3x8`,
  `Bent over rows: 3x8`,
  `Lat pulldowns: 3x12`]
];

function getInstructionsHtml(data, weekNum) {

  var instructions = weeklyInstructionsArray[weekNum-1];

  // Using deconstructing assignment
  // NOTE: The variable names must match those in the template literals above
  var {deadliftPercent, rnWeekDl, rnDefWeek, frontSquatPercent, rnWeekSq} = data;

  // stitch the array of template literals together in a single text node
  var htmlContent = document.createTextNode( instructions.join('<br/>') );

  return htmlContent;

}

//指令数组示例
var weeklyInstructionsArray=[
[`Deadlift（${deadliftPercent}%）：3x5在${rnWeekDl}`，
`亏损空提（65%）：在${rnDefWeek}时8x3（两组之间休息90秒），
`前蹲（${FrontShuckPercent}%）：在${rnWeekSq}处3x8，
`硬腿提升：3x8`，
`弯曲成排：3x8`，
`横向下拉：3x12`]
];
函数getInstructionsHtml（数据，周数）{
var指令=每周指令数组[weekNum-1]；
//使用解构赋值
//注意：变量名必须与上述模板文本中的变量名匹配
var{deadliftPercent，rnWeekDl，rnDefWeek，FrontShuckPercent，rnWeekSq}=数据；
//在单个文本节点中将模板文本数组缝合在一起
var htmlContent=document.createTextNode（instructions.join（'
'）；
返回htmlContent；
}

希望这个答案足够详细，可以告诉你如何着手解决这个问题

// example array of instructions
var weeklyInstructionsArray = [
  [`Deadlift (${deadliftPercent}%): 3x5 at ${rnWeekDl}`,
  `Deficit Deadlift (65%): 8x3 (90sec rest between sets) at ${rnDefWeek}`,
  `Front Squat (${frontSquatPercent}%): 3x8 at ${rnWeekSq}`,
  `Stiff-leg deadlift: 3x8`,
  `Bent over rows: 3x8`,
  `Lat pulldowns: 3x12`]
];

function getInstructionsHtml(data, weekNum) {

  var instructions = weeklyInstructionsArray[weekNum-1];

  // Using deconstructing assignment
  // NOTE: The variable names must match those in the template literals above
  var {deadliftPercent, rnWeekDl, rnDefWeek, frontSquatPercent, rnWeekSq} = data;

  // stitch the array of template literals together in a single text node
  var htmlContent = document.createTextNode( instructions.join('<br/>') );

  return htmlContent;

}