В HTML/JavaScript в hex в RGB и RGB в hex цвет конвертер


Я недавно начал изучать JavaScript-кода (большой язык) и решили запустить небольшой проект, который состоит из веб-сайта с двумя входами, один для шестнадцатиричного ввода и один для входного сигнала RGB. Когда пользователь вводит допустимый цвет в любой из двух входов, то фоновый цвет сайта меняется и другому входу обновляется с тем же цветом в соответствующем формате. Вот мой код (Усс удалены, так как это не относится к логике):

(function() {
    "use strict";
    
    window.onload = function() {
        let initialColorChoices = [
            "#0c6",
            "#099",
            "#c0c",
            "#39f",
            "#fa0",
            "#affd1b",
            "#d53e78",
            "#e04857",
            "#0cca9a",
            "#e6e600"
        ];
        
        let randomColor = initialColorChoices[Math.floor(Math.random() * 10)];
        
        document.body.style.backgroundColor = randomColor;
        
        let hexInput = document.getElementById("hex");
        let rgbInput = document.getElementById("rgb");
        
        hexInput.value = randomColor;
        rgbInput.value = convertHexToRGB(randomColor);
        
        // I've heard of something called arrow functions, how could 
        // I use those here?
        hexInput.addEventListener("change", function() {
            if (isValidColor(this.value)) {
                rgbInput.value = convertHexToRGB(this.value);
                document.body.style.backgroundColor = this.value;
            }  
        });
        
        rgbInput.addEventListener("change", function() {
            if (isValidColor(this.value)) {
                hexInput.value = convertRGBToHex(this.value);
                document.body.style.backgroundColor = convertRGBToHex(this.value);
            } 
        });
    };
    
    function convertHexToRGB(hexString) {
        let rgbColorValues = [];
        
        if (!isValidColor(hexString)) {
            return "";
        }
        
        if (hexString.length == 4) {
            for (const character of hexString.slice(1)) { // Excluding the #
                rgbColorValues.push(parseInt(character + character, 16));
            }
        }
        else {
            for (let i = 1; i < 7; i += 2) { // Starting at 1 to exclude #
                rgbColorValues.push(parseInt(hexString[i] + hexString[i + 1], 16));
            }
        }
        
        return `rgb(${rgbColorValues[0]}, ${rgbColorValues[1]}, ${rgbColorValues[2]})`;
    }
    
    function convertRGBToHex(rgbString) {
        let hexString = "#";
        
        if (!isValidColor(rgbString))
        {
            return "";
        }
        
        let rgbColorValues = rgbString.replace(/(\s)|(rgb\()|(\))/g, '') // Isolate the RGB colors by removing spaces, rgb(, and )
            .split(",") // Convert to string array
            .map(Number); // Convert to number array
        
        for (const color of rgbColorValues) {
            let currentColorString = color.toString(16);
            
            if (currentColorString.length < 2) {
                hexString += "0";
            }
            
            hexString += currentColorString;
        }
        
        return hexString;
    }
    
    function isValidColor(colorString) {
        const hexRegex = /^(#[0-9A-F]{3})|(#[0-9A-F]{6})$/i;
        const rgbRegex = /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)$/;
        
        if (hexRegex.test(colorString)) {
            return true;
        }
        else if (rgbRegex.test(colorString)) {
            let rgbColorValues = colorString.replace(/(\s)|(rgb\()|(\))/g, '') // Isolate the RGB colors by removing spaces, rgb(, and )
                .split(",") // Convert to string array
                .map(Number); // Convert to number array
                        
            for (const color of rgbColorValues) {
                if (color < 0 || color > 255) {
                    return false;
                }
            }
            
            return true;
        }
        return false;
    }
}());
<!DOCTYPE html>
<html>
    <head>
        <title>Color Converter</title>
        
        <link href="resources/css/index.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="container">
            <input class="color-input" id="hex" type="text" placeholder="Hex"/>
            <h1 id="heading">Color Converter</h1>
            <input class="color-input" id="rgb" type="text" placeholder="RGB"/>
        </div>
        <script src="resources/js/index.js"></script>
    </body>
</html>

(Игнорировать все дополнительные CSS-классы, они существуют для стайлинга)

Вот конкретные вопросы я хочу ответить в этом обзоре кода:

  1. Мой код использовать хороший на JS/ЕС6 практики программирования и правильного стиля кодирования? (Я пытался следовать на Airbnb стиль для этого)
  2. Мой код хорошо структурирован и хорошо написано?
  3. Я должен дать жизнь функционировать в это имя, так что она может быть проверена с помощью фреймворков, таких как Мокко (возможно, если бы я хотел извлечь эти функции в небольших плагинов), или этот код должен быть структурирован по-разному, чтобы сделать его более ремонтопригодным и проверяемым? (Я считаю, что я в настоящее время не может получить доступ к этим функциям внутри этой анонимной функции)


Комментарии
1 ответ

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

Еще один аспект я хотел бы подчеркнуть (хотя явно не в этом вопрос) - использование функции первого класса , чтобы дать описательные имена для операции.



const radix = (from, to) => x => parseInt(x, from).toString(to)
, toHex = radix(10, 16)
, fromHex = radix(16, 10)
, compose = (...fs) => fs.reduce((f, g) => (...as) => f(g(...as)))
, pad = x => ("00" + x).slice(-2)
, doubled = x => x + x
, limit = x => Math.min(255, x).toString()
, rgb2hex = rgb => (rgb.match(/\d+/g) || [])
.map(compose(pad, toHex, limit))
.join('')
, hex2rgb = (hex, isCompact) =>
(hex.match(isCompact ? /[0-9a-f]/gi : /[0-9a-f]{2}/gi) || [])
.map(isCompact ? compose(fromHex, doubled) : fromHex)
.join(',')

<html>
<body>
<form name="convert" onsubmit="return false">
<label><span>r,g,b</span>
<input name="rgb" oninput="hex.value = rgb2hex(this.value)">
</label>

<label><span>hex</span>
<input name="hex" oninput="rgb.value = hex2rgb(this.value, this.value.length <= 3)">
</label>
</form>
</body>
</html>




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