Hoe kan ik gemengde PHP/HTML-code correct laten inspringen?

Wat is de juiste inspringstijl bij het mixen van PHP en HTML? Moet ik inspringen zodat de uitgevoerde HTML de juiste inspringing heeft, of zodat de PHP/HTML-mix er goed geformatteerd uitziet (en dus gemakkelijker te lezen is)?

Stel bijvoorbeeld dat ik een foreach-lus heb die tabelrijen uitvoert. Welke hieronder is correct?

PHP/HTML-mix ziet er goed uit:

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

Uitgevoerde HTML ziet er correct uit:

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

Ik heb gemerkt dat wanneer ik deze situatie tegenkom (vrij vaak), ik geen standaardstijl heb om te gebruiken. Ik weet dat er misschien geen “juist” antwoord is, maar ik zou graag meningen horen van andere ontwikkelaars.


Antwoord 1, autoriteit 100%

De PHP en de HTML moeten elk worden ingesprongen zodat ze correct zijn ten opzichte van zichzelf in bronvorm, ongeacht elkaar en de uitgevoerde vorm:

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

Antwoord 2, autoriteit 30%

Ik heb ook vaak over deze vraag nagedacht, maar toen realiseerde ik me: wat maakt het uit hoe de HTML-uitvoer eruitziet? Uw gebruikers zouden sowieso niet naar uw HTML moeten kijken. Het is voor JIJom te lezen, en misschien voor een paar andere ontwikkelaars. Houd de broncodezo schoon mogelijk en vergeet hoe de uitvoer eruitziet.

Als u fouten in de uitvoer wilt opsporen, gebruikt u Chrome Developer Tools, Firebug of zelfs F12 Tools.


Antwoord 3, autoriteit 21%

Over het algemeen plaats ik openendephp-tags aan het begin van de regel, maar laat alles wat binnen de tags staat inspringen om overeen te komen met de html-opmaak. Ik doe dit echter niet voor eenvoudige echo-statements, aangezien ik short-open tags gebruik. Ik denk dat het eenvoudiger is om door het bestand te bladeren om alle declaraties te vinden.

   <table>
<?  foreach ($foo as $bar): ?>
      <tr>
<?    foreach ($bar as $baz): ?>
         <td><?=$baz?></td>
<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>

Antwoord 4, autoriteit 8%

  1. Direct antwoord op uw vraag: als u de HTML-uitvoer vaak moet lezen, kan het een goede zaak zijn om goed ingesprongen HTML uit te voeren. Maar het meest voorkomende geval is dat je je php-broncode moet lezen, dus het is belangrijker dat de bron gemakkelijk leesbaar is.
  2. Alternatief voor de twee opties die je noemde: zie chaos’of tj111’santwoord.
  3. Nog beter naar mijn mening: meng HTML en php niet, gebruik in plaats daarvan een sjabloon-engine.

Antwoord 5, autoriteit 4%

Je kunt ook altijd een beetje witruimte gebruiken om de leesbaarheid te vergroten. Voortbouwen op de inspringing van chaos:

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

Het enige nadeel hiervan is dat als je veelgemengde code hebt, het je document twee keer zo lang kan maken, wat zorgt voor meer scrollen. Hoewel als je zoveel gemengde code hebt, je misschien een template-engine wilt overwegen.


Antwoord 6, autoriteit 4%

U hoeft zich geen zorgen te maken over het inspringen van markeringen in de productieomgeving. U mag ook geen Tidy of andere HTML-zuiveraars gebruiken. Er zijn geldige use-cases, b.v. wanneer u HTML-invoer toestaat (maar overweeg om in plaats daarvan Markdownte gebruiken), hoewel dit zeldzaam is.

Meestal worden HTML-beautifiers-filters misbruikt om de onderliggende problemen met de code te verbergen. niet doen. Corrigeer uw markeringen handmatig.

Als u uw code alleen in de ontwikkelomgeving moet laten inspringen, kunt u een van de bovenstaande opties gebruiken. Houd er echter rekening mee dat deze bibliotheken zullen proberen uw opmaak te corrigeren (dat is hun primaire doel; inspringen is een bijproduct). Ik heb op Regular Expression gebaseerde indentatietool Dindentgeschreven.

Dindent converteert markeringen als volgt:

<!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>

Hiervoor:

<!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 zal niet proberen uw code op te schonen of anderszins te verstoren, behalve het toevoegen van inspringing. Dit is om uw ontwikkeling/debuggen gemakkelijker te maken. Niet voor productie.

Other episodes