我已經在 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);
}