@danilsn9

Можете прокритиковать код?

Можете контруктивно прокритиковать код и сто надо выучить что бы это исправить?
Я понимаю что код ужасен, но что именно нет, помогите пожалуйста.
Это ajax вывод, сортировкаб пагинация.
Вот код -
// идентифицируем select
let select = document.querySelector(".select-css");
let vval = document.querySelector(".forfor");
let pagiArea = document.querySelector('.pagination');

function getSelectInfo(){
    let sql = '';
    if (select.value == "dateNew") {
        sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "date_time" DESC';
    } 

    if (select.value == "dateOld") {
        sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "date_time"';
    } 
    if (select.value == "size") {
        sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "modSize" DESC';
    }
    return sql;
}

function showPagination(pages, currentPage) {
    let pagi = '<a href="javascript://" onclick="duol(1)" class="firstPagiHref"><div id="pagiFirst">1</div></a><a class="firstPagiHref2"><div id="pagiTypical">..</div></a>';
    if (Number(currentPage) == 1) {
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(1)"><div id="pagiTypical" class="currentPagiPage">1</div></a>';
         if (pages >= Number(currentPage) + 1) {
            
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(2)"><div id="pagiTypical">2</div></a>';
         }
         if (pages >= Number(currentPage) + 2) {
            alert(pages);
            alert(Number(currentPage) + 2);
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(3)"><div id="pagiTypical">3</div></a>';
         }
         if (pages >= Number(currentPage) + 3) {
            pagi = pagi + '<a class="firstPagiHref" hhref="javascript://" onclick="duol(4)"><div id="pagiTypical">4</div></a>';
         }
         if (pages >= Number(currentPage) + 4) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(5)"><div id="pagiTypical">5</div></a>';
         }
         
    } else if (Number(currentPage) == 2) {
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) - 1)+')"><div id="pagiTypical">' + (Number(currentPage) - 1) + '</div></a>';
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+Number(currentPage)+')"><div id="pagiTypical" class="currentPagiPage">'+Number(currentPage)+'</div></a>';
         if (pages >= Number(currentPage) + 1) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 1)+')"><div id="pagiTypical">'+(Number(currentPage) + 1)+'</div></a>';
         }
         if (pages >= Number(currentPage) + 2) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 2)+')"><div id="pagiTypical">'+(Number(currentPage) + 2)+'</div></a>';
         }
         if (pages >= Number(currentPage) + 3) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 3)+')"><div id="pagiTypical">'+(Number(currentPage) + 3)+'</div></a>';
         }
    } else {
        if (pages >= Number(currentPage) -2) pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) - 2)+')"><div id="pagiTypical">'+(Number(currentPage) - 2)+'</div></a>';
         if (pages >= Number(currentPage) -1) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) - 1)+')"><div id="pagiTypical">'+(Number(currentPage) - 1)+'</div></a>';
         }
         
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+Number(currentPage)+')"><div id="pagiTypical" class="currentPagiPage">'+Number(currentPage)+'</div></a>';
         
         if (pages >= Number(currentPage) + 1) {
            pagi = pagi + '<a class="firstPagiHref"href="javascript://" onclick="duol('+(Number(currentPage) + 2)+')"><div id="pagiTypical" >'+(Number(currentPage) + 2)+'</div></a>';
         }
         if (pages >= Number(currentPage) + 2) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 3)+')"><div id="pagiTypical" >'+(Number(currentPage) + 3)+'</div></a>';
         }
    }

    pagi = pagi + '<a class="firstPagiHref2"><div id="pagiTypical">..</div></a>'+'<a href="javascript://" onclick="duol('+pages+')" class="firstPagiHref"><div id="pagiEnd">'+pages+'</div></a>';

    pagiArea.innerHTML = pagi;
    return (currentPage * 7) - 7;

    document.querySelector('#ya1').scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
}

function getPagiInfo() {
    return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();
    // Настройка запроса
    request.open('GET','/pagi/',true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      // если состояния запроса 4 и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
       let objects = request.responseText;
       objects = Math.ceil(objects);
       let currentPage = document.querySelector('.currentPagiPage').innerHTML;
       let result = showPagination(objects, currentPage);
       resolve(result);
      }
    }); 
    // Отправка запроса на сервер
    request.send();
});
 }   
