깊은 중첩 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 등과 같은 백엔드 언어)에 의해 생성 될 때 이상적인 솔루션이 아닙니다. 저자 자신은 깊은 둥지를 좋아하지 않지만 필요할 때는 확장 가능하고 유지하기 쉬운 접근이 필요합니다.

먼저 기본 상황과 그 변형에 대한 더 나은 솔루션을 살펴 보고이 깊은 둥지로 달성 할 수있는 흥미로운 효과를 살펴 보겠습니다!

기본 솔루션

재귀 방법이 필요합니다. 예를 들어 Haml을 사용하면 다음 코드를 구현할 수 있습니다.

 - DEF NEST (CLS, N)
- n> 0이 아닌 한`` 'reture' '
- "<div class="#{cls}"> #{Nest (CLS, N -1)}</div> "
= Nest ( '?', 5)

예를 들어 이모티콘 클래스 이름은 여기에서만 사용됩니다. 실제 웹 사이트에서는 이모티콘 클래스 이름을 권장하지 않지만 다른 경우에는 적당한 사용으로 인해 코드가 더 흥미로울 수 있습니다.

퍼그는 동일한 HTML을 생성 할 수도 있습니다.

 Mixin Nest (CLS, N)
  div (class = cls)
    -n 인 경우
       둥지 (CLS, N)

 둥지 ( '?', 5)

자바 스크립트 솔루션 :

 함수 네스트 (_parent, cls, n) {
  _el = document.createElement ( 'div');

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

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

Nest (Document.body, '?', 5)

PHP 솔루션 :

  php 함수 네스트 ($ cls, $ n) {
  에코 "<div class="$cls"> ";
  if (-$ n> 0) nest ($ cls, $ n);
  에코 "</div> ";
}

둥지 ( '?', 5);
?>

이러한 방법에 의해 생성 된 HTML은 형식 및 공간 측면에서 약간 다릅니다. 이것은 .?:empty 선택기를 사용하여 Haml, JavaScript 및 PHP에서 작동하는 가장 안쪽 "boo"요소를 찾아서 HTML에서 생성되지는 않습니다.

계층 적 표시기를 추가하십시오

각 "boo"요소에 계층 적 지표 사용자 정의 속성 --i 갖기를 원하며, 각 요소에 대해 다른 배경을 설정하는 데 사용할 수 있습니다.

색조를 변경하려면 filter: hue-rotate() 사용할 수 있다고 생각할 수 있습니다. 그러나 hue-rotate() 색조뿐만 아니라 채도와 밝기에도 영향을 미칩니다. 또한 계층 적 지표에 의존하는 사용자 정의 기능만큼 유연하지 않습니다 --i

예를 들어, 최근 프로젝트에서 다음 코드를 사용하여 배경 구성 요소가 다른 레벨간에 원활하게 전환하도록합니다 ( $c 값은 다항식 계수).

 -SQ : calc (var (-i)*var (-i)); /* 정사각형 */
--cb : calc (var (-sq)*var (-i)); / * 큐브 */
-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));

퍼그 코드를 수정하여 계층 적 표시기를 추가하십시오.

 Mixin Nest (CLS, N, I = 0)
  div (class = cls style =`-i : $ {i}`)
    I <n n i><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>

자바 스크립트 버전 :

 함수 네스트 (_parent, cls, n, i = 0) {
  _el = document.createElement ( 'div');

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

  if (i <n nest cls n i _el.classlist.add _parent.appendchild><p> PHP 버전 :</p>
<pre class="brush:php;toolbar:false">  php 함수 네스트 ($ cls, $ n, $ i = 0) {
  에코 "<div class="$cls" style="--i: $i"> ";
  if ($ i  ";
}

둥지 ( '?', 5);
?><p> ... (나머지 콘텐츠는 원본 텍스트와 유사하며 필요에 따라 선택적으로 유지하거나 다시 작성할 수 있습니다)</p>
</div>

위 내용은 깊은 중첩 HTML 구조를 생성하는 더 똑똑한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!