Petua untuk menghasilkan struktur HTML bersarang yang cekap

Katakan kita perlu membuat struktur HTML berikut:

<div class="boo">
  <div class="boo">
    <div class="boo">
      <div class="boo">
        <div class="boo"></div>
      </div>
    </div>
  </div>
</div>

Menulis kod tersebut secara manual sangat rumit. Artikel ini disebabkan oleh masalah penulis apabila dia melihat penggunaan preprocessors seperti HAML untuk menghasilkan kod tersebut.

Kod sebenar mungkin mengandungi lebih daripada dua puluh lapisan bersarang, tetapi demi bacaan mudah, kami hanya menggunakan lima lapisan di sini.

Menulis setiap lapisan bersarang secara manual jelas bukan penyelesaian yang ideal, terutamanya apabila HTML dihasilkan oleh preprocessor (atau bahasa backend seperti JavaScript, PHP, dll.). Penulis sendiri tidak suka bersarang yang mendalam, tetapi apabila perlu, kita memerlukan pendekatan berskala dan mudah untuk mengekalkan pendekatan.

Mari kita lihat beberapa penyelesaian yang lebih baik untuk situasi asas dan variannya, dan kemudian lihat beberapa kesan menarik yang dapat dicapai dengan bersarang yang mendalam ini!

Penyelesaian asas

Kami memerlukan kaedah rekursif. Sebagai contoh, menggunakan HAML, kod berikut boleh dilaksanakan:

 - Def Nest (CLS, N)
- kembali '' kecuali n> 0
- "<div class="#{cls}"> #{Nest (cls, n - 1)}</div> "
= sarang ('?', 5)

Nama kelas emoji digunakan di sini, contohnya sahaja. Nama kelas emoji tidak disyorkan di laman web sebenar, tetapi dalam kes lain, penggunaan sederhana dapat menjadikan kod itu lebih menarik.

PUG juga boleh menghasilkan HTML yang sama:

 Mixin Nest (CLS, N)
  div (kelas = cls)
    jika --n
       Sarang (CLS, N)

 sarang ('?', 5)

Penyelesaian JavaScript:

 fungsi sarang (_parent, cls, n) {
  Let _el = document.createElement ('div');

  jika (-n) sarang (_el, cls, n);

  _el.classlist.add (cls);
  _parent.appendchild (_el)
};

Nest (Document.body, '?', 5)

Penyelesaian PHP:

  PHP Function Nest ($ cls, $ n) {
  echo "<div class="$cls"> ";
  jika (-$ n> 0) sarang ($ cls, $ n);
  echo "</div> ";
}

sarang ('?', 5);
?>

Harus diingat bahawa HTML yang dihasilkan oleh kaedah ini sedikit berbeza dari segi format dan ruang. Ini bermakna menggunakan .?:empty untuk mencari elemen "boo" yang paling dalam, yang berfungsi di Haml, JavaScript, dan PHP menjana HTML, tetapi tidak di PUG menjana HTML.

Tambahkan penunjuk hierarki

Katakan kita mahu setiap elemen "boo" mempunyai harta penunjuk hierarki --i , yang boleh digunakan untuk menetapkan latar belakang yang berbeza untuk setiap elemen.

Anda mungkin berfikir bahawa jika kita hanya mahu menukar warna, kita boleh menggunakan filter: hue-rotate() tanpa penunjuk hierarki. Walau bagaimanapun, hue-rotate() tidak hanya memberi kesan kepada warna, tetapi juga ketepuan dan kecerahan. Ia juga tidak mempunyai fleksibel seperti fungsi tersuai yang bergantung kepada petunjuk hierarki --i .

Sebagai contoh, dalam projek baru -baru ini, saya menggunakan kod berikut untuk menjadikan komponen latar belakang lancar peralihan antara tahap yang berbeza (nilai $c adalah pekali polinomial):

 --sq: calc (var (-i)*var (-i)); / * persegi */
--cb: calc (var (-sq)*var (-i)); / * kiub */
--hue: calc ( #{$ ch0} #{$ ch1}*var (-i) #{$ ch2}*var (-sq) #{$ ch3}*var (-cb));
--Sat: calc (( #{$ cs0} #{$ cs1}*var (-i) #{$ cs2}*var (-sq) #{$ cs3}*var (-cb))*1%);
--lum: calc (( #{$ cl0} #{$ cl1}*var (-i) #{$ cl2}*var (-sq) #{$ cl3}*var (-cb))*1%);

latar belakang: hsl (var (-hue), var (-sat), var (-lum));

Ubah suai kod PUG untuk menambah penunjuk hierarki:

 Mixin Nest (CLS, N, i = 0)
  div (class = cls style = `--i: $ {i}`)
    Sekiranya saya <n sarang n i><p> Versi Haml adalah serupa:</p>
<pre class="brush:php;toolbar:false"> - Def Nest (CLS, N, i = 0)
- kembali '' kecuali saya <n class="#{cls}" style="--i: #{i}"> #{Nest (cls, n, i 1)} "
= sarang ('?', 5)</n>

Versi JavaScript:

 Fungsi Nest (_parent, cls, n, i = 0) {
  Let _el = document.createElement ('div');

  _el.style.setProperty ('-i', i);

  jika (i <n sarang cls n i _el.classlist.add _parent.appendchild nest><p> Versi PHP:</p>
<pre class="brush:php;toolbar:false">  PHP Function Nest ($ cls, $ n, $ i = 0) {
  echo "<div class="$cls" style="--i: $i"> ";
  jika ($ i  ";
}

sarang ('?', 5);
?><p> ... (kandungan yang tinggal adalah serupa dengan teks asal, dan boleh dikekalkan atau ditulis semula secara pilihan seperti yang diperlukan)</p>
</div>

Atas ialah kandungan terperinci Cara yang lebih bijak untuk menghasilkan struktur HTML bersarang yang mendalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!