更明智的方法来生成深嵌套的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中文网其他相关文章！