Я написал код на JavaScript для разбивки на страницы. Я хочу, чтобы этот код был оптимизирован и улучшен. Как мне этого добиться?

Question

Я хочу, чтобы этот код содержал не более 20 строк, не написав его одной строкой, а улучшив в нем некоторую логику, и он содержит несколько условий if, которые я хочу удалить, или сделать его меньше, или если я могу удалить все ifусловия и имеют рекурсивную функцию в этом месте. Итак, если есть какой-то способ сделать это, то, пожалуйста, помогите мне.

Этот код содержит около 150 строк, прежде чем я оптимизирую его в течение 5 дней, и теперь я получил его гораздо меньше, но я хочуэто более оптимизировано. Код работает отлично, я просто хочу, чтобы он был оптимизирован.

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

Я пытался понять твой код и то, что ты пытаешься сделать. Обратите внимание, что количество строк ничего не говорит об эффективности кода. Наиболее важные моменты о хорошем кодировании:

• Ваш код читабелен и хорошо отформатирован
• Вы должны предпочесть представления объектов над строками (в вашем случае лучше использовать DOM)
• Попробуйте подумать об использовании циклов вместо дублирующегося кода.

Если вы хотите свести к минимуму код для сокращения времени загрузки, используйте minimizer . Я рекомендовал вам использовать IDE или текстовый редактор, который позволяет подсветку синтаксиса и переформатирование кода. (последний очень важен для автоматического отступа кода) Если вы можете, используйте jquery .

Если вам понадобится помощь в будущем, пожалуйста, сообщите нам, что должен делать ваш код. Без этого очень трудно получить его из своего фрагмента кода.

    let limit = 10,
        paginationStart = 1,
        paginationEnd = 1,
        numberOfPages = 15,
        request = new XMLHttpRequest(),
        actualPage = 1;

    const dummyData = [{
        avatar: "https://miro.medium.com/max/1080/1*HvFeV6SKhiW2YFEWAvQVEQ.jpeg",
        id: 1,
        first_name: "John",
        last_name: "Doe",
        email: "johndoe@example.com"
    },
        {
            avatar: "https://i.kym-cdn.com/photos/images/newsfeed/000/173/576/Wat8.jpg?1315930535",
            id: 2,
            first_name: "Tina",
            last_name: "Doe",
            email: "tinadoe@example.com"
        },
        {
            avatar: "https://i.kym-cdn.com/photos/images/newsfeed/000/173/576/Wat8.jpg?1315930535",
            id: 3,
            first_name: "Tina",
            last_name: "Doe",
            email: "tinadoe@example.com"
        },
        {
            avatar: "https://i.kym-cdn.com/photos/images/newsfeed/000/173/576/Wat8.jpg?1315930535",
            id: 4,
            first_name: "Tina",
            last_name: "Doe",
            email: "tinadoe@example.com"
        }];

    function loadDoc() {
        document.getElementById("pageNumber").innerText = actualPage;
        rebuildPagination();
        /* request.onload = function () {
          let dataArr = JSON.parse(this.response).data;
        }
        */

        processData(dummyData);

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

    function rebuildPagination() {
        document.getElementById("pageNumber").innerText = actualPage;
        const oldPage = document.getElementById("page");
        const page = document.createElement("div");
        page.setAttribute("id", "page");
        oldPage.replaceWith(page);

        let middle = (actualPage > 1) ? actualPage : actualPage + 1;
        let leftSibling = Math.max(1, middle - 1);
        let rightSibling = Math.min(numberOfPages, middle + 1);

        if (leftSibling > 1) {
            addButton(page, 1);
            if (leftSibling > 2) {
                addButton(page, "...");
            }
        }

        if (rightSibling === middle) {
            addButton(page, leftSibling - 1);
        }

        addButton(page, leftSibling);
        addButton(page, middle);

        if (rightSibling !== middle) {
            addButton(page, rightSibling);
        }

        if (numberOfPages - rightSibling > 1) {
            addButton(page, "...");
            addButton(page, 15);
        } else if (numberOfPages - rightSibling === 1) {
            addButton(page, 15);
        }
    }

    rebuildPagination();

    function addButton(parent, number, direction) {
        const button = document.createElement("button");
        if (number === "...") {
            button.setAttribute("disabled", "disabled");
        }
        button.addEventListener("click", function () {
            actualPage = number;
            loadDoc();
        });
        button.innerHTML = number;

        parent.appendChild(button);
    }

    loadDoc(1);

    function processData(dataArr) {
        const table = document.createElement("table");
        table.setAttribute("id", "table");
        const tbody = document.createElement("tbody");

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

            for (let attr in dataArr[i]) {
                if (dataArr[i].hasOwnProperty(attr) && attr !== "avatar") {
                    const td = document.createElement("td");
                    td.innerHTML = 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);
                avatarImg.style.maxWidth = "200px";
                avatarTD.appendChild(avatarImg);
            }
            row.appendChild(avatarTD);
            tbody.appendChild(row);
        }
        table.appendChild(tbody);
        document.getElementById("table").replaceWith(table);
    }

table {
    border-collapse: collapse;
  }

  tbody tr td {
    border: 1px solid lightgray;
    padding: 10px;
  }

<div id="page">
</div>
<h1>
  Page <span id="pageNumber"></span>
</h1>
<table id="table">
</table>