Govnokodu.Net

Пример устранения дублирования реализации при рендеринге селектора цвета

Исходный код

<tr>
    <td width="21"><a href="javascript:couleur(0);" onMouseOver="window.status='<?php echo __("noir")?>';return true;"><img name="cou0" src="<?php echo HTTP_CHAT?>images/noir-select.gif" width=21 height=21 border=0 alt=""></a></td>
    <td width="21"><a href="javascript:couleur(1);" onMouseOver="window.status='<?php echo __("violet")?>';return true;"><img name="cou1" src="<?php echo HTTP_CHAT?>images/violet.gif" width=21 height=21 border=0 alt=""></a></td>
    <td width="21"><a href="javascript:couleur(2);" onMouseOver="window.status='<?php echo __("bleu")?>';return true;"><img name="cou2" src="<?php echo HTTP_CHAT?>images/bleu.gif" width=21 height=21 border=0 alt=""></a></td>
    <td width="21"><a href="javascript:couleur(3);" onMouseOver="window.status='<?php echo __("vert")?>';return true;"><img name="cou3" src="<?php echo HTTP_CHAT?>images/vert.gif" width=21 height=21 border=0 alt=""></a></td>
    <td width="21"><a href="javascript:couleur(4);" onMouseOver="window.status='<?php echo __("rouge")?>';return true;"><img name="cou4" src="<?php echo HTTP_CHAT?>images/rouge.gif" width=21 height=21 border=0 alt=""></a></td>
    <td width="21"><a href="javascript:couleur(5);" onMouseOver="window.status='<?php echo __("orange")?>';return true;"><img name="cou5" src="<?php echo HTTP_CHAT?>images/orange.gif" width=21 height=21 border=0 alt=""></a></td>
</tr>

Что не так в исходном коде

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

Как можно улучшить исходный код

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

Ещё имеет смысл рендеринг отдельного элемента поместить в отдельную функцию.

Кроме кнопки в целом здесь дублируется ещё одна реализация: получение пути картинки. Это самостоятельное знание, оно тоже должно быть извлечено в отдельную функцию.

const COULEURS = [
    'noir:noir-select.gif',
    'violet:violet.gif',
    'bleu:bleu.gif',
    'vert:vert.gif',
    'rouge:rouge.gif',
    'orange:orange.gif',
];

function RenderColorTd($couleur_numero, $couleur_donnees) {
    list($couleur_nome, $couleur_image) = explode(':', $couleur_donnees);
    $couleur_image_chemin = ImageChemin($couleur_image);
    return"<td width=\"21\">
        <a href=\"javascript:couleur($couleur_numero);\" onMouseOver=\"window.status='$couleur_nome';return true;\">
            <img name=\"cou$couleur_numero\" src=\"$couleur_image_chemin\" width=21 height=21 border=0 alt=\"\">
        </a>
    </td>";
}

function ImageChemin($image) {
    return HTTP_CHAT . "images/" . $image;
}
<tr><?php
    foreach (COULEURS as $couleur_numero => $couleur_donnees) {
        echo RenderColorTd($couleur_numero, $couleur_donnees);
    }
?></tr>

Теория

Сергей Галанин