高效生成深度嵌套HTML結(jié)構(gòu)的技巧

假設(shè)我們需要?jiǎng)?chuàng)建如下HTML結(jié)構(gòu)：

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

手動(dòng)編寫(xiě)這樣的代碼非常繁瑣。本文正是源于作者在看到使用Haml等預(yù)處理器生成此類(lèi)代碼時(shí)的困擾而產(chǎn)生的。

實(shí)際代碼中可能包含二十多層嵌套，但為了閱讀方便，我們這里只使用五層。

手動(dòng)編寫(xiě)每一層嵌套顯然不是理想方案，尤其當(dāng)HTML由預(yù)處理器（或JavaScript、PHP等后端語(yǔ)言）生成時(shí)。作者本人并不喜歡深度嵌套，但在必要情況下，我們需要一種可擴(kuò)展且易于維護(hù)的方法。

讓我們先看看一些針對(duì)基本情況及其變體的更好解決方案，然后看看使用這種深度嵌套可以實(shí)現(xiàn)的一些有趣效果！

基本解決方案

我們需要一種遞歸方法。例如，使用Haml，以下代碼可以實(shí)現(xiàn)：

- def nest(cls, n)
-  return '' unless n > 0
-  "<div class="#{cls}">#{nest(cls, n - 1)}</div>"
= nest('?', 5)

這里使用了表情符號(hào)類(lèi)名，僅作為示例。實(shí)際網(wǎng)站中不建議使用表情符號(hào)類(lèi)名，但在其他情況下，適度使用可以使代碼更有趣。

Pug也可以生成相同的HTML：

mixin nest(cls, n)
  div(class=cls)
    if --n
       nest(cls, n)

 nest('?', 5)

JavaScript方案：

function nest(_parent, cls, n) {
  let _el = document.createElement('div');

  if(--n) nest(_el, cls, n);

  _el.classList.add(cls);
  _parent.appendChild(_el)
};

nest(document.body, '?', 5)

PHP方案：

<?php function nest($cls, $n) {
  echo "<div class='$cls'>";
  if(--$n > 0) nest($cls, $n);
  echo "";
}

nest('?', 5);
?>

需要注意的是，這些方法生成的HTML在格式和空格方面略有不同。這意味著使用.?:empty選擇器定位最內(nèi)層的“boo”元素，在Haml、JavaScript和PHP生成的HTML中有效，但在Pug生成的HTML中無(wú)效。

添加層級(jí)指示器

假設(shè)我們希望每個(gè)“boo”元素都具有一個(gè)層級(jí)指示器自定義屬性--i，該屬性可用于為每個(gè)元素設(shè)置不同的背景。

您可能認(rèn)為，如果我們只想更改色調(diào)，可以使用filter: hue-rotate()，而無(wú)需層級(jí)指示器。但是，hue-rotate()不僅會(huì)影響色調(diào)，還會(huì)影響飽和度和亮度。它也沒(méi)有自定義函數(shù)依賴(lài)于層級(jí)指示器--i那樣靈活。

例如，在最近的一個(gè)項(xiàng)目中，我使用以下代碼使背景組件在不同層級(jí)間平滑過(guò)渡（$c值為多項(xiàng)式系數(shù)）：

--sq: calc(var(--i)*var(--i)); /* square */
--cb: calc(var(--sq)*var(--i)); /* cube */
--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%);

background: hsl(var(--hue), var(--sat), var(--lum));

修改Pug代碼以添加層級(jí)指示器：

mixin nest(cls, n, i = 0)
  div(class=cls style=`--i: ${i}`)
    if   i 
<p>Haml版本類(lèi)似：</p>
<pre class="brush:php;toolbar:false">- def nest(cls, n, i = 0)
-   return '' unless i #{nest(cls, n, i   1)}"
= nest('?', 5)

JavaScript版本：

function nest(_parent, cls, n, i = 0) {
  let _el = document.createElement('div');

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

  if(  i 
<p>PHP版本：</p>
<pre class="brush:php;toolbar:false"><?php function nest($cls, $n, $i = 0) {
  echo "<div class='$cls' style='--i: $i'>";
  if(  $i ";
}

nest('?', 5);
?>

...(剩余內(nèi)容與原文類(lèi)似，可根據(jù)需要選擇性地保留或改寫(xiě))

以上是更明智的方法來(lái)生成深嵌套的HTML結(jié)構(gòu)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！