Vanilla.js’de Component Yapısı Kurma (React/Vue Gibi)

Merhabalar, bu yazıda sizlere vanilla js’de React.js veya Vue.js’dekine benzer bir component yapısı kurma hakkında konuşmak istiyorum.

Merhaba bu yazımda javascript ile üzerinde çalıştığım bir projede kurduğum bir yapıdan bahsetmek istiyorum.

Neden Böyle Bir Yapıya İhtiyacımız Olabilir

• Öncelikle benim çalıştığım proje frontend tarafında her hangi bir framework veya library kullanmıyor fakat bazı kısımlarda (özellikle son eklenecek featurada) interaktif işlemler çok fazla oldu. Normal createElement ve appendChild ile de ilerleyebilirdim ama bu şekilde çalışmak işlemleri önemli ölçüde azalttı.

Molecule veya Component

• Gördüğüm çoğu kaynak component olarak bahsediyor fakat bazı kaynaklarda da molecule isminin kullanıldığını gördüm eğer sizde component yerine molecule ismini görürseniz aynı anlama geliyor.
• Javascript içinde html’i formatlı bir şekilde göstermek için leet-html paketini indirebilirsiniz

Örnek Yapı

• Ve kullanımı:

• İlk geçtiğim parametre apiden gelen cevap gerekirse daha çok arg alabiliriz veya almaya da biliriz.
• Key: key aynı react.js de veya vue.js de döngülerde geçtiğimiz key ile aynı o anki dönen elementi seçebilmemizi sağlayacak.
• render fonksiyonu içinde normal html’i dönüyoruz ve parametlerimizi de gönderiyoruz.
• Burda setupun içinde onMounted diye bir fonksiyon var:

• onMounted fonksiyonu aslında sadece callback queue ile alakalı fonksiyonun çalışmasını geciktiriyor. Bu fonksiyon ilk önce çalışmadığı için ondan sonraki render fonksiyonu çalışıyor ve elementimizi doma ekliyoruz daha sonra callback queue boş olduğu için onMounted fonksiyonumuzun içindeki block çalışıyor. Eğer setTimeout ile sarmazsak undefined alabiliriz.
• Bu iki videoyu lütfen izleyin callback ve timeout ile alakalı:

Okuduğunuz için teşekkür ederim ❤️👋👋