Làm cách nào để thụt lề đúng mã PHP/HTML?

Question

Khi trộn PHP và HTML, phong cách thụt đầu dòng thích hợp để sử dụng là gì? Tôi có thụt lề sao cho HTML được xuất ra có thụt lề chính xác hay để hỗn hợp PHP/HTML có định dạng đúng (và do đó dễ đọc hơn)? Ví dụ:

Ví dụ: giả sử tôi có một hàng xuất hiện trong bảng foreach. Cái nào dưới đây là chính xác?

PHP/HTML hỗn hợp có vẻ đúng:

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

outputted HTML có vẻ đúng:

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

Tôi đã thấy rằng khi tôi chạy vào tình trạng này (khá thường xuyên), Tôi không có một phong cách tiêu chuẩn để sử dụng. Tôi biết rằng có thể không có câu trả lời "đúng", nhưng tôi rất muốn nghe ý kiến ​​của các nhà phát triển khác.

Answer 1

Các PHP và HTML mỗi nên được thụt vào để họ là chính xác đối với bản thân ở dạng nguồn với, không phụ thuộc vào nhau và hình thức outputted:

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

Answer 2

Tôi thường đặt mở thẻ php ở đầu dòng, nhưng thụt lề bất cứ điều gì là bên trong các thẻ để phù hợp với định dạng html. Tuy nhiên, tôi không làm điều này đối với các câu lệnh echo đơn giản vì tôi sử dụng các thẻ mở ngắn. Tôi nghĩ rằng nó làm cho nó đơn giản hơn khi duyệt qua các tập tin để tìm tất cả các tờ khai.

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

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

<? endforeach ?> 
     </tr> 
<? endforeach ?> 
    </table> 

Answer 3

1. câu trả lời trực tiếp cho câu hỏi của bạn: Nếu bạn cần phải đọc đầu ra HTML thường, nó có thể là một điều tốt để đầu ra cũng HTML thụt vào. Nhưng trường hợp phổ biến hơn sẽ là bạn cần phải đọc mã nguồn php của bạn, vì vậy điều quan trọng hơn là nguồn có thể dễ dàng đọc được.
2. Thay thế cho hai tùy chọn bạn đã đề cập: Xem câu hỏi chaos' hoặc tj111's.
3. Tốt hơn theo ý kiến ​​của tôi: Không trộn HTML và php, hãy sử dụng công cụ tạo mẫu thay thế.

Answer 4

Bạn luôn có thể sử dụng một chút khoảng trắng để giúp dễ đọc. Xây dựng trên sự hỗn loạn thụt đầu dòng:

<table> 

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

    <tr> 

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

     Something else 

    <?php endif ?> 

    </tr> 

    <?php endforeach ?> 

</table 

Nhược điểm duy nhất với điều này là nếu bạn có rất nhiều mã hỗn hợp nó có thể làm cho tài liệu của bạn gấp đôi thời gian, mà làm cho di chuyển hơn. Mặc dù nếu bạn có mã hỗn hợp này nhiều bạn có thể muốn xem xét một động cơ templating.

Answer 5

Tôi cũng thường xuyên cân nhắc câu hỏi này, nhưng sau đó tôi nhận ra, ai quan tâm đầu ra HTML trông như thế nào? Người dùng của bạn không nên xem HTML của bạn. Dành cho YOU để đọc và có thể là một vài nhà phát triển khác. Giữ mã số càng sạch càng tốt và quên đi đầu ra trông như thế nào.

Nếu bạn cần gỡ lỗi đầu ra, hãy sử dụng Công cụ nhà phát triển Chrome, Firebug hoặc thậm chí Công cụ F12.

Answer 6

Bạn không nên lo lắng về việc thụt lề đánh dấu trong môi trường sản xuất. Bạn cũng không nên sử dụng Tidy hoặc các bộ lọc HTML khác. Có các trường hợp sử dụng hợp lệ, ví dụ: khi bạn cho phép đầu vào HTML (nhưng hãy cân nhắc việc sử dụng Markdown thay thế), mặc dù chúng hiếm khi xảy ra.

Hầu hết các bộ lọc làm đẹp HTML thường bị lạm dụng để ẩn các vấn đề cơ bản với mã. Đừng. Sửa đánh dấu của bạn theo cách thủ công.

Nếu bạn chỉ cần thụt lề mã của mình trong môi trường phát triển, bạn có thể sử dụng một trong hai cách trên. Tuy nhiên, hãy cẩn thận rằng những thư viện này sẽ cố gắng sửa chữa đánh dấu của bạn (đó là mục đích chính của chúng; thụt đầu dòng là sản phẩm phụ). Tôi đã viết công cụ thụt lề dựa trên cụm từ thông dụng Dindent.

Dindent sẽ chuyển đổi đánh dấu như thế này:

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

Để này:

<!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 sẽ không cố gắng để khử trùng hoặc gây trở ngại cho mã của bạn vượt thêm thụt đầu dòng. Điều này giúp bạn phát triển/gỡ lỗi dễ dàng hơn. Không cho sản xuất.