我已经在 JavaScript 中编写了用于虚线分页的代码。 我希望这段代码得到优化和改进。 我怎样才能实现它？

Question

我想以某种方式将这段代码写在 20 行以下，而不是通过将它写在一行中，而是通过改进其中的一些逻辑，它包含多个我想要删除或减少它的 if 条件，或者我是否可以删除所有 if 条件并拥有在那个地方反应 function。 所以，如果有任何方法可以做到这一点，请帮助我。

在我优化它大约 5 天之前，这段代码大约有 150 行，现在我得到的代码少了很多，但我希望它更优化。 代码工作得很好，我只想优化它。

let start = 1,
    limit = 1,
    totalcount = 12 / limit,
    request = new XMLHttpRequest();

function loadDoc(start) {
    request.onload = function() {
        let dataArr = JSON.parse(this.response).data,
            table = "";
        for (let i in dataArr) {
            table += "<tbody><tr>";
            table += "<td>"+ dataArr[i].id +"</td>";
            table += "<td>"+ dataArr[i].first_name +"</td>";
            table += "<td>"+ dataArr[i].last_name +"</td>";
            table += "<td>"+ dataArr[i].email +"</td>";
            table += "<td><img alt='' " + "src=" + dataArr[i].avatar + "></td>";
            table += "</tr></tbody>";
        }
        document.getElementById("tbody").innerHTML = table;
    };
    request.open('GET', 'https://reqres.in/api/users?page=' + start + '&per_page=' + limit, true);
    request.send();

    function rebuildPagination(start, totalcount) {
        let HTML = "";
        HTML += addButton("1", start);
        if (start > 3) HTML += "<button disabled>...</button>";
        if (start === totalcount) HTML += addButton(start - 2, start);
        if (start > 2) HTML += addButton(start - 1, start);
        if (start !== 1 && start !== totalcount) HTML += addButton(start, start);
        if (start < totalcount - 1) HTML += addButton(start + 1, start);
        if (start === 1) HTML += addButton(start + 2, start);
        if (start < totalcount - 2) HTML += "<button disabled>...</button>";
        HTML += addButton(totalcount, start);
        document.getElementById("page").innerHTML = HTML;
    }
    rebuildPagination(start, totalcount);
}

function addButton(number) {
    return "<button onclick=loadDoc(" + number + ")>" + (number) + "</button>";
}

这段代码大约有 42 行正确编写我想以某种方式将这段代码写在 20 行以下，而不是通过将它写在一行中，而是通过改进其中的一些逻辑，它包含多个我想要删除或减少它的 if 条件。

Answer 1

我试图理解你的代码以及你想要做什么。 请注意，行数并不能说明代码的效率。 关于良好编码的最重要的一点是：

• 您的代码可读且格式正确
• 您应该更喜欢 object 表示而不是字符串（在您的情况下最好使用 DOM）
• 尝试考虑使用循环而不是重复的代码。

如果您想最小化代码以减少加载时间，请使用最小化程序。 我建议您使用 IDE 或允许语法突出显示和代码重新格式化的文本编辑器。 （最后一个对于自动缩进代码非常重要）如果可以，请使用jquery 。

如果您将来需要帮助，请告诉我们您的代码应该做什么。 没有它，很难从您的代码片段中获取它。

let start = 1, 
  limit = 1,
  totalcount = Math.ceil(12 / limit),
  request = new XMLHttpRequest();

function loadDoc(start) {
  request.onload = function () {
    let dataArr = JSON.parse(this.response).data;
    const table = document.createElement("table");
    const tbody = document.createElement("tbody");

    for (let i in dataArr) {
      const row = document.createElement("row");

      for (let attr in dataArr[i]) {
        if (dataArr[i].hasOwnProperty(attr) && attr !== "avatar") {
          const td = document.createElement("td");
          td.nodeValue = dataArr[i]["" + attr];
          row.appendChild(td);
        }
      }
      const avatarTD = document.createElement("td");

      if (dataArr[i].hasOwnProperty("avatar")) {
        const avatarImg = document.createElement("img");
        avatarImg.setAttribute("src", dataArr[i].avatar);
        row.appendChild(avatarImg);
      }
      tbody.appendChild(row);
    }
    table.appendChild(tbody);
    document.getElementById("table").replaceWith(table);
  }

  // request.open('GET', 'https://reqres.in/api/users?page=' + start + '&per_page=' + limit, true);
  // request.send();
};

function rebuildPagination(start, totalcount) {
  const page = document.getElementById("page");
  const paginationStart = (Math.max(1, start));
  const paginationEnd = Math.min(paginationStart + 4, totalcount);

  for (let i = paginationStart; i <= paginationEnd; i++) {
    if (
      (i === paginationStart && paginationStart > 1) ||
      (i === paginationEnd && paginationEnd < totalcount)
    ) {
      const button = document.createElement("button");
      button.setAttribute("disabled", "disabled");
      button.innerHTML = "...";
      page.appendChild(button);
    } else {
      addButton(page, i);
    }
  }
}

rebuildPagination(start, totalcount);

function addButton(parent, number) {
  const button = document.createElement("button");
  button.addEventListener("click", function () {
    alert("call loadDoc");
    loadDoc(number);
  });
  button.innerHTML = "(" + number + ")";

  parent.appendChild(button);
}