🤞🏼 🕥 💅🏿 Penulis JavaScript 🛀🏽 ❗️ 👨🏿‍⚖️

Terjemahan artikel disiapkan untuk mengantisipasi dimulainya kursus “Pengembang JavaScript. Dasar " .

Dalam artikel ini, kami akan memecah salah satu pola desain struktural di JavaScript - linker . Dalam rekayasa perangkat lunak, penaut memungkinkan Anda untuk merujuk ke kelompok objek seolah-olah mereka adalah objek terpisah, yang memastikan bahwa keseluruhan struktur objek ini dan kombinasinya konsisten.

Tugas utama linker adalah menggabungkan banyak objek ke dalam satu struktur pohon . Struktur pohon ini merepresentasikan hierarki dari yang khusus ke keseluruhan .

Untuk lebih memahami cara kerja linker, Anda perlu memahami cara kerja hierarki dari yang khusus hingga yang keseluruhan dan bagaimana hal itu dapat divisualisasikan.

Dalam hierarki dari tertentu ke keseluruhan, setiap objek dalam koleksi adalah bagian dari komposisi keseluruhan . Komposisi umum ini, pada gilirannya, merupakan kumpulan bagian - bagiannya . Hirarki dari yang khusus ke seluruh dibangun sebagai pohon-seperti struktur, di mana setiap individu "daun" atau "node" yang dirasakan dan diproses di sama cara seperti setiap daun lain atau simpul dalam setiap bagian dari pohon. Jadi sekelompok atau kumpulan objek (subpohon lembar / node) juga merupakan daun atau node.

Secara visual, dapat direpresentasikan seperti ini:

Sekarang setelah kita memiliki pemahaman yang lebih jelas tentang hubungan antara private dan keseluruhan, mari kembali ke istilah linker... Kami telah mendefinisikan bahwa penggunaan linker adalah untuk menggabungkan objek yang disebutkan (daun / node) ke dalam pohon sesuai dengan prinsip ini.

Dengan demikian, kita mendapatkan pola desain di mana setiap elemen koleksi juga bisa menyertakan koleksi lain , yang memungkinkan struktur bertingkat dalam untuk dibangun.

Struktur internal

Setiap node di pohon berbagi sekumpulan properti dan metode umum yang memungkinkannya untuk memelihara dan berinteraksi dengan objek individu dengan cara yang sama seperti dengan kumpulan objek. Antarmuka ini mengasumsikan konstruksi algoritme rekursif yang mengulangi semua objek dalam kumpulan komposit.

Di mana pola ini diterapkan?

Pada sistem operasi, pola ini memungkinkan banyak kemungkinan, seperti membuat direktori di dalam direktori.

File (untuk kenyamanan, semua objek dalam direktori dapat dianggap sebagai "elemen" ) adalah daun / node (bagian) dalam keseluruhan komposit (direktori). Subdirektori yang dibuat dalam direktori mirip dengan daun atau simpul yang menyertakan elemen lain seperti video, gambar, dll. Pada saat yang sama, direktori dan subdirektori juga merupakan gabungan , karena merupakan kumpulan dari bagian yang terpisah (objek, file, dll. dll.).

Library populer seperti React atau Vue menggunakan pola ini secara ekstensif untuk membangun antarmuka yang andal dan dapat digunakan kembali. Semua elemen halaman web yang Anda lihat direpresentasikan sebagai komponen . Setiap komponen halaman web adalah daun pohon, dan dapat menggabungkan banyak komponen dengan sendirinya (dalam hal ini, komposit terbentuk , tetapi tetap daun pohon ). Ini adalah alat yang ampuh yang sangat menyederhanakan pengembangan bagi pengguna perpustakaan. Selain itu, ini memungkinkan Anda membuat aplikasi yang dapat diskalakan yang melibatkan banyak objek.

Mengapa template ini menarik?

Singkatnya: Ini sangat kuat.

Linker adalah pola desain yang sangat kuat karena memungkinkan objek diperlakukan sebagai komposit dengan menggunakan antarmuka umum untuk semua objek.

Ini berarti Anda dapat menggunakan kembali objek tanpa takut kemungkinan tidak kompatibel dengan orang lain.

Saat mengembangkan aplikasi, Anda mungkin perlu bekerja dengan objek yang memiliki struktur pohon, dalam hal ini penggunaan pola ini bisa sangat efektif.

Contoh dari

