如何将矩形面积与周长计算逻辑从JS代码中拆分为独立函数

修改后的JS代码 #

// 矩形面积计算独立函数
function calcRectangleArea(length, width) {
  return Number(length) * Number(width);
}

// 矩形周长计算独立函数
function calcRectanglePerimeter(length, width) {
  return 2 * Number(length) + 2 * Number(width);
}

function controller() {
  var type = document.getElementById("apBox").value;
  var length = document.getElementById("lengthBox").value;
  var width = document.getElementById("widthBox").value;
  var mainSolution = document.getElementById("message");
  var answer;
  var label;

  if (type == "a" || type == "A") {
    answer = calcRectangleArea(length, width);
    label = 'Area';
  } else if (type == "p" || type == "P") {
    answer = calcRectanglePerimeter(length, width);
    label = 'Perimeter';
  } else {
    mainSolution.innerText = "Invalid. Must Enter 'A' or 'P'";
    return;
  }

  if (length.length > 0 && width.length > 0) {
    if (!isNaN(answer)) {
      mainSolution.innerHTML = `${label} =&nbsp ${answer}`;
    }
  } else {
    mainSolution.innerHTML = "";
  }
}

function clearText() {
  document.getElementById("message").innerHTML = ("<br>");
  document.getElementById("apBox").value = "";
  document.getElementById("lengthBox").value = "";
  document.getElementById("widthBox").value = "";
}

改动说明 #

• 两个计算函数完全独立，仅接收长度、宽度参数完成对应计算逻辑，和DOM交互逻辑完全解耦，后续可直接复用这两个函数实现其他关联需求
• 显式将输入的字符串格式的长宽转换为数值类型，避免隐式转换带来的潜在运算异常
• 修正了原代码中Perimiter的拼写错误为标准拼写Perimeter

内容的提问来源于stack exchange，提问作者Spraggins Designs