Случайным образом генерировать шестнадцатеричный код цвета и контрастные цвета с помощью JavaScript


Я пытаюсь создать новый цвет и его контрастные цвета с помощью этого JavaScript-код.

Я делаю веб-приложение, которое меняется каждый раз при ее загрузке (т. е. фон и цвет текста)

Я бы с удовольствием некоторые критики на качество и эффективность моего кода.

Как это можно сделать лучше?

Вот мой код:

function startcolour() {
 var values = Array('1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
 var color = "#";
 var item;

 for (i = 0; i < 6; i++) {
   item = values[Math.floor(Math.random()*values.length)];
   color = color + item;
 }

 return color;
}

function contrastcolour(colour) {
 var r;
 var g;
 var b;
 var comp = [];
 var contrast = '#';
 var arrayLength;

 if (colour.charAt(0) == '#') {
  colour = colour.slice(1);
 }

 r = (255 - parseInt(colour.substring(0,2), 16)).toString(16);
 g = (255 - parseInt(colour.substring(2,4), 16)).toString(16);
 b = (255 - parseInt(colour.substring(4,6), 16)).toString(16);

 contrast = contrast + padZero(r) + padZero(g) + padZero(b);
 return contrast
}

function padZero(str) {
  if (str.length < 2) {
    return '0' + str;
  }
  else {
    return str;
  }
}

function colourRun() {
  var colours = [];
  var base = startcolour();

  colours.push(base);
  var contrast = contrastcolour(base);
  colours.push(contrast);
  return colours;
}

Пример вывода (цвета ака):

['#123abc','#edc543']

Затем я выполните следующие действия с помощью jQuery, чтобы установить свойства CSS из компонентов HTML:

  $(document).ready(function() {
    var colours = colourRun();
    $("body").css({"background-color": colours[0], "color": colours[1]});
    $("nav").css({"background-color": colours[1], "color": colours[0]});
  });

Все конструктивная критика приветствуется.



237
3
задан 29 марта 2018 в 11:03 Источник Поделиться
Комментарии
1 ответ

Есть похожий вопрос, который вы, возможно, захотите взглянуть на некоторые дополнительные проницательности, даже думал, что это не имеет контрастного цвета характеристика:

Генератор Кода JavaScript Случайный Цвет

Теперь давайте перейдем к обзору.

Именования


  • Общие названия конвекции в JS для методов верблюжьего, которые вы не следовать вообще.

  • Большинство имен переменных и функций не ясны или описывать то, что они делают/удержания. Это гораздо важнее, чем может показаться на первый взгляд, и не назвав правильно делает ваш код трудно читать и понимать.

    Как Примечание стороны дяди Боба есть целая глава на эту тему на своей чистой Кодовой книги.


  • Будьте последовательны в названиях. Если вы посмотрите внимательно вы увидите, что в некоторых местах вы использовали color:

    var color = "#";

    В то время как в других colour:

    function contrastcolour(colour) {

    Это в лучшем случае заблуждение, если бы не таинственный. Оставляет один интересно, если это разные вещи, или если он имеет другое значение.

    Для этого обзора я пошел с colour который был тот, который вы использовали чаще.


Функции

Теперь общий обзор функции, которые вы представили:


  • startcolour

    Лучше, чем при использовании массива элементов используется string со всеми возможными персонажами:

    var values = '123456789ABCDEF';

    Вы все еще можете использовать оператор индекса для извлечения символа, как вы делаете в обычном массиве.

    Нет необходимости отделять '#' в одну переменную, а затем добавить только
    цвет, часть в другой, и += оператор также более идиоматические
    и все-таки легко читать.

    Не использовать переменные без их объявления, как у вас в for:

    for (i = 0; i < 6; i++) {
    //---^

    i не объявлен, что делает его глобальным, и может быть источником некоторых трудно найти ошибки.

    Принимая все это во внимание функцию можно переписать:

    function randomColour(){
    const chars = '123456789ABCDEF';
    let colour = '#';

    for (let i = 0; i < 6; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    colour += chars[randomIndex];
    }
    return colour;
    }

    Или вы можете принять совершенно иной подход, упомянутая в связи с этим вопрос:

    function randomColour(){
    const randNum = Math.floor(Math.random() * 16777216); //from 0 to ffffff
    return '#' + randNum.toString(16).padStart(6,"0");
    }

    Это порождает ряд между 0 и 16777215или ffffff в гекса, и выводит его в шестнадцатеричном форматирования, вызвав toString(16). Затем он дополняется нулями до длины 6.


  • padZero

    Нет необходимости создавать функции отступ, потому что есть уже один, под названием padStart или padEnd. Он даже имеет полифилл, если вам нужно поддерживать старые браузеры.

    Используя это в коде будет выглядеть так:

    r.toString().padStart(2,"0")

    Обратите внимание, что это метод string поэтому если у меня есть номер я должен сначала преобразовать его в string.


  • colourRun

    Имя тоже не очень очевидно, что он делает. Если функция возвращает случайный цвет и контраст лучше имя будет baseContrastColours.

    Важно упомянуть, что пуш поддерживает любое количество элементов, поэтому нет необходимости, чтобы сделать два отдельных толчков. Также в данном конкретном случае проще просто вернуть литерала массива с соответствующими элементами вместо создания массива, толкая элементы и возвращение в конце.

    Как это:

    function baseContrastColours() {
    const base = randomColour();
    const contrast = contrastColour(base);
    return [base, contrast];
    }

    Хотя он имеет ту же функциональность, его проще и легче читать.


  • contrastcolour

    Все r, g, b переменные создаются сверху и только ниже:

    function contrastcolour(colour) {
    var r;
    var g;
    var b;
    ...

    r = (255 - parseInt(colour.substring(0,2), 16)).toString(16);
    g = (255 - parseInt(colour.substring(2,4), 16)).toString(16);
    b = (255 - parseInt(colour.substring(4,6), 16)).toString(16);
    ...
    }

    Вы хотите создать переменные и задать значения напрямую, если нет ничего иного, чтобы сделать в между оба действия:

    var r = (255 - parseInt(colour.substring(0,2), 16)).toString(16);

    Рассматривая переменные были объявлены var они даже подсадили. И вообще вы хотите объявлять переменные как можно ближе, чтобы Вы были их использовать.

    В arrayLength и comp переменные не используются. Всегда удалить неиспользуемые переменные, чтобы сохранить как можно более чистый код.

    Также важно то, что вы повторяете обратная логика 3 раза, по одному на каждый цветовой канал. Так как вы можете хотеть рассматривать реферирование эту логику в отдельную функцию.

    Так что эта функция может быть переписана следующим образом:

    function inverseChannelColour(channelColour){
    return (255 - parseInt(channelColour, 16)).toString(16);
    }

    function contrastColour(colour) {
    if (colour.charAt(0) == '#') {
    colour = colour.slice(1);
    }

    const r = inverseChannelColour(colour.substring(0,2));
    const g = inverseChannelColour(colour.substring(2,4));
    const b = inverseChannelColour(colour.substring(4,6));
    const contrast = '#' + r.toString().padStart(2,"0")
    + g.toString().padStart(2,"0")
    + b.toString().padStart(2,"0");
    return contrast;
    }


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

Вы можете попробовать, чтобы избежать этого путем проверки вручную, разница все каналы, чтобы их перевернутые версии, и если все они ниже определенного порога генерации разного цвета. Простой подход к этому будет генерировать черным, если все каналы ближе к белому, а белый иначе.

Есть также некоторые библиотеки/микро-библиотек, создания цветов и их функциональные версии с другими подходами, такими как использование ВСЛ. Это может быть интересным для вас, чтобы взглянуть.

Вот некоторые из них для справки:

6
ответ дан 29 марта 2018 в 04:03 Источник Поделиться