ماژول‌بندی و تمیز کردن کد

همه‌چی تو main؟ نه داداش، اون دیگه برنامه نیست، انباریه.

درس 9 از 10

تقسیم وظیفه‌ها

تابع render فقط نمایش را انجام دهد، تابع handleClick فقط رویداد را مدیریت کند، و state جایی مشخص نگه داشته شود. اینطوری وقتی پروژه بزرگ شد هنوز می‌فهمی کدام سیم به کجا وصل است.

ساختار تمیز

var message = "سلام"

fun render() {
    document.getElementById("app")?.textContent = message
}

fun updateMessage(value: String) {
    message = value
    render()
}

fun main() {
    updateMessage("کاتلین وب آماده است")
}

خروجی یا نتیجه اجرا

متن app برابر «کاتلین وب آماده است» می‌شود.

نکته کاربردی: تمیز کردن کد از اول، هزینه تغییرات بعدی را کم می‌کند. پروژه وب خیلی زود شلوغ می‌شود؛ حواست باشد.

نتیجه این درس 🎯

حالا کدت قابل نگهداری‌تر شده. درس آخر پروژه نهایی را می‌بندیم.

تمرین! 🧠

یک تابع renderStatus بساز که مقدار status را داخل المنت status نمایش بدهد.

جواب تمرین

var status = "idle"

fun renderStatus() {
    document.getElementById("status")?.textContent = status
}

خروجی جواب

مقدار status داخل المنت status نمایش داده می‌شود.