function show(obj) {
    // расшифровываем json
    vval.innerHTML = "";
    let obj1 = JSON.parse(obj);
    
    for (let i=0; i<obj1.length; i++) {
        vval.innerHTML= vval.innerHTML + '<a href="#" class="hrefCar">'+'<div class="blockTypicalCar">'+'<div class="blockTitle">МОД '+obj1[i]['title']+' ДЛЯ BEAMNG.DRIVE</div>'+'<img src="/asset/other/images/beam.jpg" id="imageCarTipical">'+'<div class="otherContentCar">'+'<div class="someText">'+obj1[i]['textAbout']+'</div>'+'<hr>'+'<div class="infoIcons">'+'<div class="viewsCar"><img src="/asset/other/images/svg/preview.svg"> '+obj1[i]['watches']+'</div>'+'<div class="commentsCar"><img src="/asset/other/images/svg/comment.svg"> '+obj1[i]['comments']+'</div>'+'<div class="downloadsCar"><img src="/asset/other/images/svg/download.svg"> '+obj1[i]['downloads']+'</div>'+'</div>'+'<hr>'+'<a href="#" id="downloadHref" download><div class="donateHeaderButt secondButt"><button>Скачать</button></div></a>'+'</div>'+'</div>'+'</a>';
    }
}

function getObjects(query, limit, offset) {
    var request = new XMLHttpRequest();
    // Настройка запроса
    request.open('GET','/search/?query='+query+' LIMIT '+limit+' OFFSET '+offset,true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      // если состояния запроса 4 и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
       let objects = request.responseText;
       show(objects);
      }
    }); 
    // Отправка запроса на сервер
    request.send();
}

select.onchange = function () {  
    let sql = getSelectInfo();
    let a = getPagiInfo();
    let promiseResult = a.then(result => {b = result}).then(() => getObjects(sql, 7, b));   
}


window.onload = function () {
    // собираем sql
     var request = new XMLHttpRequest();
    // Настройка запроса
    request.open('GET','/pagi/',true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      // если состояния запроса 4 и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
       let objects = request.responseText;
       objects = Math.ceil(objects);
       showPagination(objects, 1);
      }
    }); 
    // Отправка запроса на сервер
    request.send();

    let sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "date_time" DESC';
    getObjects(sql, 7, 0);
    
}

function duol(aaa) {
    let sql = getSelectInfo();

    if (aaa != 1) {
        aaa = (aaa * 7) - 7; 
    } else {
        aaa = 0;
    }

    getObjects(sql, 7, aaa);

    if (aaa == 0) {
        aaa = 1;
    } else {
        aaa = (aaa / 7) + 1;
       
    }


    var request = new XMLHttpRequest();
    // Настройка запроса
    request.open('GET','/pagi/',true);
    //request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      // если состояния запроса 4 и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
       let objects = request.responseText;
       objects = Math.ceil(objects);
       showPagination(objects, aaa);
      }
    }); 

    request.send();
}
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
WblCHA
@WblCHA
Эх, жаль никто не ответил. Впрочем, я понимаю почему...
spoiler

let select = document.querySelector(".select-css");
let vval = document.querySelector(".forfor");
let pagiArea = document.querySelector('.pagination');

const?

function getSelectInfo(){
    let sql = '';
    if (select.value == "dateNew") {
        sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "date_time" DESC';
    } 

    if (select.value == "dateOld") {
        sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "date_time"';
    } 
    if (select.value == "size") {
        sql = 'SELECT * FROM "modScheme"."mod" ORDER BY "modSize" DESC';
    }
    return sql;
}

switch?
Зачем тут переменная?
Почему 3 ифа без элсов?

pagi = pagi + '<a class="firstPagiHref"...'

+=?

