Trong các tệp có chứa nhiều ngôn ngữ (ví dụ: tệp mẫu), có cách thực hành tốt nhất nào về thụt lề không?

Tôi chủ yếu sử dụng điều này:

<div>
    IF FOO
        <div>
            <p>contents>
        </div>
    END FOO
</div>

Thụt lề cho mọi khối mới, bất kể ngôn ngữ. Điều này có một vài nhược điểm, mặc dù. Trong các tệp phức tạp hơn, nó có thể phá vỡ thụt lề của một trong hai ngôn ngữ:

<div>
    IF FOO
        <div someattribute>
    ELSE
        <div otherattribute>
    END FOO
        <p>content</p>
    </div>
</div>

Tôi cũng đã thấy điều này được sử dụng:

<div>
    IF FOO
    <div>
       <p>contents>
    </div>
    END FOO
</div>

I E. thụt lề chỉ một ngôn ngữ. Điều này có lợi thế là luôn nhất quán, nhưng trong các tệp phức tạp hơn gần như có thể ẩn hoàn toàn một số chi tiết triển khai, giống như một khối có điều kiện.

Mục tiêu ở đây rõ ràng là tối đa hóa khả năng đọc.

Theo tôi, nguyên tắc chính để mã hóa tốt là giảm thiểu sự xen kẽ của mã.

Các tập tin hai ngôn ngữ vốn đã là một mớ hỗn độn để làm việc. Ưu tiên của bạn là tối thiểu hóa mức độ mà hai ngôn ngữ được đan xen.

Ví dụ, trong một tệp mẫu, logic được thực hiện bởi ngôn ngữ tạo khuôn mẫu phải được giữ ở mức tối thiểu. Bất cứ khi nào có thể, di chuyển logic ở nơi khác và chỉ cần trình bày một giá trị trong tệp khuôn mẫu.

Thậm chí một cái gì đó giống như ví dụ của bạn:

<div>
    IF FOO
        <div someattribute>
    ELSE
        <div otherattribute>
    END FOO
        <p>content</p>
    </div> 
</div>

Có thể được thực hiện tốt hơn như là

<div>
    <div [FOO_ATTRIBUTE]>
        <p>content</p>
    </div> 
</div>

với thuộc tính để sử dụng tính toán ở nơi khác. Trong trường hợp này, sau đó, tôi sẽ để khả năng đọc ngôn ngữ chính của tệp là trình điều khiển của chiến lược thụt lề. Tôi sẽ không thụt lề ngôn ngữ tạo khuôn mẫu và bất kỳ mã tạo khuôn mẫu nào đủ phức tạp để cần thụt lề có thể được thiết kế xấu.

Đây là một trong những lý do chính để tránh các hệ thống trộn hai ngôn ngữ với nhau như thế này. Có thể rất khó kiểm tra xem luồng điều khiển của ngôn ngữ bên ngoài ảnh hưởng đến cấu trúc khối của ngôn ngữ bên trong như thế nào và khi bạn không thể thấy điều đó, lỗi xảy ra.

Tôi thích giữ chúng tách biệt và khi tạo đầu ra bằng ngôn ngữ có cấu trúc khác, luôn sử dụng hệ thống mẫu tôn trọng cấu trúc của ngôn ngữ và không yêu cầu khối điều khiển cho các tác vụ chung.

(Như đã hứa, ý kiến ​​dựa trên kinh nghiệm của tôi.)

Trước hết, nếu bạn có thể ngăn chặn nó: không trộn lẫn các ngôn ngữ, bất cứ khi nào có thể.

Theo ví dụ của bạn, có vẻ như bạn chủ yếu tự hỏi về cách nó nên được thực hiện trong một ngôn ngữ tạo khuôn mẫu trộn với HTML, mà tôi sẽ trình bày. (Một trường hợp khác sẽ xây dựng SQL bằng ngôn ngữ lập trình khác, yêu cầu các quy tắc hoàn toàn khác nhau).

Ví dụ, tôi sẽ trình bày Django (nhưng PHP, Twig, v.v.) hoạt động gần như giống nhau. Django có các khối logic trong các mẫu (mở {% tag %}, đóng {% endtag %}). HTML có các khối logic (mở <tag>, đóng </tag>). Ở đây tôi chủ yếu tuân theo quy tắc này: tăng sau thẻ mở, giảm sau thẻ đóng. Một quy tắc khác tôi giữ: đảm bảo rằng nội dung của khối Django là HTML được định dạng tốt.

Theo ví dụ của bạn, theo tôi điều này rất sai:

<div>
    IF FOO
        <div someattribute>
    ELSE
        <div otherattribute>
    END FOO
        <p>content</p>
    </div>
</div>

Tại sao? Bởi vì nội dung của IFHTML không được định dạng tốt. Nó sẽ trông như thế nào hơn?

<div>
    <div
        IF FOO
            someattribute
        ELSE
            otherattribute
        END FOO
    >
        <p>Content</p>
    </div>
</div>

(Vì ngôn ngữ mẫu của bạn không có cú pháp phân tích cú pháp đẹp, chúng tôi cần các dòng mới. Trong Django, tôi sẽ viết)

<div>
    <div {% if foo %}someattribute{% else %}otherattribute{% endif %}>
        <p>Content</p>
    </div>
</div>

Là một lợi ích bổ sung, hãy tưởng tượng rằng <div>có 7 thuộc tính, 1 trong số đó được quyết định dựa trên một điều kiện cụ thể. Hoặc tệ hơn: nếu nó có 3 thuộc tính thì mỗi thuộc tính phụ thuộc vào một điều kiện. Điều đó sẽ cung cấp cho 8 thẻ khác nhau.

Hãy ghi nhớ "quy tắc" để giữ cho nội dung của tất cả các khối được định dạng tốt trong phạm vi đó, bạn không phải lo lắng về việc phá vỡ thụt lề của một trong hai ngôn ngữ.

Một điểm khác mà tôi muốn đề cập (mặc dù hơi lạc đề): Nếu các thẻ mở và đóng nằm trên các dòng khác nhau, chúng sẽ là thẻ duy nhất trên dòng đó.

Sai lầm:

<ul>
    <li>This is something <a href="http://programmers.stackexchange.com">Usefull</a>
    </i>
</ul>

Thay vào đó, thích

<ul>
    <li>This is something <a href="http://programmers.stackexchange.com">Usefull</a></li>
</ul>

hoặc là

<ul>
    <li>
        This is something <a href="http://programmers.stackexchange.com">Usefull</a>
    </li>
</ul>

(Cảnh báo: sử dụng nâng cao): Đôi khi bạn có nhiều thẻ gói, bạn có thể (không phải) coi đây là một thẻ:

<ul>
    <li><div id="something"><span class="like this">
        Something like this
    </span></div></li>
</ul>

Tuy nhiên, tốt nhất là không trộn lẫn các ngôn ngữ (máy chủ / khách) khi thực hiện việc này. Và tốt nhất là đừng làm điều này với forcác vòng lặp. Và đừng làm điều này với.

TL; DR cho câu hỏi cụ thể của bạn.

• Bạn có một 'máy chủ' (ví dụ: khuôn mẫu Django) và ngôn ngữ 'khách' (ví dụ: HTML). Đảm bảo các khối ngôn ngữ máy chủ luôn chứa các khối ngôn ngữ khách được định dạng chính xác.
• Việc mở mỗi khối nên tăng độ thụt, đóng của mỗi khối sẽ thẳng hàng với việc mở.

Và lưu ý chung mà tôi nên thêm (như mọi khi): sử dụng phán đoán của riêng bạn. Biết khi nào nên đi chệch hướng.