Pokok bersarang vs pokok rata

Komponen pokok sangat biasa dan praktikal. Adakah anda perasan bahawa tidak semua komponen pokok bersarang?

Latar belakang

Matlamat kami adalah untuk menggambarkan struktur data pokok dalam penyemak imbas.

  // 一个基本的树形数据结构
  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"
          }
        ]
      }
    ]
  };

Ia mempunyai dua nod anak dan setiap nod anak mempunyai nod anak.

Pokok Bersarang

Saya pada mulanya menganggap bahawa struktur komponen pokok itu bersarang. Ini adalah cara paling intuitif untuk menjana struktur pokok. Hanya lelaran melalui struktur data dan tukarkannya kepada elemen HTML.

function nestedTreeGenerator(treeData, depth) {
  const nodes = [];

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

Ia akan menjana struktur HTML berikut. Ini ialah struktur HTML biasa dan kami boleh menambahkan fungsi runtuh/kembangkan pada pokok dengan mudah.

Pokok rata

Pokok rata ialah senarai tetapi kelihatan seperti pokok.

function flatTreeGenerator(treeData, depth, parentId) {
  let nodes = [];

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

Keputusan akhir akan sama seperti yang ditunjukkan di bawah. Saya menyimpan ID nod dan ID induk supaya kami tidak kehilangan maklumat hierarki. Lekukan tidak berlaku secara semula jadi, jadi anda perlu mengendalikannya sendiri.

Contoh penuh

Kedua-dua pokok itu kelihatan sama. Walau bagaimanapun, tuding pada nod pokok dan anda akan melihat tingkah laku yang sedikit berbeza. Pokok bersarang sentiasa mempunyai warna latar belakang dengan lekukan, pokok rata tidak.

Ringkasan

Selepas memuat turun Kod VS, saya belajar tentang pokok rata buat kali pertama. Saya mendapati bahawa Kod VS memaparkan struktur folder saya dengan elegan, ia kelihatan seperti senarai tetapi anda boleh meruntuhkan/mengembangkan folder. Perkara kegemaran saya ialah apabila anda mengarahkan kursor anda pada folder atau fail, keseluruhan lajur diserlahkan.

Menggunakan pokok bersarang, anda boleh melaksanakan fungsi berkaitan pokok dengan mudah padanya berdasarkan struktur hierarkinya.

Pokok rata kelihatan lebih bersih. Oleh kerana strukturnya yang ringkas, mudah untuk menggunakan gaya CSS padanya.

Masing-masing ada kelebihan dan kekurangan, sila pilih jenis yang sesuai mengikut keperluan anda.

Atas ialah kandungan terperinci Pokok bersarang vs pokok rata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!