Modern web geli\u015ftirme d\u00fcnyas\u0131nda, s\u00fcrd\u00fcr\u00fclebilir, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturmak temel bir gerekliliktir. Bu hedeflere ula\u015fman\u0131n en \u00f6nemli prensiplerinden biri, “Don’t Repeat Yourself” (DRY) yani “Kendini Tekrar Etme” ilkesidir. DRY prensibi, bir sistemdeki her bilgi par\u00e7as\u0131n\u0131n, her i\u015flevselli\u011fin ve her mant\u0131\u011f\u0131n tek ve a\u00e7\u0131k bir temsiline sahip olmas\u0131 gerekti\u011fini savunur. Bu, kod tekrar\u0131n\u0131 en aza indirerek hatalar\u0131 azalt\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
Vue.js, bile\u015fen tabanl\u0131 yap\u0131s\u0131yla DRY prensibini uygulamak i\u00e7in m\u00fckemmel bir ortam sunar. Ancak, bile\u015fenler aras\u0131nda ortak UI yap\u0131lar\u0131, payla\u015f\u0131lan mant\u0131k veya veri y\u00f6netimi gibi durumlar ortaya \u00e7\u0131kt\u0131\u011f\u0131nda, bu prensibi uygulamak i\u00e7in \u00f6zel ara\u00e7lara ihtiya\u00e7 duyar\u0131z. Vue.js, bu ihtiyac\u0131 kar\u015f\u0131lamak \u00fczere \u00fc\u00e7 temel mekanizma sunar: Slots (Slotlar), Mixins (Mixinler) ve Composition API (Kompozisyon API’si).<\/p>\n
Bu makalede, Vue.js uygulamalar\u0131n\u0131z\u0131 daha DRY hale getirmek i\u00e7in bu \u00fc\u00e7 g\u00fc\u00e7l\u00fc arac\u0131 derinlemesine inceleyece\u011fiz. Her birinin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, avantajlar\u0131n\u0131, dezavantajlar\u0131n\u0131 ve hangi senaryolarda tercih edilmesi gerekti\u011fini detayl\u0131 \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z. Amac\u0131m\u0131z, Vue.js geli\u015ftiricilerine, kod tekrar\u0131n\u0131 azaltma, mod\u00fclerli\u011fi art\u0131rma ve daha kaliteli uygulamalar olu\u015fturma konusunda kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n
DRY prensibi, yaz\u0131l\u0131m geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Bir kod taban\u0131nda ayn\u0131 mant\u0131\u011f\u0131n, ayn\u0131 UI eleman\u0131n\u0131n veya ayn\u0131 veri i\u015fleme s\u00fcrecinin birden fazla yerde tekrarlanmas\u0131, zamanla uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r, hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 y\u00fckseltir ve de\u011fi\u015fiklik yapmay\u0131 kabusa \u00e7evirir. Vue.js gibi bile\u015fen tabanl\u0131 bir framework’te, bu prensibi uygulamak kritik \u00f6neme sahiptir.<\/p>\n
Vue.js uygulamalar\u0131nda kod tekrar\u0131 genellikle iki ana alanda ortaya \u00e7\u0131kar:<\/p>\n
1. Tekrar Eden Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Elemanlar\u0131:<\/strong> Uygulaman\u0131zda s\u0131k\u00e7a kullan\u0131lan kartlar, modal pencereler, buton gruplar\u0131 veya layout yap\u0131lar\u0131 gibi g\u00f6rsel bile\u015fenler. Bu bile\u015fenlerin her seferinde s\u0131f\u0131rdan olu\u015fturulmas\u0131 veya kopyala-yap\u0131\u015ft\u0131r yap\u0131lmas\u0131, hem zaman kayb\u0131na yol a\u00e7ar hem de gelecekteki de\u011fi\u015fiklikleri zorla\u015ft\u0131r\u0131r. DRY prensibini uygulayarak, bu tekrarlar\u0131 ortadan kald\u0131r\u0131r\u0131z. Bunun faydalar\u0131 \u015funlard\u0131r:<\/p>\n * Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Bir mant\u0131k veya UI eleman\u0131 tek bir yerde tan\u0131mland\u0131\u011f\u0131nda, \u00fczerinde yap\u0131lacak bir de\u011fi\u015fiklik sadece o tek noktada yap\u0131l\u0131r ve uygulaman\u0131n her yerine yans\u0131r. Vue.js’in sundu\u011fu Slots, Mixins ve Composition API, bu hedeflere ula\u015fmak i\u00e7in geli\u015ftiricilere g\u00fc\u00e7l\u00fc ara\u00e7lar sa\u011flar. \u015eimdi bu ara\u00e7lar\u0131 s\u0131ras\u0131yla inceleyelim.<\/p>\n Vue.js’teki slotlar, bir bile\u015fenin i\u00e7eri\u011fini dinamik olarak de\u011fi\u015ftirmemize olanak tan\u0131r. Ebeveyn bile\u015fenden \u00e7ocuk bile\u015fene HTML i\u00e7eri\u011fi veya di\u011fer bile\u015fenleri “ge\u00e7irmek” i\u00e7in kullan\u0131l\u0131rlar. Bu, genel bir iskelet veya sarmalay\u0131c\u0131 bile\u015fen olu\u015ftururken, i\u00e7eri\u011fin ebeveyn taraf\u0131ndan belirlenmesini sa\u011flayarak DRY prensibini UI katman\u0131nda uygulamam\u0131za yard\u0131mc\u0131 olur.<\/p>\n Slotlar, bir bile\u015fenin \u015fablonunda yer tutucular tan\u0131mlaman\u0131n bir yoludur. Bir \u00e7ocuk bile\u015fenini kullan\u0131rken, ebeveyn bile\u015fen bu yer tutuculara kendi i\u00e7eri\u011fini enjekte edebilir. Bu, bile\u015fenin g\u00f6rsel yap\u0131s\u0131n\u0131 korurken, i\u00e7eri\u011fini \u00f6zelle\u015ftirmemizi sa\u011flar.<\/p>\n \u00d6rnek:<\/strong> Basit bir
\n2. Tekrar Eden Mant\u0131k (Logic):<\/strong> API istekleri, form do\u011frulama, durum y\u00f6netimi, kullan\u0131c\u0131 etkile\u015fimleri veya belirli bir veri i\u015fleme s\u00fcreci gibi i\u015f mant\u0131\u011f\u0131. Bu mant\u0131\u011f\u0131n farkl\u0131 bile\u015fenlerde benzer \u015fekillerde uygulanmas\u0131, kod tekrar\u0131na ve tutars\u0131zl\u0131klara neden olabilir.<\/p>\n
\n* Okunabilirlik:<\/strong> Daha az tekrar eden kod, daha temiz ve anla\u015f\u0131l\u0131r bir yap\u0131 sunar. Geli\u015ftiriciler, ilgili mant\u0131\u011f\u0131 veya UI’\u0131 tek bir yerden takip edebilir.
\n* Geli\u015ftirme H\u0131z\u0131:<\/strong> Ortak bile\u015fenleri veya mant\u0131k par\u00e7alar\u0131n\u0131 yeniden kullanarak, yeni \u00f6zellikler geli\u015ftirme s\u00fcreci h\u0131zlan\u0131r.
\n* Hata Azaltma:<\/strong> Ayn\u0131 mant\u0131\u011f\u0131n farkl\u0131 yerlerde farkl\u0131 \u015fekillerde uygulanmas\u0131, hata olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Tek bir merkezi yerden y\u00f6netildi\u011finde, hatalar daha kolay tespit edilir ve d\u00fczeltilir.<\/p>\nSlots ile Bile\u015fenleri Esnek Hale Getirme<\/h2>\n
Slotlar Nedir?<\/h3>\n
Card<\/code> bile\u015feni d\u00fc\u015f\u00fcn\u00fcn. Kart\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fc (kenarl\u0131k, g\u00f6lge vb.) ayn\u0131 kalacak, ancak ba\u015fl\u0131\u011f\u0131, g\u00f6vdesi ve altbilgisi her kart i\u00e7in farkl\u0131 olacakt\u0131r.<\/p>\nCard.vue<\/code>:<\/strong><\/p>\n\n