Как правильно сделать отступ в смешанном коде PHP/HTML?

Какой правильный стиль отступа использовать при смешивании PHP и HTML? Нужно ли делать отступы, чтобы выводимый HTML имел правильный отступ или чтобы смесь PHP/HTML выглядела правильно отформатированной (и, таким образом, ее было легче читать)?

Например, скажем, у меня есть цикл foreach, выводящий строки таблицы. Какой из приведенных ниже правильный?

Сочетание PHP/HTML выглядит правильно:

<table>
  <?php foreach ($rows as $row): ?>
    <tr>
      <?php if ($row->foo()): ?>
        <?php echo $row ?>
      <?php else: ?>
        Something else
      <?php endif ?>
    </tr>
  <?php endforeach ?>
</table>

Выведенный HTML выглядит правильно:

<table>
<?php foreach ($rows as $row): ?>
  <tr>
  <?php if ($row->foo()): ?>
    <?php echo $row ?>
  <?php else: ?>
    Something else
  <?php endif ?>
  </tr>
<?php endforeach ?>
</table>

Я обнаружил, что когда сталкиваюсь с такой ситуацией (довольно часто), у меня нет стандартного стиля для использования. Я знаю, что «правильного» ответа может и не быть, но мне бы хотелось услышать мысли других разработчиков.


php html indentation
person James Skidmore    schedule 20.07.2009    source источник

Ответы (6)


arrow_upward
52
arrow_downward

PHP и HTML должны иметь отступ, чтобы они были правильными по отношению к себе в исходной форме, независимо друг от друга и выходной формы:

<table>
<?php foreach ($rows as $row): ?>
    <tr>
    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>
        Something else
    <?php endif ?>
    </tr>
<?php endforeach ?>
</table>
person chaos    schedule 20.07.2009
comment
Как бы вы поступили, если хотите получить строку, содержащую таблицу, а не эхо? - person Dane411; 17.11.2013
comment
@Dane411: Dane411: Если вы строите строку с использованием синтаксиса heredoc, сделайте отступ как HTML. Если вы строите его из небольших встроенных строк, забудьте об отступах HTML, потому что визуальная понятность содержимого HTML уже хромает, и усложнение ситуации более неуклюжими соглашениями ничем не поможет. - person chaos; 22.11.2013
comment
Существует ли общепринятое руководство по стилю, поддерживающее этот подход? - person Flimm; 07.02.2017
comment
при смешивании php с html вы можете сослаться на альтернативную структуру управления здесь - person Adi Prasetyo; 02.05.2017

arrow_upward
16
arrow_downward

Я тоже часто задумывался над этим вопросом, но потом понял, какая разница, как выглядит HTML-вывод? В любом случае ваши пользователи не должны смотреть на ваш HTML. Это должны прочитать ВЫ и, возможно, еще пара разработчиков. Держите исходный код как можно более чистым и забудьте о том, как выглядит результат.

Если вам нужно отладить вывод, используйте инструменты разработчика Chrome, Firebug или даже инструменты F12.

person mpen    schedule 21.07.2009

arrow_upward
11
arrow_downward

Обычно я помещаю открывающие теги php в начало строки, но делаю отступ внутри тегов в соответствии с форматированием html. Однако я не делаю этого для простых эхо-операторов, так как использую короткие открытые теги. Я думаю, что это упрощает поиск всех объявлений при просмотре файла.

    <table>
<?  foreach ($foo as $bar): ?>
      <tr>