Katakanlah kita sedang mengembangkan aplikasi untuk perusahaan yang membantu dokter mendapatkan sertifikasi untuk platform yang menyediakan layanan kesehatan dari jarak jauh. Prosesnya termasuk mengumpulkan tanda tangan untuk dokumen hukum.

Kami akan bekerja dengan kelas Documentyang akan memiliki properti signaturedengan nilai default false. Jika dokter menandatangani dokumen tersebut, nilai tanda tangan akan diubah menjadi tanda tangannya. Kami juga mendefinisikan metode di kelas ini signyang mengimplementasikan fungsi ini.

Akan terlihat seperti ini Document:

class Document {
  constructor(title) {
    this.title = title
    this.signature = null
  }
  sign(signature) {
    this.signature = signature
  }
}

Sekarang, dengan menggunakan linker, kami akan memberikan dukungan untuk metode yang mirip dengan yang didefinisikan di Document.

class DocumentComposite {
  constructor(title) {
    this.items = []
    if (title) {
      this.items.push(new Document(title))
    }
  }

  add(item) {
    this.items.push(item)
  }

  sign(signature) {
    this.items.forEach((doc) => {
      doc.sign(signature)
    })
  }
}

Sekarang keanggunan template menjadi jelas. Perhatikan dua cuplikan kode terakhir: Mari kita lihat templatnya secara visual:

Bagus! Sepertinya kita berada di jalur yang benar. Apa yang kami dapatkan sesuai dengan skema yang disajikan di atas.

Jadi, struktur pohon kami berisi dua daun / simpul - Documentdan DocumentComposite. Keduanya berbagi antarmuka yang sama dan karenanya bertindak sebagai "bagian" dari pohon komposit tunggal .

Perlu dicatat di sini bahwa simpul daun / pohon yang bukan komposit ( Document) bukanlah kumpulan atau kelompok objek dan oleh karena itu tidak akan melanjutkan percabangan. Namun, daun / node makhlukkomposit, berisi kumpulan bagian (dalam kasus kami adalah items). Juga ingat bahwa Documentkeduanya DocumentCompositeberbagi antarmuka yang sama dan karenanya berbagi metode tanda.

Jadi apa efektivitas dari pendekatan ini? Meskipun DocumentComposite menggunakan satu antarmuka karena menggunakan metode tanda seperti Dokumen, ini mengambil pendekatan yang lebih efisien sambil tetap mencapai tujuan akhirnya.

Jadi, alih-alih struktur seperti ini:

const pr2Form = new Document(
  'Primary Treating Physicians Progress Report (PR2)',
)
const w2Form = new Document('   (W2)')

const forms = []
forms.push(pr2Form)
forms.push(w2Form)

forms.forEach((form) => {
  form.sign('Bobby Lopez')
})

Kita dapat memodifikasi kode dan membuatnya lebih efisien dengan memanfaatkan linker:

const forms = new DocumentComposite()
const pr2Form = new Document(
  '     (PR2)',
)
const w2Form = new Document('   (W2)')
forms.add(pr2Form)
forms.add(w2Form)

forms.sign(' ')

console.log(forms)

Dengan pendekatan ini, kita hanya perlu mengeksekusi tanda satu kali setelah menambahkan semua dokumen yang diperlukan, dan fungsi ini akan menandatangani semua dokumen.

Anda dapat memverifikasi ini dengan melihat output dari fungsi tersebut console.log(forms):

Pada contoh sebelumnya, kita harus menambahkan dokumen ke array secara manual, dan kemudian secara independen mengulang setiap dokumen dan menjalankan fungsi signuntuk menandatanganinya.

Juga, jangan lupa bahwa DocumentCompositedokumen kami mungkin termasuk koleksi.

Jadi saat kami melakukan ini:

forms.add(pr2Form) // 
forms.add(w2Form) //

Skema kami mengambil bentuk berikut:

Kami telah menambahkan dua bentuk, dan sekarang skema ini hampir sepenuhnya identik dengan aslinya:

Namun demikian, pohon kami berhenti tumbuh, karena daun terakhirnya hanya membentuk dua daun, yang tidak sesuai dengan diagram di tangkapan layar terakhir. Jika sebaliknya kita membuat w2form menjadi komposit, seperti yang ditunjukkan di sini:

const forms = new DocumentComposite()
const pr2Form = new Document(
  '     (PR2)',
)
const w2Form = new DocumentComposite('   (W2)')
forms.add(pr2Form)
forms.add(w2Form)

forms.sign(' ')

console.log(forms)