В JavaScript шахматка


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

    function colours() 
    {
        var rows = document.querySelectorAll(".row");

        for (var i = 1; i <= 8; i++) 
         {

            var currRow = rows[i];
            var cells = currRow.querySelectorAll(".cell");


        if(i%2==0)
           { 
            for (var j = 1; j < cells.length; j++)

            {   var currCell = cells[j];

              if(j%2==0)
                currCell.classList.add("dark");

              else 
                currCell.classList.add("light");
            } 
           }
        else
            for (var j = 1; j < cells.length; j++)
            {
                var currCell = cells[j];

             if(j%2==0)
                currCell.classList.add("light");

             else 
                currCell.classList.add("dark");
            } 
        }

    }


277
-1
задан 22 марта 2018 в 07:03 Источник Поделиться
Комментарии
2 ответа

Нулевой индекс массива и чистый код.

В for петли немного странным, начиная с 1. Обычно индекс в массив от 0. Если у вас есть 8 элементов в массиве цикл будет for(i = 0; i < array.length; i ++){ но вы можете иметь дополнительные элементы в массиве. Без HTML-я могу только догадываться.

Для поиска шашка цвета можно добавить X и y (i + j) % 2 и тогда получите остаток 2 избавляя вас от второго контура.

Имена функций должны сказать вам, что они делают. У вас есть colours что может означать что угодно.

Все это может быть сделано следующим образом

 function createCheckerBoard() {
const rows = document.querySelectorAll(".row");
for (let i = 0; i < 8; i++) {
var cells = rows[i].querySelectorAll(".cell");
for (let j = 0; j < cells.length; j++) {
cells[j].classList.add((j + i) % 2 ? "light": "dark");
}
}
}

Используя const для переменных, которые не меняются и тернарный оператор для класса выбор.

Самая важная часть кода-это хороший и последовательный стиль. Имея грязный код делает это тяжелее, чтобы читать и иногда практически невозможно определить тонкие синтаксические ошибки. Многие IDE могут форматировать код для вас, научиться использовать их, они будут вам сэкономить много часов поиск ошибок, разочарования.

1
ответ дан 23 марта 2018 в 01:03 Источник Поделиться

Вы можете сократить комплекс, если заявление и дублируют путем проверки i+j четным или нечетным, чтобы цвет места. т. е.

function colours() {
var rows = document.querySelectorAll(".row");

for (var i = 1; i <= 8; i++) {
var currRow = rows[i];
var cells = currRow.querySelectorAll(".cell");

for (var j = 1; j <= 8; j++) {
var color = (i+j) % 2==0 ? "light" : "dark";
currCell.classList.add("dark");
var currCell = cells[j];
}
}

}

0
ответ дан 23 марта 2018 в 12:03 Источник Поделиться