Intelligentere Wege, um eine tiefe verschachtelte HTML -Struktur zu erzeugen

Tipps zur effizienten Erzeugung von tiefen verschachtelten HTML -Strukturen

Angenommen, wir müssen die folgende HTML -Struktur erstellen:

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

Manuelles Schreiben solcher Code ist sehr umständlich. Dieser Artikel wird durch die Probleme des Autors verursacht, wenn er die Verwendung von Präprozessoren wie Haml sieht, um einen solchen Code zu generieren.

Der tatsächliche Code kann mehr als zwanzig Nistschichten enthalten, aber aus Gründen der einfachen Lektüre verwenden wir hier nur fünf Ebenen.

Das manuelle Schreiben jeder Nistschicht ist offensichtlich keine ideale Lösung, insbesondere wenn HTML von einem Präprozessor (oder Backend -Sprache wie JavaScript, PHP usw.) erzeugt wird. Der Autor selbst mag keine tiefe Verschachtelung, aber wenn nötig, brauchen wir einen skalierbaren und leicht aufrechterhaltenen Ansatz.

Schauen wir uns zuerst einige bessere Lösungen für die grundlegende Situation und ihre Varianten an und dann einige interessante Effekte, die mit dieser tiefen Verschachtelung erreicht werden können!

Grundlösung

Wir brauchen eine rekursive Methode. Beispielsweise kann der folgende Code mit HAML implementiert werden:

 - Def Nest (CLS, N)
- Rückgabe '', es sei denn n> 0
- "<div class="#{cls}"> #{nest (cls, n - 1)}</div> "
= Nest ('?', 5)

Emoji -Klassennamen werden hier nur hier verwendet. Emoji -Klassennamen werden auf tatsächlichen Websites nicht empfohlen, aber in anderen Fällen kann der mäßige Gebrauch den Code interessanter machen.

Mops kann auch das gleiche HTML erzeugen:

 Mixinnest (CLS, N)
  div (class = cls)
    If --n
       Nest (Cls, n)

 Nest ('?', 5)

JavaScript -Lösung:

 Funktion nest (_parent, cls, n) {
  sei _el = document.createelement ('div');

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

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

Nest (Dokument.Body, '?', 5)

PHP -Lösung:

  PHP -Funktion nest ($ cls, $ n) {
  Echo "<div class="$cls"> ";
  if (-$ n> 0) nest ($ cls, $ n);
  Echo "</div> ";
}

Nest ('?', 5);
?>

Es ist zu beachten, dass sich die von diesen Methoden erzeugte HTML in Form von Format und Räumen geringfügig unterscheidet. Dies bedeutet .?:empty dass Sie das innerste "Boo" -Element verwenden.

Fügen Sie einen hierarchischen Indikator hinzu

Angenommen, wir möchten, dass jedes "Boo" -Element eine hierarchische Indikator -benutzerdefinierte Eigenschaft hat --i , mit der ein anderes Hintergrund für jedes Element festgelegt werden kann.

Sie könnten denken, wenn wir nur den Farbton ändern möchten, können wir filter: hue-rotate() ohne den hierarchischen Indikator verwenden. hue-rotate() betrifft jedoch nicht nur den Farbton, sondern auch die Sättigung und Helligkeit. Es hat auch nicht so flexibel wie benutzerdefinierte Funktionen, die sich auf hierarchische Indikatoren verlassen --i .

In einem aktuellen Projekt habe ich beispielsweise den folgenden Code verwendet, um die Hintergrundkomponente reibungslos zwischen verschiedenen Ebenen zu machen ( $c -Wert ist der Polynomkoeffizient):

 --sq: calc (var (-i)*var (-i)); /* Quadrat */
-CB: Calc (var (-sq)*var (-i)); / * cube */
--Hue: Calc ( #{$ ch0} #{$ ch1}*var (-i) #{$ ch2}*var (-SQ) #{$ CH3}*var (-cb));
--sa: 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%);

Hintergrund: HSL (var (-hue), var (-sat), var (-lum));

Ändern Sie den Mopscode, um einen hierarchischen Indikator hinzuzufügen:

 Mixin Nest (CLS, N, I = 0)
  div (class = cls style = `--i: $ {i}`)
    Wenn ich <n nest n i><p> Haml -Version ist ähnlich:</p>
<pre class="brush:php;toolbar:false"> - Def Nest (CLS, N, I = 0)
- Rückgabe '', es sei denn, ich <n class="#{cls}" style="--i: #{i}"> #{nest (cls, n, i 1)} "
= Nest ('?', 5)</n>

JavaScript -Version:

 Funktion nest (_parent, cls, n, i = 0) {
  sei _el = document.createelement ('div');

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

  if (i <n nest cls n i _el.classlist.add _parent.appendchild><p> PHP -Version:</p>
<pre class="brush:php;toolbar:false">  PHP -Funktion nest ($ cls, $ n, $ i = 0) {
  Echo "<div class="$cls" style="--i: $i"> ";
  wenn ($ i  ";
}

Nest ('?', 5);
?><p> ... (Der verbleibende Inhalt ähnelt dem Originaltext und kann optional beibehalten oder nach Bedarf umgeschrieben werden).</p>
</div>

Das obige ist der detaillierte Inhalt vonIntelligentere Wege, um eine tiefe verschachtelte HTML -Struktur zu erzeugen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!