PHP/HTML मिश्रित कोड को सही ढंग से इंडेंट कैसे करें?




indentation (4)

PHP और 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>

आउटपुट एचटीएमएल सही दिखता है:

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

मैंने पाया है कि जब मैं इस स्थिति में दौड़ता हूं (काफी बार), मेरे पास उपयोग करने के लिए मानक शैली नहीं है। मुझे पता है कि "सही" जवाब नहीं हो सकता है, लेकिन मुझे अन्य डेवलपर्स के विचार सुनना अच्छा लगेगा।


  1. आपके प्रश्न का सीधा जवाब: यदि आपको अक्सर HTML आउटपुट पढ़ने की आवश्यकता है, तो यह अच्छी तरह से इंडेंट किए गए HTML आउटपुट के लिए एक अच्छी बात हो सकती है। लेकिन अधिक आम मामला यह होगा कि आपको अपने PHP स्रोत कोड को पढ़ने की आवश्यकता है, इसलिए यह अधिक महत्वपूर्ण है कि स्रोत आसानी से पठनीय हो।
  2. आपके द्वारा उल्लेखित दो विकल्पों के लिए वैकल्पिक: chaos' या tj111's उत्तर देखें।
  3. मेरी राय में अभी भी बेहतर: HTML और php मिश्रण न करें, इसके बजाय टेम्पलेट इंजन का उपयोग करें।

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>

आपको उत्पादन वातावरण में मार्कअप इंडेंटेशन के बारे में परेशान नहीं होना चाहिए। न तो आप टिडी या अन्य एचटीएमएल purifiers का उपयोग करना चाहिए। वैध उपयोग के मामले हैं, उदाहरण के लिए जब आप HTML इनपुट की अनुमति देते हैं (लेकिन इसके बजाय Markdown का Markdown करने पर विचार करें), हालांकि ये दुर्लभ हैं।

कोड के साथ अंतर्निहित मुद्दों को छिपाने के लिए अक्सर HTML beautifiers-filter का दुरुपयोग किया जाता है। मत करो। मैन्युअल रूप से अपना मार्कअप सही करें।

यदि आपको केवल विकास वातावरण में अपना कोड इंडेंट करने की आवश्यकता है, तो आप उपर्युक्त में से किसी एक का उपयोग कर सकते हैं। हालांकि, सावधान रहें कि ये पुस्तकालय आपके मार्कअप को ठीक करने का प्रयास करेंगे (यह उनका प्राथमिक उद्देश्य है; इंडेंटेशन एक उप-उत्पाद है)। मैंने नियमित अभिव्यक्ति आधारित इंडेंटेशन टूल 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>

डिंडेंट इंडेंटेशन जोड़ने से परे आपके कोड को स्वच्छ करने या अन्यथा हस्तक्षेप करने का प्रयास नहीं करेगा। यह आपके विकास / डिबगिंग को आसान बनाना है। उत्पादन के लिए नहीं।


मैं अक्सर इस सवाल पर भी विचार करता था, लेकिन फिर मुझे एहसास हुआ, कौन परवाह करता है कि एचटीएमएल आउटपुट कैसा दिखता है? आपके उपयोगकर्ताओं को वैसे भी अपने एचटीएमएल को नहीं देखना चाहिए। यह आपके लिए पढ़ने के लिए है, और शायद कुछ अन्य डेवलपर्स। स्रोत कोड को यथासंभव स्वच्छ रखें और आउटपुट की तरह दिखने के बारे में भूल जाएं।

यदि आपको आउटपुट डीबग करने की आवश्यकता है, तो क्रोम डेवलपर टूल्स, फायरबग, या यहां तक ​​कि एफ 12 टूल्स का उपयोग करें।







indentation