<?    foreach ($bar as $baz): ?>

         <td><?=$baz?></td>

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>
person TJ L    schedule 20.07.2009
comment
+1: Вот как я на самом деле пишу (ну, за исключением того, что я использую фигурные скобки, а не форму двоеточия/конца и четыре пробела на уровень отступа); Я просто адаптировал соглашения OP для удобства. - person chaos; 21.07.2009
comment
Я избавился от этой привычки, так как быстро просмотреть вашу страницу намного сложнее. - person deceze♦; 21.07.2009
comment
Вы не должны использовать короткие открывающие теги. Вы можете столкнуться с различными проблемами с вашим кодом, связанным с настройкой php short_open_tag. - person markus; 21.07.2009
comment
@markus: Как написано на моей странице пользователя в Википедии, вы можете получить мои короткие теги, когда вырвете их из моих холодных мертвых рук. А если серьезно, я думаю, что смогу справиться с тегом версии XML. - person chaos; 12.05.2011
comment
Если вы хотите следовать PSR-2, вы можете использовать короткие теги только в сочетании с сокращенным синтаксисом echo (длинные теги везде). - person BHSPitMonkey; 22.01.2015
comment
что мне нравится в этом условном обозначении ‹? в начале строки заключается в том, что PHP более удобочитаем (не загроможден визуально рядом со знаком ‹?), и что моему мозгу легче переключаться между чтением HTML и PHP по отдельности — я сразу узнаю, что строка, которую я м чтение принадлежит тому или иному миру. Здорово! - person qbolec; 08.10.2015

arrow_upward
4
arrow_downward

  1. Прямой ответ на ваш вопрос: если вам нужно часто читать вывод HTML, может быть полезно выводить HTML с хорошим отступом. Но более распространенным случаем будет то, что вам нужно прочитать исходный код php, поэтому более важно, чтобы исходный код был легко читаемым.
  2. Альтернатива двум упомянутым вами вариантам: см. chaos' или ответ tj111.
  3. На мой взгляд, еще лучше: не смешивайте HTML и php, вместо этого используйте механизм шаблонов.
person Treb    schedule 20.07.2009
comment
Спасибо за комментарии Treb. Даже если бы я использовал механизм шаблонов, вопрос все равно существовал бы: как правильно делать отступы в тегах HTML/движка шаблонов. - person James Skidmore; 21.07.2009
comment
PHP — это шаблонизатор. :) - person chaos; 21.07.2009
comment
@chaos: Я знал, что ответ придет ... Может быть, это так, но то, что я вижу в примерах кода здесь, - это не правильное использование механизма шаблонов, а плохая смесь кода и дизайна. - person Treb; 22.07.2009

arrow_upward
2
arrow_downward

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

<table>

<?php foreach ($rows as $row): ?>

    <tr>

    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

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

person Etzeitet    schedule 20.07.2009
comment
Вы только что добавили несколько разрывов строк .... которые, ИМХО, совсем не добавляют ясности. Получите достойную IDE, и она должна красиво раскрасить ее для вас. - person mpen; 22.07.2009
comment
Это действительно полностью субъективный вопрос, поэтому, конечно, то, что может быть помощником для одних, не поможет другим. :) - person Etzeitet; 22.07.2009

arrow_upward
2
arrow_downward

Вам не следует беспокоиться об отступах разметки в производственной среде. Вы также не должны использовать Tidy или другие очистители HTML. Существуют допустимые варианты использования, например. когда вы разрешаете ввод HTML (но вместо этого рассмотрите возможность использования Markdown), хотя это случается редко.

Чаще всего HTML-фильтры-улучшатели используются для того, чтобы скрыть основные проблемы с кодом. Не надо. Исправьте разметку вручную.

Если вам нужно сделать отступ в коде только в среде разработки, вы можете использовать любой из вышеперечисленных способов. Однако имейте в виду, что эти библиотеки попытаются исправить вашу разметку (это их основная цель; отступы — побочный продукт). Я написал инструмент для создания отступов на основе регулярных выражений Dindent.

Dindent преобразует разметку следующим образом:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
    <div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <div><table border="1" style="background-color: red;"><tr><td>A cell    test!</td>
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
        <td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
            ll</td></tr></table></td></tr><tr><td>Test <span>Ce       ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
</body>
</html>

К этому:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
        <div>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <div>
                <table border="1" style="background-color: red;">
                    <tr>
                        <td>A cell test!</td>
                        <td colspan="2" rowspan="2">
                            <table border="1" style="background-color: green;">
                                <tr>
                                    <td>Cell</td>
                                    <td colspan="2" rowspan="2"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input>
                                        <input>
                                        <input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                    <td>Ce ll</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Test <span>Ce ll</span></td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

Dindent не будет пытаться дезинфицировать или иным образом вмешиваться в ваш код, кроме добавления отступов. Это должно упростить вашу разработку/отладку. Не для производства.

person Gajus    schedule 19.02.2014