更明智的方法來生成深嵌套的HTML結構

高效生成深度嵌套HTML結構的技巧

假設我們需要創建如下HTML結構：

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

手動編寫這樣的代碼非常繁瑣。本文正是源於作者在看到使用Haml等預處理器生成此類代碼時的困擾而產生的。

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

手動編寫每一層嵌套顯然不是理想方案，尤其當HTML由預處理器（或JavaScript、PHP等後端語言）生成時。作者本人並不喜歡深度嵌套，但在必要情況下，我們需要一種可擴展且易於維護的方法。

讓我們先看看一些針對基本情況及其變體的更好解決方案，然後看看使用這種深度嵌套可以實現的一些有趣效果！

基本解決方案

我們需要一種遞歸方法。例如，使用Haml，以下代碼可以實現：

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

這裡使用了表情符號類名，僅作為示例。實際網站中不建議使用表情符號類名，但在其他情況下，適度使用可以使代碼更有趣。

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選擇器定位最內層的“boo”元素，在Haml、JavaScript和PHP生成的HTML中有效，但在Pug生成的HTML中無效。

添加層級指示器

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

您可能認為，如果我們只想更改色調，可以使用filter: hue-rotate() ，而無需層級指示器。但是， hue-rotate()不僅會影響色調，還會影響飽和度和亮度。它也沒有自定義函數依賴於層級指示器--i那樣靈活。

例如，在最近的一個項目中，我使用以下代碼使背景組件在不同層級間平滑過渡（ $c值為多項式係數）：

 --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代碼以添加層級指示器：

 mixin nest(cls, n, i = 0)
  div(class=cls style=`--i: ${i}`)
    if i <p> Haml版本類似：</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);
?>

...(剩餘內容與原文類似，可根據需要選擇性地保留或改寫)

以上是更明智的方法來生成深嵌套的HTML結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！