67

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>

このような状況に遭遇すると (かなり頻繁に)、使用する標準的なスタイルがないことに気付きました。「正しい」答えがないかもしれないことは承知していますが、他の開発者からの考えを聞きたいです。

4

6 に答える 6

53

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>
于 2009-07-20T20:33:38.257 に答える
16

私もこの質問についてよく考えましたが、HTML 出力がどのように見えるかを気にする人がいることに気付きました。いずれにせよ、ユーザーは HTML を見るべきではありません。それはあなたが読むためのものであり、おそらく他のいくつかの開発者のためのものです. ソースコードをできるだけきれいに保ち、出力がどのように見えるかは忘れてください。

出力をデバッグする必要がある場合は、Chrome 開発者ツール、Firebug、または F12 ツールを使用してください。

于 2009-07-21T05:31:56.133 に答える
11

私は通常、PHP の開始タグを行の先頭に置きますが、HTML のフォーマットに合わせてタグ内にあるものはすべてインデントします。ただし、ショート オープン タグを使用しているため、単純な echo ステートメントではこれを行いません。ファイルを参照してすべての宣言を見つけると、簡単になると思います。

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

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

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>
于 2009-07-20T20:38:11.773 に答える
4
  1. あなたの質問に対する直接的な答え: HTML 出力を頻繁に読む必要がある場合は、よくインデントされた HTML を出力することをお勧めします。しかし、より一般的なケースは、PHP のソース コードを読む必要がある場合であるため、ソースが読みやすいことがより重要です。
  2. あなたが言及した2つのオプションの代替：カオス またはtj111の回答を参照してください。
  3. 私の意見では、HTML と php を混ぜないでください。代わりにテンプレート エンジンを使用してください。
于 2009-07-20T20:40:14.860 に答える
2

本番環境では、マークアップのインデントについて気にする必要はありません。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 は、インデントを追加する以外に、コードをサニタイズしたり、干渉したりすることはありません。これは、開発/デバッグを容易にするためです。生産用ではありません。

于 2014-02-19T22:23:41.570 に答える
2

読みやすくするために、常に少しの空白を使用することもできます。カオスのインデントに基づく構築:

<table>

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

    <tr>

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

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

これの唯一の欠点は、コードが混在している場合、ドキュメントの長さが 2 倍になり、スクロールが増えることです。ただし、このように多くのコードが混在している場合は、テンプレート エンジンを検討することをお勧めします。

于 2009-07-20T20:41:52.657 に答える