중첩 된 나무 대 평평한 나무

트리 구성 요소는 매우 일반적이고 실용적입니다. 모든 트리 구성 요소가 중첩되어 있지는 않다는 것을 알고 계셨습니까?

배경

우리의 목표는 브라우저에서 트리 데이터 구조를 시각화하는 것입니다.

<code class="language-javascript">  // 一个基本的树形数据结构
  const treeData = {
    id: 0,
    name: "root",
    children: [
      {
        id: 1,
        name: "node 1",
        children: [
          {
            id: 3,
            name: "node 1.1"
          }
        ]
      },
      {
        id: 2,
        name: "node 2",
        children: [
          {
            id: 4,
            name: "node 2.1"
          }
        ]
      }
    ]
  };</code>

두 개의 하위 노드가 있으며 각 하위 노드에는 하위 노드가 있습니다.

중첩 트리

처음에는 트리 구성 요소의 구조가 중첩되어 있다고 가정했습니다. 이는 트리 구조를 생성하는 가장 직관적인 방법입니다. 데이터 구조를 반복하고 이를 HTML 요소로 변환하면 됩니다.

<code class="language-javascript">function nestedTreeGenerator(treeData, depth) {
  const nodes = [];

  // ... (代码略，与原文相同) ...
}</code>

다음 HTML 구조가 생성됩니다. 이는 일반적인 HTML 구조이며 트리에 축소/확장 기능을 쉽게 추가할 수 있습니다.

플랫 트리

플랫 트리는 목록이지만 트리처럼 보입니다.

<code class="language-javascript">function flatTreeGenerator(treeData, depth, parentId) {
  let nodes = [];

  // ... (代码略，与原文相同) ...
}</code>

최종 결과는 아래와 같습니다. 계층 정보가 손실되지 않도록 노드 ID와 상위 ID를 저장했습니다. 들여쓰기는 자연스럽게 발생하지 않으므로 직접 처리해야 합니다.

전체 예시

두 나무가 똑같아 보입니다. 그러나 트리 노드 위로 마우스를 가져가면 약간 다른 동작을 볼 수 있습니다. 중첩된 나무에는 항상 들여쓰기가 있는 배경색이 있지만 평평한 나무에는 그렇지 않습니다.

요약

VS Code를 다운로드하고 처음으로 플랫 트리에 대해 배웠습니다. VS Code가 내 폴더 구조를 우아하게 표시한다는 것을 알았습니다. 목록처럼 보였지만 폴더를 축소/확장할 수 있었습니다. 제가 가장 좋아하는 점은 폴더나 파일 위에 커서를 놓으면 전체 열이 강조 표시된다는 점입니다.

중첩 트리를 사용하면 계층 구조를 기반으로 트리 관련 기능을 쉽게 구현할 수 있습니다.

평평한 나무가 더 깔끔해 보이네요. 간단한 구조로 인해 CSS 스타일을 적용하기 쉽습니다.

각각 장단점이 있으니 필요에 따라 적절한 유형을 선택하세요.

위 내용은 중첩 된 나무 대 평평한 나무의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!