深いネストされたHTML構造を生成するより賢い方法

深いネストされたHTML構造を効率的に生成するためのヒント

次のHTML構造を作成する必要があると仮定します。

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

そのようなコードを手動で書くことは非常に面倒です。この記事は、著者がそのようなコードを生成するためにhamlなどのプレセッサーを使用したことを確認したときの著者の問題によって引き起こされます。

実際のコードには20層以上のネストが含まれている場合がありますが、簡単に読むために、ここでは5層のみを使用しています。

特にHTMLがプリプロセッサ（またはJavaScript、PHPなどのバックエンド言語）によって生成される場合、特にHTMLが生成される場合、手動でネストの各層を書き込むことは理想的なソリューションではありません。著者自身は深い巣が好きではありませんが、必要に応じて、スケーラブルで維持できるアプローチが必要です。

まず、基本的な状況とそのバリエーションのためのいくつかのより良いソリューションを見て、この深い巣で達成できる興味深い効果を見てみましょう！

基本的なソリューション

再帰的な方法が必要です。たとえば、Hamlを使用して、次のコードを実装できます。

 -def nest（cls、n）
-n> 0でない限り ''を返します
 -  "<div class="#{cls}"> ＃{nest（cls、n -1）}</div> 「
= nest（ '？'、5）

たとえば、絵文字のクラス名はここでのみ使用されます。絵文字のクラス名は実際のWebサイトでは推奨されませんが、他の場合は、中程度の使用によりコードがより面白くなる可能性があります。

パグは同じHTMLを生成することもできます。

ミックス巣（CLS、N）
  div（class = cls）
    if -n
       巣（cls、n）

 ネスト（ '？'、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ソリューション：

  ";
  if（ -  $ n> 0）nest（$ cls、$ n）;
  エコー」 ";
}

nest（ '？'、5）;
？>

これらのメソッドによって生成されたHTMLは、形式とスペースの点でわずかに異なることに注意する必要があります。これは.?:emptyように。

階層インジケーターを追加します

各「ブー」要素が階層インジケーターカスタムプロパティ--i各要素の異なる背景）を設定するために使用できる階層インジケーターカスタムプロパティを持たせると仮定します。

色相を変更したい場合は、階層インジケーターなしでfilter: hue-rotate()を使用できると思うかもしれません。ただし、 hue-rotate() 、色相だけでなく、飽和と明るさにも影響します。また、階層指標に依存するカスタム関数ほど柔軟ではありません--i

たとえば、最近のプロジェクトでは、次のコードを使用して、バックグラウンドコンポーネントを異なるレベル間でスムーズに遷移させます（ $c値は多項式係数です）。

 -sq：calc（var（ -  i）*var（ -  i））; /* 四角 */
-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％）;

背景：hsl（var（ -  hue）、var（ -  sat）、var（ -  lum））;

PUGコードを変更して、階層インジケーターを追加します。

ミックス巣（Cls、n、i = 0）
  div（class = cls style = `-i：$ {i}`）
    i <n><p> hamlバージョンは似ています：</p>
<pre class="brush:php;toolbar:false"> -def Nest（cls、n、i = 0）
-i <n class="#{cls}" style="--i: #{i}"> ＃{nest（cls、n、i 1）} 「
= nest（ '？'、5）</n>

JavaScriptバージョン：

 function nest（_parent、cls、n、i = 0）{
  let _el = document.createelement（ 'div'）;

  _el.style.setProperty（ ' -  i'、i）;

  if（i <n _el.classlist.add _parent.appendchild nest><p> PHPバージョン：</p>
<pre class="brush:php;toolbar:false">  ";
  if（$ i  ";
}

nest（ '？'、5）;
？>

...（残りのコンテンツは元のテキストに似ており、必要に応じてオプションで保持または書き直すことができます）

以上が深いネストされたHTML構造を生成するより賢い方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。