Код
function showPagination(pages, currentPage) {
    let pagi = '<a href="javascript://" onclick="duol(1)" class="firstPagiHref"><div id="pagiFirst">1</div></a><a class="firstPagiHref2"><div id="pagiTypical">..</div></a>';
    if (Number(currentPage) == 1) {
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(1)"><div id="pagiTypical" class="currentPagiPage">1</div></a>';
         if (pages >= Number(currentPage) + 1) {
            
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(2)"><div id="pagiTypical">2</div></a>';
         }
         if (pages >= Number(currentPage) + 2) {
            alert(pages);
            alert(Number(currentPage) + 2);
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(3)"><div id="pagiTypical">3</div></a>';
         }
         if (pages >= Number(currentPage) + 3) {
            pagi = pagi + '<a class="firstPagiHref" hhref="javascript://" onclick="duol(4)"><div id="pagiTypical">4</div></a>';
         }
         if (pages >= Number(currentPage) + 4) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol(5)"><div id="pagiTypical">5</div></a>';
         }
         
    } else if (Number(currentPage) == 2) {
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) - 1)+')"><div id="pagiTypical">' + (Number(currentPage) - 1) + '</div></a>';
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+Number(currentPage)+')"><div id="pagiTypical" class="currentPagiPage">'+Number(currentPage)+'</div></a>';
         if (pages >= Number(currentPage) + 1) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 1)+')"><div id="pagiTypical">'+(Number(currentPage) + 1)+'</div></a>';
         }
         if (pages >= Number(currentPage) + 2) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 2)+')"><div id="pagiTypical">'+(Number(currentPage) + 2)+'</div></a>';
         }
         if (pages >= Number(currentPage) + 3) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 3)+')"><div id="pagiTypical">'+(Number(currentPage) + 3)+'</div></a>';
         }
    } else {
        if (pages >= Number(currentPage) -2) pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) - 2)+')"><div id="pagiTypical">'+(Number(currentPage) - 2)+'</div></a>';
         if (pages >= Number(currentPage) -1) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) - 1)+')"><div id="pagiTypical">'+(Number(currentPage) - 1)+'</div></a>';
         }
         
         pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+Number(currentPage)+')"><div id="pagiTypical" class="currentPagiPage">'+Number(currentPage)+'</div></a>';
         
         if (pages >= Number(currentPage) + 1) {
            pagi = pagi + '<a class="firstPagiHref"href="javascript://" onclick="duol('+(Number(currentPage) + 2)+')"><div id="pagiTypical" >'+(Number(currentPage) + 2)+'</div></a>';
         }
         if (pages >= Number(currentPage) + 2) {
            pagi = pagi + '<a class="firstPagiHref" href="javascript://" onclick="duol('+(Number(currentPage) + 3)+')"><div id="pagiTypical" >'+(Number(currentPage) + 3)+'</div></a>';
         }
    }

    pagi = pagi + '<a class="firstPagiHref2"><div id="pagiTypical">..</div></a>'+'<a href="javascript://" onclick="duol('+pages+')" class="firstPagiHref"><div id="pagiEnd">'+pages+'</div></a>';

    pagiArea.innerHTML = pagi;
    return (currentPage * 7) - 7;

    document.querySelector('#ya1').scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
}

DRY?
switch?
Number(currentPage) всего-лишь 20 раз написал, вместо того, чтобы загнать в переменную. Да и почему не +currentPage?

function getPagiInfo() {
    return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();
    // Настройка запроса
    request.open('GET','/pagi/',true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      // если состояния запроса 4 и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
       let objects = request.responseText;
       objects = Math.ceil(objects);
       let currentPage = document.querySelector('.currentPagiPage').innerHTML;
       let result = showPagination(objects, currentPage);
       resolve(result);
      }
    }); 
    // Отправка запроса на сервер
    request.send();
});
 }

DRY? Этот код почти 1 в 1 ещё пару раз повторяется ниже.

function show(obj) {
    // расшифровываем json
    vval.innerHTML = "";
    let obj1 = JSON.parse(obj);
    
    for (let i=0; i<obj1.length; i++) {
        vval.innerHTML= vval.innerHTML + '<a href="#" class="hrefCar">'+'<div class="blockTypicalCar">'+'<div class="blockTitle">МОД '+obj1[i]['title']+' ДЛЯ BEAMNG.DRIVE</div>'+'<img src="/asset/other/images/beam.jpg" id="imageCarTipical">'+'<div class="otherContentCar">'+'<div class="someText">'+obj1[i]['textAbout']+'</div>'+'<hr>'+'<div class="infoIcons">'+'<div class="viewsCar"><img src="/asset/other/images/svg/preview.svg"> '+obj1[i]['watches']+'</div>'+'<div class="commentsCar"><img src="/asset/other/images/svg/comment.svg"> '+obj1[i]['comments']+'</div>'+'<div class="downloadsCar"><img src="/asset/other/images/svg/download.svg"> '+obj1[i]['downloads']+'</div>'+'</div>'+'<hr>'+'<a href="#" id="downloadHref" download><div class="donateHeaderButt secondButt"><button>Скачать</button></div></a>'+'</div>'+'</div>'+'</a>';
    }
}

forEach?
Почему у тебя массив называется объектом?
Что это за бесконечные конкатенации по всему коду разбросаны? Хотя бы темплейт строки для приличия использовал бы. И удобства.

select.onchange = function () {  
    let sql = getSelectInfo();
    let a = getPagiInfo();
    let promiseResult = a.then(result => {b = result}).then(() => getObjects(sql, 7, b));   
}

У тебя что, лимит на более-менее адекватные названия для переменных закончился? Что за а? Что за б?

function duol(aaa) {
    let sql = getSelectInfo();

    if (aaa != 1) {
        aaa = (aaa * 7) - 7; 
    } else {
        aaa = 0;
    }

    getObjects(sql, 7, aaa);

    if (aaa == 0) {
        aaa = 1;
    } else {
        aaa = (aaa / 7) + 1;
       
    }

А это что за ааа? Даже не смешно.
И что это за кривая имплементация остатка от деления? aaa = (aaa + 1) % 7;


Прошёлся чисто по верхушкам, мне не хватило сил углубиться в это.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы