Kotlin Academy · Pelajaran

Membangun DSL HTML/Config yang Aman terhadap Tipe

Implementasikan DSL konfigurasi sederhana menggunakan pola builder dan lambda ekstensi.

Pelajaran 3 dari 414 langkah

Membangun DSL HTML/Config yang Aman terhadap Tipe adalah pelajaran Kotlin Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Kotlin Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Kotlin Academy mencakup 4 pelajaran total.

Tujuan: DSL Praktis

Kami akan membangun DSL pembangun HTML yang minimal tetapi realistis dalam Kotlin. Pola yang sama berlaku untuk objek konfigurasi, perlengkapan pengujian, atau pembangun laporan apa pun. Hasilnya adalah API yang aman secara tipe dan ramah IDE, yang menggantikan penggabungan string.

Mendefinisikan Kelas Dasar Tag

Semua elemen HTML memiliki struktur umum: nama, atribut, dan anak. Mulailah dengan kelas dasar:

open class Tag(val name: String) {
    val attrs = mutableMapOf<String, String>()
    val children = mutableListOf<Tag>()
    fun render(indent: Int = 0): String {
        val pad = " ".repeat(indent)
        val attrStr = if (attrs.isEmpty()) "" else " " + attrs.entries.joinToString(" ") { "${it.key}=\"${it.value}\"" }
        val body = children.joinToString("\n") { it.render(indent + 2) }
        return "$pad<$name$attrStr>\n$body\n$pad</$name>"
    }
}

Menerapkan @DslMarker

Tandai semua kelas pembangun agar cakupan bagian dalam tidak dapat secara tidak sengaja memanggil metode dari cakupan luar:

@DslMarker
annotation class HtmlDsl

@HtmlDsl class Html : Tag("html")
@HtmlDsl class Head : Tag("head")
@HtmlDsl class Body : Tag("body")
@HtmlDsl class Div  : Tag("div")
@HtmlDsl class P   : Tag("p")

Menambahkan Fungsi Pembangun

Setiap kelas tag mendapatkan fungsi ekstensi yang membuat tag anak, menerapkan blok, dan menambahkannya ke dalam anak:

fun Html.head(block: Head.() -> Unit) = Head().also { it.block(); children += it }
fun Html.body(block: Body.() -> Unit) = Body().also { it.block(); children += it }
fun Body.div(block: Div.() -> Unit) = Div().also { it.block(); children += it }
fun Div.p(text: String) = P().also { it.attrs["text"] = text; children += it }

Pembangun html Tingkat Atas

Sediakan titik masuk tingkat atas yang membuat elemen akar dan menerapkan blok pengguna:

fun html(block: Html.() -> Unit): Html {
    val root = Html()
    root.block()
    return root
}

Menggunakan DSL

Hasilnya adalah DSL yang bersih dan mudah dibaca:

val page = html {
    head { }
    body {
        div {
            p("Hello, DSL!")
        }
    }
}
println(page.render())

Menambahkan Atribut

Tambahkan pembantu attr untuk mengatur atribut apa pun secara lancar:

fun Tag.attr(key: String, value: String) { attrs[key] = value }

// Usage
div {
    attr("class", "container")
    p("Content")
}

Pola DSL Konfigurasi

Pola yang sama berlaku untuk objek konfigurasi. Alih-alih tag HTML, gunakan kelas ranah:

class ServerConfig {
    var host = "localhost"
    var port = 8080
    var db: DbConfig? = null
    fun database(block: DbConfig.() -> Unit) { db = DbConfig().apply(block) }
}
fun server(block: ServerConfig.() -> Unit) = ServerConfig().apply(block)

Menyarangkan dan Menggabungkan

Karena setiap fungsi pembangun mengembalikan objek yang dibuat, Anda dapat menggabungkan pembangun dengan bebas. Kedalaman penyaranagan DSL sesuai dengan kedalaman hierarki data.

Mencegah Kesalahan dengan Tipe

Sistem tipe menegakkan struktur: Anda tidak dapat memanggil body { } di dalam Head karena Head tidak memiliki fungsi ekstensi body. Struktur yang tidak valid menjadi kesalahan saat kompilasi.

Merender dan Menguji

Karena DSL menghasilkan pohon objek Kotlin biasa, perenderan dan pengujian menjadi mudah: panggil render() lalu periksa string keluaran, atau telusuri pohon objek dalam pengujian.

Memperluas DSL di Kemudian Hari

Menambahkan tag atau opsi konfigurasi baru hanya memerlukan fungsi ekstensi baru pada kelas penerima yang sesuai. Pemanggilan yang sudah ada tidak terpengaruh—terbuka/tertutup dalam praktiknya.

Pemeriksaan Singkat

Apa yang membuat DSL HTML/konfigurasi Kotlin “aman tipe”?

Jawab di pelajaran interaktif

Ringkasan: Membangun DSL Aman Tipe

Langkah utama:

Tentukan kelas pembangun untuk setiap tingkat hierarki
Beri anotasi dengan @DslMarker untuk mencegah kebocoran penerima
Tulis fungsi ekstensi yang membuat, mengonfigurasi, dan menambahkan objek anak
Sediakan fungsi titik masuk tingkat teratas
Perenderan dan pengujian bekerja pada objek Kotlin biasa

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 51
Pelajaran: 203

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun DSL HTML/Config yang Aman terhadap Tipe” gratis?

Ya — teks lengkap “Membangun DSL HTML/Config yang Aman terhadap Tipe” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Kotlin Academy, upgrade ke CoddyKit PRO. Kursus Kotlin Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun DSL HTML/Config yang Aman terhadap Tipe”?

Implementasikan DSL konfigurasi sederhana menggunakan pola builder dan lambda ekstensi. Kamu berlatih Kotlin Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Kotlin Academy?

Tidak diperlukan pengalaman sebelumnya. Kotlin Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membangun DSL HTML/Config yang Aman terhadap Tipe” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Kotlin Academy ini?

Ya. Setiap pelajaran Kotlin Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Lambda dengan Receiver: Dasar DSL
@DslMarker: Mencegah Kebocoran Receiver
Membangun DSL HTML/Config yang Aman terhadap Tipe
Menguji dan Mengembangkan DSL Tanpa Mengganggu Pengguna

← Kembali ke Kotlin Academy