Yaz\u0131l\u0131m d\u00fcnyas\u0131nda karma\u015f\u0131k sistemler in\u015fa ederken, kodunuzu anla\u015f\u0131l\u0131r, s\u00fcrd\u00fcr\u00fclebilir ve esnek tutmak her zaman b\u00fcy\u00fck bir meydan okumad\u0131r. Peki, nesneleri bir araya getirerek g\u00fc\u00e7l\u00fc ve mod\u00fcler yap\u0131lar olu\u015fturman\u0131n en etkili yolu nedir? “Has-A” ili\u015fkileri, yani kompozisyon, tam da bu noktada devreye giriyor ve kodunuzu daha y\u00f6netilebilir, yeniden kullan\u0131labilir hale getirmenin anahtar\u0131n\u0131 sunuyor. Bu at\u00f6lye \u00e7al\u0131\u015fmas\u0131nda, kompozisyonun temellerinden ileri d\u00fczey uygulamalar\u0131na kadar her \u015feyi ke\u015ffedece\u011fiz.<\/p>\n
G\u00fcn\u00fcm\u00fcz yaz\u0131l\u0131m projeleri giderek daha karma\u015f\u0131k hale geliyor. Bir e-ticaret uygulamas\u0131ndan bir otomasyon sistemine kadar, her yaz\u0131l\u0131m par\u00e7as\u0131 bir\u00e7ok farkl\u0131 bile\u015fenin uyumlu bir \u015fekilde bir araya gelmesiyle \u00e7al\u0131\u015f\u0131r. \u0130\u015fte tam da bu noktada “nesne tabanl\u0131 programlama” (OOP) prensipleri imdad\u0131m\u0131za yeti\u015fir. OOP, ger\u00e7ek d\u00fcnyadaki varl\u0131klar\u0131 yaz\u0131l\u0131m nesneleri olarak modellememize olanak tan\u0131r. Ancak bu nesneler sadece tek ba\u015f\u0131na var olmakla kalmaz, ayn\u0131 zamanda birbirleriyle ili\u015fkiler kurarlar.<\/p>\n
Bu ili\u015fkileri kurman\u0131n iki temel yolu vard\u0131r: Kal\u0131t\u0131m (Inheritance), yani “Is-A” ili\u015fkisi ve Kompozisyon (Composition), yani “Has-A” ili\u015fkisi. Genellikle yeni ba\u015flayan geli\u015ftiriciler, kod tekrar\u0131n\u0131 azaltmak ve esneklik sa\u011flamak amac\u0131yla kal\u0131t\u0131ma y\u00f6nelme e\u011filimindedirler. Oysa kal\u0131t\u0131m, her zaman en iyi \u00e7\u00f6z\u00fcm olmayabilir, hatta bazen kodunuzu daha kat\u0131 ve de\u011fi\u015ftirmesi zor hale getirebilir. \u0130\u015fte bu y\u00fczden kompozisyon, yani “Has-A” ili\u015fkileri, modern yaz\u0131l\u0131m tasar\u0131m\u0131nda giderek daha fazla \u00f6nem kazanmaktad\u0131r.<\/p>\n
Kompozisyon, bir nesnenin ba\u015fka bir nesneyi “i\u00e7ermesi” veya “sahip olmas\u0131” anlam\u0131na gelir. \u00d6rne\u011fin, bir “Araba” nesnesinin bir “Motor” nesnesine sahip olmas\u0131, bir “Bilgisayar” nesnesinin bir “\u0130\u015flemci” nesnesine sahip olmas\u0131 gibi. Bu yakla\u015f\u0131m, sisteminizi daha k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara ay\u0131rman\u0131za olanak tan\u0131r. B\u00f6ylece, bir bile\u015fende yap\u0131lan de\u011fi\u015fikliklerin sistemin di\u011fer b\u00f6l\u00fcmlerini beklenmedik \u015fekilde etkileme riskini azalt\u0131rs\u0131n\u0131z. Ayr\u0131ca, bu modularite, kod taban\u0131n\u0131z\u0131n okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu makalede, “Has-A” ili\u015fkilerinin g\u00fcc\u00fcn\u00fc ve yaz\u0131l\u0131m projelerinize nas\u0131l entegre edebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Haydi, sa\u011flam ve esnek yaz\u0131l\u0131m yap\u0131lar\u0131 in\u015fa etme yolculu\u011fumuza ba\u015flayal\u0131m!<\/p>\n
“Has-A” ili\u015fkisi, nesne tabanl\u0131 programlaman\u0131n temel yap\u0131 ta\u015flar\u0131ndan biridir ve bir nesnenin, ba\u015fka bir nesneyi kendi i\u00e7inde bir \u00f6zellik (property) olarak bar\u0131nd\u0131rmas\u0131n\u0131 ifade eder. Teknik dilde buna “kompozisyon” denir. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, bir nesne ba\u015fka bir nesnenin i\u015flevselli\u011fini “kullan\u0131r” veya ona “sahiptir”. Bu, iki nesne aras\u0131nda g\u00fc\u00e7l\u00fc bir ba\u011f kurmak yerine, bir nesnenin di\u011ferine delegasyon yapmas\u0131na olanak tan\u0131r. Yani, bir nesne belirli bir g\u00f6revi yerine getirmek i\u00e7in di\u011fer nesnenin y\u00f6ntemlerini \u00e7a\u011f\u0131r\u0131r.<\/p>\n
Peki, bu neden bu kadar kritik? Cevap, yaz\u0131l\u0131m tasar\u0131m prensiplerinde sakl\u0131d\u0131r: Kat\u0131 Olmayan Yap\u0131lar (Loose Coupling)<\/strong> ve Y\u00fcksek Ba\u011fda\u015f\u0131kl\u0131k (High Cohesion)<\/strong>. Kompozisyon, nesneler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 en aza indirir. Bir nesne, ba\u015fka bir nesnenin belirli bir t\u00fcr\u00fc olmak zorunda de\u011fildir; sadece onun aray\u00fcz\u00fcn\u00fc kullan\u0131r. Bu durum, bile\u015fenlerin birbirlerinden daha ba\u011f\u0131ms\u0131z olmas\u0131n\u0131 sa\u011flar ve bu da de\u011fi\u015fimin y\u00f6netimini kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir “E-posta Bildirimi” bile\u015feniniz oldu\u011funu varsayal\u0131m. Bu bile\u015fen, e-posta g\u00f6nderme i\u015fini yapan farkl\u0131 bir “E-posta G\u00f6nderici” servisine sahip olabilir. E\u011fer daha sonra e-posta g\u00f6nderim y\u00f6nteminizi de\u011fi\u015ftirmek isterseniz (\u00f6rne\u011fin, farkl\u0131 bir API kullanmaya ba\u015flamak), sadece “E-posta G\u00f6nderici” servisini de\u011fi\u015ftirmeniz yeterli olur, “E-posta Bildirimi” bile\u015feninin i\u00e7 mant\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirmek zorunda kalmazs\u0131n\u0131z. Bu esneklik, b\u00fcy\u00fck ve uzun \u00f6m\u00fcrl\u00fc projelerde paha bi\u00e7ilmezdir.<\/p>\n Ayr\u0131ca, kompozisyon yeniden kullan\u0131labilirli\u011fi art\u0131r\u0131r. Bir kez olu\u015fturdu\u011funuz bir bile\u015feni, farkl\u0131 ba\u011flamlarda ve farkl\u0131 ana nesnelerin i\u00e7inde rahatl\u0131kla kullanabilirsiniz. Kal\u0131t\u0131mda ise durum biraz farkl\u0131d\u0131r; bir s\u0131n\u0131f\u0131 miras ald\u0131\u011f\u0131n\u0131zda, o s\u0131n\u0131f\u0131n t\u00fcm davran\u0131\u015flar\u0131n\u0131 ve \u00f6zelliklerini devral\u0131rs\u0131n\u0131z. Bu, bazen ihtiyac\u0131n\u0131z olmayan \u015feyleri de beraberinde getirebilir ve “ana s\u0131n\u0131f\u0131n sorunlar\u0131” olarak bilinen problemlere yol a\u00e7abilir. Kompozisyonda ise sadece ihtiyac\u0131n\u0131z olan i\u015flevsellikleri i\u00e7eren nesneleri bir araya getirirsiniz, bu da sisteminizin daha yal\u0131n ve amaca y\u00f6nelik olmas\u0131n\u0131 sa\u011flar.<\/p>\n Sonu\u00e7 olarak, “Has-A” ili\u015fkileri, yaz\u0131l\u0131m tasar\u0131m\u0131nda daha esnek, s\u00fcrd\u00fcr\u00fclebilir ve y\u00f6netilebilir yap\u0131lar olu\u015fturman\u0131n temelini olu\u015fturur. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 azaltarak ve mod\u00fclerli\u011fi te\u015fvik ederek, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131r\u0131r ve gelecekteki de\u011fi\u015fikliklere daha kolay adapte olman\u0131z\u0131 sa\u011flar. \u015eimdi gelin, bu g\u00fc\u00e7l\u00fc prensibi ger\u00e7ek kod \u00f6rnekleri \u00fczerinden nas\u0131l uygulayabilece\u011fimize bir g\u00f6z atal\u0131m.<\/p>\n “Has-A” ili\u015fkilerini koda d\u00f6kmek, asl\u0131nda olduk\u00e7a basittir ve bir\u00e7ok programlama dilinde benzer prensiplerle uygulan\u0131r. Temel fikir, bir s\u0131n\u0131f\u0131n (ana s\u0131n\u0131f), ba\u015fka bir s\u0131n\u0131f\u0131n (yard\u0131mc\u0131 s\u0131n\u0131f) bir \u00f6rne\u011fini (instance) kendi i\u00e7inde bir \u00f6zellik olarak bar\u0131nd\u0131rmas\u0131d\u0131r. Bu, ana s\u0131n\u0131f\u0131n yard\u0131mc\u0131 s\u0131n\u0131f\u0131n yeteneklerini kullanabilmesini sa\u011flar. \u015eimdi, bu prensibi daha iyi anlamak i\u00e7in iki farkl\u0131 ger\u00e7ek d\u00fcnya senaryosu \u00fczerinden ad\u0131m ad\u0131m ilerleyelim.<\/p>\n Bir araba d\u00fc\u015f\u00fcnelim. Bir araba \u00e7al\u0131\u015fmak i\u00e7in bir motora ihtiya\u00e7 duyar. Motor, araban\u0131n bir par\u00e7as\u0131d\u0131r ve araban\u0131n temel i\u015flevlerinden biri olan hareket etmeyi sa\u011flar. Bu, a\u00e7\u0131k\u00e7a bir “Has-A” ili\u015fkisidir: “Bir Araba, Bir Motora Sahiptir.” Bu senaryoyu kodda nas\u0131l modelleriz?<\/p>\n <\/code><\/p>\n Yukar\u0131daki JavaScript \u00f6rne\u011finde, Daha karma\u015f\u0131k bir \u00f6rnek olarak, bir bilgisayar\u0131 ve onun bile\u015fenlerini ele alal\u0131m. Bir bilgisayar genellikle bir \u0130\u015flemci (CPU), Bellek (RAM) ve Depolama birimine (SSD\/HDD) sahiptir. Bu, bir\u00e7ok \"Has-A\" ili\u015fkisinin bir araya geldi\u011fi g\u00fczel bir \u00f6rnektir.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Bu iki \u00f6rnek, \"Has-A\" ili\u015fkilerinin kodunuzu nas\u0131l daha mod\u00fcler, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay hale getirdi\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Bu yakla\u015f\u0131m, yaz\u0131l\u0131m\u0131n farkl\u0131 par\u00e7alar\u0131n\u0131 birbirinden izole ederek, b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde geli\u015ftirme h\u0131z\u0131n\u0131 ve sistemin genel stabilitesini art\u0131r\u0131r.<\/p>\n Nesne tabanl\u0131 programlamada, nesneler aras\u0131 ili\u015fkileri kurman\u0131n iki temel yolu vard\u0131r: Kompozisyon (\"Has-A\") ve Kal\u0131t\u0131m (\"Is-A\"). Her ikisinin de kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 bulunur ve do\u011fru senaryoda do\u011fru ili\u015fkiyi kullanmak, sa\u011flam bir yaz\u0131l\u0131m mimarisi olu\u015fturman\u0131n anahtar\u0131d\u0131r. \"Is-A\" ili\u015fkisi, bir nesnenin ba\u015fka bir nesnenin \u00f6zelle\u015fmi\u015f bir t\u00fcr\u00fc oldu\u011funu ifade eder. \u00d6rne\u011fin, \"Kedi bir Hayvan'd\u0131r.\" Bu durumda \u00d6te yandan, daha \u00f6nce de bahsetti\u011fimiz gibi, \"Has-A\" ili\u015fkisi, bir nesnenin ba\u015fka bir nesneyi kendi i\u00e7inde bir bile\u015fen olarak bar\u0131nd\u0131rmas\u0131n\u0131 ifade eder. \u00d6rne\u011fin, \"Bir Araba bir Motora sahiptir.\" Kompozisyon, nesneler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 gev\u015fetir ve sistemin daha mod\u00fcler olmas\u0131n\u0131 sa\u011flar. Bu yakla\u015f\u0131m, genellikle \"Kal\u0131t\u0131m yerine Kompozisyonu tercih et\" (Favor Composition over Inheritance) prensibiyle \u00f6zetlenir, \u00e7\u00fcnk\u00fc daha fazla esneklik ve s\u00fcrd\u00fcr\u00fclebilirlik sunar.<\/p>\n Peki, ne zaman hangisini kullanmal\u0131y\u0131z? \u0130\u015fte size yol g\u00f6sterici birka\u00e7 ilke:<\/p>\n \u00d6zetle, kal\u0131t\u0131m g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r, ancak dikkatli kullan\u0131lmal\u0131d\u0131r. Kompozisyon ise \u00e7o\u011fu durumda daha esnek, mod\u00fcler ve bak\u0131m\u0131 kolay sistemler olu\u015fturman\u0131z\u0131 sa\u011flar. Modern yaz\u0131l\u0131m geli\u015ftirme pratikleri, genellikle \"Has-A\" ili\u015fkilerine daha fazla a\u011f\u0131rl\u0131k verilmesini tavsiye eder. Bu sayede, gelecekteki de\u011fi\u015fikliklere daha a\u00e7\u0131k, geni\u015fletilebilir ve sa\u011flam bir kod taban\u0131na sahip olabilirsiniz.<\/p>\n Teorik bilgiler ve basit \u00f6rnekler \"Has-A\" ili\u015fkilerinin temellerini anlamam\u0131za yard\u0131mc\u0131 olsa da, kompozisyonun ger\u00e7ek g\u00fcc\u00fc b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k yaz\u0131l\u0131m projelerinde ortaya \u00e7\u0131kar. Bu b\u00f6l\u00fcmde, kompozisyonun pratik uygulamalar\u0131n\u0131 ve kar\u015f\u0131la\u015f\u0131lan yayg\u0131n sorunlara nas\u0131l \u00e7\u00f6z\u00fcmler sundu\u011funu ger\u00e7ek d\u00fcnya senaryolar\u0131 \u00fczerinden inceleyece\u011fiz.<\/p>\n Bir e-ticaret uygulamas\u0131n\u0131 d\u00fc\u015f\u00fcnelim. Bu uygulamada \"Sipari\u015f\" ad\u0131nda merkezi bir nesnemiz var. Bir sipari\u015fin bir\u00e7ok farkl\u0131 y\u00f6n\u00fc bulunur: \u00fcr\u00fcnler, m\u00fc\u015fteri bilgileri, \u00f6deme bilgileri, kargo bilgileri, indirimler ve sipari\u015f durumu gibi. E\u011fer bu bilgilerin hepsini tek bir Kompozisyon Yakla\u015f\u0131m\u0131:<\/strong><\/p>\n <\/code><\/p>\n Bu vaka analizinde, Kompozisyonun Faydalar\u0131 Bu Senaryoda:<\/strong><\/p>\n Bu \u00f6rnek, kompozisyonun sadece teorik bir konsept olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda ger\u00e7ek d\u00fcnya yaz\u0131l\u0131m projelerinde kar\u015f\u0131la\u015f\u0131lan karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in ne kadar g\u00fc\u00e7l\u00fc ve pratik bir ara\u00e7 oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. B\u00fcy\u00fck sistemleri daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir ve esnek par\u00e7alara ay\u0131rarak, geli\u015ftirme s\u00fcrecini optimize eder ve uzun vadede kod taban\u0131n\u0131n sa\u011fl\u0131\u011f\u0131n\u0131 korur.<\/p>\n \"Has-A\" ili\u015fkileri, yani kompozisyon, temel bir prensip olsa da, modern yaz\u0131l\u0131m geli\u015ftirmede bu prensibi daha da g\u00fc\u00e7l\u00fc k\u0131lan ileri d\u00fczey teknikler bulunmaktad\u0131r. \u00d6zellikle dinamik kompozisyon ve ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu (Dependency Injection - DI), esnek ve test edilebilir uygulamalar olu\u015fturmak i\u00e7in vazge\u00e7ilmez ara\u00e7lard\u0131r. Bu teknikler, nesnelerin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 \u00e7al\u0131\u015fma zaman\u0131nda y\u00f6netmemize ve b\u00f6ylece daha adaptif sistemler kurmam\u0131za olanak tan\u0131r.<\/p>\n \u00d6nceki \u00f6rneklerimizde, bir nesnenin sahip oldu\u011fu di\u011fer nesneler genellikle yap\u0131c\u0131 (constructor) metot i\u00e7inde do\u011frudan olu\u015fturuluyordu. \u00d6rne\u011fin, Dinamik kompozisyon, bir nesnenin sahip oldu\u011fu bile\u015fenleri ko\u015fullara veya kullan\u0131c\u0131n\u0131n se\u00e7imine g\u00f6re de\u011fi\u015ftirebilme yetene\u011fini ifade eder. Bu, genellikle strateji deseni (Strategy Pattern) veya dekorat\u00f6r deseni (Decorator Pattern) gibi tasar\u0131m kal\u0131plar\u0131 ile birlikte kullan\u0131l\u0131r. \u00d6rne\u011fin, bir \"Bildirim Sistemi\" d\u00fc\u015f\u00fcnelim. Bu sistem, duruma g\u00f6re e-posta, SMS veya anl\u0131k bildirim g\u00f6nderebilir. <\/code><\/p>\n Bu \u00f6rnekte Dinamik kompozisyonun en yayg\u0131n ve etkili uygulama bi\u00e7imlerinden biri Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonudur. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu, bir nesnenin ihtiya\u00e7 duydu\u011fu di\u011fer nesneleri (ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131) kendi i\u00e7inde olu\u015fturmak yerine, d\u0131\u015far\u0131dan almas\u0131 prensibine dayan\u0131r. Bu, yukar\u0131daki DI'nin temel faydalar\u0131 \u015funlard\u0131r:<\/p>\n DI genellikle \u00fc\u00e7 ana \u015fekilde uygulan\u0131r:<\/p>\n <\/code><\/p>\n Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu ve dinamik kompozisyon, yaz\u0131l\u0131m tasar\u0131m\u0131nda \"kontrolleri tersine \u00e7evirme\" (Inversion of Control - IoC) prensibini uygulamam\u0131z\u0131 sa\u011flar. Yani, bir nesnenin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kendisinin olu\u015fturmas\u0131 yerine, bu ba\u011f\u0131ml\u0131l\u0131klar d\u0131\u015far\u0131dan sa\u011flan\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k kurumsal uygulamalarda, bile\u015fenlerin y\u00f6netimini ve test edilebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu teknikleri ustaca kullanmak, ger\u00e7ekten esnek, s\u00fcrd\u00fcr\u00fclebilir ve y\u00fcksek kaliteli yaz\u0131l\u0131mlar geli\u015ftirmenin yolunu a\u00e7ar.<\/p>\n G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda, bir web uygulamas\u0131n\u0131n veya aray\u00fcz\u00fcn\u00fcn mobil cihazlarda da sorunsuz \u00e7al\u0131\u015fmas\u0131 kritik \u00f6nem ta\u015f\u0131r. Responsive tasar\u0131m (duyarl\u0131 tasar\u0131m), i\u00e7eri\u011fin farkl\u0131 ekran boyutlar\u0131na ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklere otomatik olarak uyum sa\u011flamas\u0131 prensibine dayan\u0131r. Peki, yaz\u0131l\u0131m tasar\u0131m\u0131ndaki \"Has-A\" ili\u015fkileri, yani kompozisyon, mobil uyumlu ve responsive tasar\u0131mlarla nas\u0131l bir araya gelir?<\/p>\n Kompozisyon prensibi, UI (Kullan\u0131c\u0131 Aray\u00fcz\u00fc) bile\u015fenlerinin tasar\u0131m\u0131nda da b\u00fcy\u00fck rol oynar. Modern frontend \u00e7at\u0131lar\u0131nda (React, Vue, Angular gibi), UI'lar genellikle k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z bile\u015fenlerden (component) olu\u015fur. Bu bile\u015fenler, daha b\u00fcy\u00fck ve karma\u015f\u0131k UI yap\u0131lar\u0131n\u0131 olu\u015fturmak i\u00e7in bir araya getirilir; bu da asl\u0131nda bir kompozisyon \u00f6rne\u011fidir. \u00d6rne\u011fin, bir \"Kart\" bile\u015feni, bir \"Ba\u015fl\u0131k\", bir \"G\u00f6rsel\", bir \"A\u00e7\u0131klama\" ve bir \"Buton\" bile\u015fenine sahip olabilir. Her biri kendi stil ve davran\u0131\u015f\u0131na sahip ayr\u0131 birer \"Has-A\" ili\u015fkisiyle Kart bile\u015fenine eklenir.<\/p>\n Responsive tasar\u0131m, bu bile\u015fenlerin farkl\u0131 ekran boyutlar\u0131nda nas\u0131l g\u00f6r\u00fcnece\u011fini ve davranaca\u011f\u0131n\u0131 belirlemek i\u00e7in CSS medya sorgular\u0131n\u0131 (media queries) kullan\u0131r. Kompozisyon sayesinde, her bir UI bile\u015feni kendi responsive davran\u0131\u015f\u0131n\u0131 kaps\u00fclleyebilir veya ana bile\u015fen (\u00f6rne\u011fin Kompozisyon ve Responsive Tasar\u0131m\u0131n Birle\u015fimi \u0130\u00e7in \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n Mobil Uyumlu Bir HTML ve CSS Kompozisyonu \u00d6rne\u011fi:<\/strong><\/p>\n A\u015fa\u011f\u0131da, bir \u00fcr\u00fcn kart\u0131 bile\u015feninin nas\u0131l kompozisyon ve responsive tasar\u0131m ilkeleriyle olu\u015fturulabilece\u011fine dair basit bir \u00f6rnek bulunmaktad\u0131r. Bu \u00f6rnekte Uygulamal\u0131 K\u0131s\u0131m: ‘Has-A’ \u0130li\u015fkilerini Kodda Nas\u0131l Uygular\u0131z?<\/h2>\n
\u00d6rnek 1: Araba ve Motor \u0130li\u015fkisi (Bir Araba Bir Motora Sahiptir)<\/h3>\n
\nclass Motor {\n constructor(guc) {\n this.guc = guc;\n }\n\n calistir() {\n console.log(Motor ${this.guc} beygir g\u00fcc\u00fcyle \u00e7al\u0131\u015f\u0131yor.<\/code>);\n }\n\n durdur() {\n console.log(\"Motor durduruldu.\");\n }\n}\n\nclass Araba {\n constructor(marka, model, motorGucu) {\n this.marka = marka;\n this.model = model;\n \/\/ \u0130\u015fte \"Has-A\" ili\u015fkisi! Araba, bir Motor nesnesine sahip.\n this.motor = new Motor(motorGucu); \n }\n\n kontagiCevir() {\n console.log(${this.marka} ${this.model} konta\u011f\u0131 \u00e7evrildi.<\/code>);\n this.motor.calistir(); \/\/ Araba, motorunun i\u015flevselli\u011fini kullan\u0131r.\n }\n\n parkEt() {\n console.log(${this.marka} ${this.model} park ediliyor.<\/code>);\n this.motor.durdur(); \/\/ Araba, motorunu durdurur.\n }\n\n \/\/ Araba'n\u0131n kendi metodlar\u0131\n sur() {\n if (this.motor) { \/\/ Motor var m\u0131 kontrol\u00fc\n console.log(${this.marka} ${this.model} ile yolculuk yap\u0131l\u0131yor.<\/code>);\n } else {\n console.log(\"Araba motoru olmad\u0131\u011f\u0131 i\u00e7in hareket edemiyor.\");\n }\n }\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\nconst benimArabam = new Araba(\"Honda\", \"Civic\", \"150HP\");\nbenimArabam.kontagiCevir();\nbenimArabam.sur();\nbenimArabam.parkEt();\n\nconst sporAraba = new Araba(\"Porsche\", \"911\", \"450HP\");\nsporAraba.kontagiCevir();\n<\/pre>\nAraba<\/code> s\u0131n\u0131f\u0131, Motor<\/code> s\u0131n\u0131f\u0131n\u0131n bir \u00f6rne\u011fini (this.motor<\/code>) kendi b\u00fcnyesinde bar\u0131nd\u0131r\u0131r. Araba<\/code> s\u0131n\u0131f\u0131, motorun calistir()<\/code> ve durdur()<\/code> metodlar\u0131n\u0131 \u00e7a\u011f\u0131rarak kendi i\u015flevselli\u011fini yerine getirir. Bu, Araba<\/code> s\u0131n\u0131f\u0131n\u0131n Motor<\/code> s\u0131n\u0131f\u0131na do\u011frudan ba\u011f\u0131ml\u0131 olmas\u0131n\u0131 engeller, sadece onun sundu\u011fu aray\u00fcz\u00fc kullan\u0131r. E\u011fer bir g\u00fcn farkl\u0131 bir tip motor (\u00f6rne\u011fin elektrikli motor) kullanmak istersek, Motor<\/code> s\u0131n\u0131f\u0131n\u0131 g\u00fcncelleyebilir veya yeni bir ElektrikliMotor<\/code> s\u0131n\u0131f\u0131 olu\u015fturup Araba<\/code> s\u0131n\u0131f\u0131ndaki Motor<\/code> nesnesini bununla de\u011fi\u015ftirebiliriz. Araba<\/code> s\u0131n\u0131f\u0131n\u0131n temel mant\u0131\u011f\u0131nda b\u00fcy\u00fck bir de\u011fi\u015fiklik yapmam\u0131za gerek kalmaz.<\/p>\n\u00d6rnek 2: Bilgisayar ve Bile\u015fenleri \u0130li\u015fkisi (Bir Bilgisayar Bir CPU, RAM ve Depolamaya Sahiptir)<\/h3>\n
\nclass CPU {\n constructor(model) {\n this.model = model;\n }\n islemYap() {\n console.log(${this.model} i\u015flemci hesaplamalar yap\u0131yor.<\/code>);\n }\n}\n\nclass RAM {\n constructor(boyutGB) {\n this.boyutGB = boyutGB;\n }\n veriDepola() {\n console.log(${this.boyutGB}GB RAM verileri depoluyor.<\/code>);\n }\n}\n\nclass Depolama {\n constructor(tip, kapasiteGB) {\n this.tip = tip; \/\/ SSD, HDD\n this.kapasiteGB = kapasiteGB;\n }\n veriYazOku() {\n console.log(${this.tip} (${this.kapasiteGB}GB) veri yaz\u0131p okuyor.<\/code>);\n }\n}\n\nclass Bilgisayar {\n constructor(marka, cpuModeli, ramBoyutu, depolamaTipi, depolamaKapasitesi) {\n this.marka = marka;\n \/\/ Birden \u00e7ok \"Has-A\" ili\u015fkisi\n this.cpu = new CPU(cpuModeli);\n this.ram = new RAM(ramBoyutu);\n this.depolama = new Depolama(depolamaTipi, depolamaKapasitesi);\n }\n\n baslat() {\n console.log(${this.marka} Bilgisayar ba\u015flat\u0131l\u0131yor...<\/code>);\n this.cpu.islemYap();\n this.ram.veriDepola();\n this.depolama.veriYazOku();\n console.log(\"Sistem haz\u0131r!\");\n }\n\n uygulamayiCalistir(uygulamaAdi) {\n console.log(${uygulamaAdi} uygulamas\u0131 \u00e7al\u0131\u015ft\u0131r\u0131l\u0131yor.<\/code>);\n this.cpu.islemYap(); \/\/ Uygulama \u00e7al\u0131\u015f\u0131rken CPU kullan\u0131r\n this.ram.veriDepola(); \/\/ Uygulama \u00e7al\u0131\u015f\u0131rken RAM kullan\u0131r\n }\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\nconst benimBilgisayarim = new Bilgisayar(\"HP\", \"Intel i7\", 16, \"SSD\", 512);\nbenimBilgisayarim.baslat();\nbenimBilgisayarim.uygulamayiCalistir(\"Foto\u011fraf D\u00fczenleyici\");\n\nconst oyunBilgisayari = new Bilgisayar(\"MSI\", \"AMD Ryzen 9\", 32, \"NVMe SSD\", 1024);\noyunBilgisayari.baslat();\n<\/pre>\nBilgisayar<\/code> s\u0131n\u0131f\u0131, CPU<\/code>, RAM<\/code> ve Depolama<\/code> s\u0131n\u0131flar\u0131n\u0131n \u00f6rneklerini i\u00e7erir. Her bile\u015fen kendi i\u015flevselli\u011finden sorumludur ve Bilgisayar<\/code> s\u0131n\u0131f\u0131 bu bile\u015fenlerin i\u015flevlerini bir araya getirerek daha b\u00fcy\u00fck bir i\u015flevsellik (bilgisayar\u0131 ba\u015flatma, uygulama \u00e7al\u0131\u015ft\u0131rma) sunar. Bu tasar\u0131m, her bir bile\u015fenin ba\u011f\u0131ms\u0131z olarak geli\u015ftirilip test edilmesine olanak tan\u0131r ve bilgisayar\u0131n \u00f6zelliklerini de\u011fi\u015ftirmek istedi\u011fimizde (\u00f6rne\u011fin daha b\u00fcy\u00fck bir RAM eklemek) yaln\u0131zca ilgili bile\u015fen s\u0131n\u0131f\u0131n\u0131 veya Bilgisayar<\/code> s\u0131n\u0131f\u0131n\u0131n constructor'\u0131n\u0131 de\u011fi\u015ftirmemiz yeterli olur.<\/p>\n\"Has-A\" ve \"Is-A\" Aras\u0131ndaki Fark\u0131 Anlamak: Ne Zaman Hangisini Kullanmal\u0131y\u0131z?<\/h2>\n
Kedi<\/code> s\u0131n\u0131f\u0131 Hayvan<\/code> s\u0131n\u0131f\u0131ndan miras al\u0131r. Kal\u0131t\u0131m, kod tekrar\u0131n\u0131 azaltmak ve hiyerar\u015fik bir yap\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Ancak, fazla kullan\u0131ld\u0131\u011f\u0131nda veya yanl\u0131\u015f senaryolarda uyguland\u0131\u011f\u0131nda \"miras hiyerar\u015fisi patlamas\u0131\" gibi sorunlara yol a\u00e7abilir, bu da kodu esnek olmayan ve de\u011fi\u015ftirmesi zor bir hale getirebilir.<\/p>\n\n
\n
Kare<\/code> bir \u015eekil<\/code>dir, \u00d6\u011fretmen<\/code> bir \u00c7al\u0131\u015fan<\/code>d\u0131r.<\/li>\n\n
Araba<\/code>n\u0131n Motor<\/code>a sahip olmas\u0131.<\/li>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: B\u00fcy\u00fck Projelerde Kompozisyonun G\u00fcc\u00fc<\/h2>\n
Vaka Analizi: E-Ticaret Uygulamas\u0131nda Sipari\u015f Y\u00f6netimi<\/h3>\n
Sipari\u015f<\/code> s\u0131n\u0131f\u0131n\u0131n i\u00e7ine s\u0131k\u0131\u015ft\u0131rmaya \u00e7al\u0131\u015f\u0131rsak, s\u0131n\u0131f\u0131m\u0131z devasa ve y\u00f6netilemez bir hale gelir. \u0130\u015fte bu noktada kompozisyon devreye girer.<\/p>\n\n\/\/ Sipari\u015fin her bir bile\u015feni ayr\u0131 bir s\u0131n\u0131f olarak modellenir\nclass Urun {\n constructor(id, ad, fiyat) {\n this.id = id;\n this.ad = ad;\n this.fiyat = fiyat;\n }\n}\n\nclass SepetItem {\n constructor(urun, miktar) {\n this.urun = urun; \/\/ Has-A: SepetItem bir Urune sahiptir\n this.miktar = miktar;\n }\n toplamFiyat() {\n return this.urun.fiyat * this.miktar;\n }\n}\n\nclass MusteriBilgileri {\n constructor(ad, soyad, eposta) {\n this.ad = ad;\n this.soyad = soyad;\n this.eposta = eposta;\n }\n}\n\nclass OdemeBilgileri {\n constructor(odemeTipi, tutar) {\n this.odemeTipi = odemeTipi;\n this.tutar = tutar;\n }\n odemeYap() {\n console.log(${this.odemeTipi} ile ${this.tutar} TL \u00f6deme yap\u0131ld\u0131.<\/code>);\n \/\/ Ger\u00e7ek bir \u00f6deme i\u015fleme mant\u0131\u011f\u0131 buraya gelir\n }\n}\n\nclass KargoBilgileri {\n constructor(adres, kargoSirketi) {\n this.adres = adres;\n this.kargoSirketi = kargoSirketi;\n }\n kargoyuTakipEt() {\n console.log(${this.kargoSirketi} ile ${this.adres} adresine kargo takip ediliyor.<\/code>);\n }\n}\n\nclass Siparis {\n constructor(siparisId, musteri, sepetItems, odeme, kargo) {\n this.siparisId = siparisId;\n this.musteri = musteri; \/\/ Has-A: Siparis bir MusteriBilgilerine sahiptir\n this.sepetItems = sepetItems; \/\/ Has-A: Siparis bir SepetItem listesine sahiptir\n this.odeme = odeme; \/\/ Has-A: Siparis bir OdemeBilgilerine sahiptir\n this.kargo = kargo; \/\/ Has-A: Siparis bir KargoBilgilerine sahiptir\n this.durum = \"Beklemede\";\n }\n\n toplamSiparisTutari() {\n return this.sepetItems.reduce((acc, item) => acc + item.toplamFiyat(), 0);\n }\n\n siparisOnayla() {\n if (this.odeme.odemeYap()) { \/\/ \u00d6deme ba\u015far\u0131l\u0131ysa\n this.durum = \"Onayland\u0131\";\n console.log(Sipari\u015f ${this.siparisId} onayland\u0131.<\/code>);\n \/\/ Kargo i\u015flemlerini ba\u015flat\n this.kargo.kargoyuTakipEt();\n } else {\n console.log(Sipari\u015f ${this.siparisId} \u00f6deme hatas\u0131 nedeniyle onaylanamad\u0131.<\/code>);\n }\n }\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\nconst urun1 = new Urun(\"P001\", \"Laptop\", 12000);\nconst urun2 = new Urun(\"P002\", \"Mouse\", 250);\n\nconst sepet = [\n new SepetItem(urun1, 1),\n new SepetItem(urun2, 2)\n];\n\nconst musteri = new MusteriBilgileri(\"Ahmet\", \"Y\u0131lmaz\", \"ahmet@example.com\");\nconst odeme = new OdemeBilgileri(\"Kredi Kart\u0131\", 12500); \/\/ Sepet toplam\u0131 + kargo\/indirim\nconst kargo = new KargoBilgileri(\"\u0130stanbul, T\u00fcrkiye\", \"H\u0131zl\u0131 Kargo A.\u015e.\");\n\nconst yeniSiparis = new Siparis(\"S001\", musteri, sepet, odeme, kargo);\nconsole.log(Sipari\u015f ${yeniSiparis.siparisId} Toplam Tutar\u0131: ${yeniSiparis.toplamSiparisTutari()} TL<\/code>);\nyeniSiparis.siparisOnayla();\nconsole.log(Sipari\u015f Durumu: ${yeniSiparis.durum}<\/code>);\n<\/pre>\nSipari\u015f<\/code> s\u0131n\u0131f\u0131 tek bir b\u00fcy\u00fck nesne olmaktan ziyade, MusteriBilgileri<\/code>, OdemeBilgileri<\/code>, KargoBilgileri<\/code> ve SepetItem<\/code> gibi daha k\u00fc\u00e7\u00fck ve \u00f6zel nesnelerin bir koleksiyonudur. Her bir k\u00fc\u00e7\u00fck nesne kendi sorumlulu\u011funu \u00fcstlenir ve Sipari\u015f<\/code> s\u0131n\u0131f\u0131 bu bile\u015fenlerin i\u015flevselli\u011fini bir araya getirerek genel bir sipari\u015f y\u00f6netim ak\u0131\u015f\u0131 olu\u015fturur.<\/p>\n\n
OdemeBilgileri<\/code> s\u0131n\u0131f\u0131 sadece \u00f6deme ile ilgili detaylar\u0131 ve i\u015flemleri bilir. KargoBilgileri<\/code> sadece kargo detaylar\u0131n\u0131 y\u00f6netir.<\/li>\nSipari\u015f<\/code> s\u0131n\u0131f\u0131nda b\u00fcy\u00fck bir de\u011fi\u015fiklik yapmaya gerek kalmaz.<\/li>\nMusteriBilgileri<\/code> veya Urun<\/code> s\u0131n\u0131flar\u0131, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde (\u00f6rne\u011fin m\u00fc\u015fteri profili sayfas\u0131nda veya \u00fcr\u00fcn katalo\u011funda) kolayca yeniden kullan\u0131labilir.<\/li>\nOdemeBilgileri<\/code> s\u0131n\u0131f\u0131n\u0131n odemeYap()<\/code> metodunu, Sipari\u015f<\/code> s\u0131n\u0131f\u0131n\u0131n karma\u015f\u0131k bir \u00f6rne\u011fini olu\u015fturmaya gerek kalmadan test edebiliriz.<\/li>\n\u0130leri D\u00fczey Teknikler: Dinamik Kompozisyon ve Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/h2>\n
Dinamik Kompozisyon Nedir?<\/h3>\n
Araba<\/code> s\u0131n\u0131f\u0131n\u0131n Motor<\/code> nesnesini do\u011frudan new Motor()<\/code> ile olu\u015fturmas\u0131 gibi. Bu, basit senaryolar i\u00e7in yeterli olsa da, bazen bir nesnenin hangi bile\u015fenlere sahip olaca\u011f\u0131na \u00e7al\u0131\u015fma zaman\u0131nda (runtime) karar vermek isteyebiliriz. \u0130\u015fte bu, dinamik kompozisyondur.<\/p>\nBildirim<\/code> s\u0131n\u0131f\u0131, hangi BildirimGonderici<\/code> bile\u015fenini kullanaca\u011f\u0131na \u00e7al\u0131\u015fma zaman\u0131nda karar verebilir.<\/p>\n\n\/\/ \u00d6rnek bir aray\u00fcz (JavaScript'te soyut aray\u00fczler do\u011frudan yoktur,\n\/\/ ancak duck typing ile bu sa\u011flanabilir)\nclass IBildirimGonderici {\n gonder(mesaj) {\n throw new Error(\"Bu metot uygulanmal\u0131d\u0131r!\");\n }\n}\n\nclass EpostaGonderici extends IBildirimGonderici {\n gonder(mesaj) {\n console.log(E-posta ile g\u00f6nderildi: ${mesaj}<\/code>);\n }\n}\n\nclass SMSGonderici extends IBildirimGonderici {\n gonder(mesaj) {\n console.log(SMS ile g\u00f6nderildi: ${mesaj}<\/code>);\n }\n}\n\nclass BildirimSistemi {\n \/\/ constructor ile ba\u011f\u0131ml\u0131l\u0131k enjekte ediliyor\n constructor(gonderici) { \n this.gonderici = gonderici; \/\/ Dinamik olarak belirlenen g\u00f6nderici\n }\n\n \/\/ \u00c7al\u0131\u015fma zaman\u0131nda g\u00f6nderici de\u011fi\u015ftirilebilir\n setGonderici(yeniGonderici) {\n this.gonderici = yeniGonderici;\n }\n\n bildirimGonder(mesaj) {\n this.gonderici.gonder(mesaj);\n }\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\nconst epostaGonderici = new EpostaGonderici();\nconst smsGonderici = new SMSGonderici();\n\nconst bildirimSistemi = new BildirimSistemi(epostaGonderici);\nbildirimSistemi.bildirimGonder(\"Ho\u015f geldiniz mesaj\u0131!\"); \/\/ E-posta ile gider\n\nbildirimSistemi.setGonderici(smsGonderici); \/\/ G\u00f6ndericiyi \u00e7al\u0131\u015fma zaman\u0131nda de\u011fi\u015ftir\nbildirimSistemi.bildirimGonder(\"Hesab\u0131n\u0131z aktive edildi.\"); \/\/ SMS ile gider\n<\/pre>\nBildirimSistemi<\/code>, hangi IBildirimGonderici<\/code> implementasyonunu kullanaca\u011f\u0131na karar verebilir ve hatta \u00e7al\u0131\u015fma zaman\u0131nda bunu de\u011fi\u015ftirebilir. Bu, sistemin \u00e7ok daha esnek olmas\u0131n\u0131 sa\u011flar.<\/p>\nBa\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (Dependency Injection - DI)<\/h3>\n
BildirimSistemi<\/code> \u00f6rne\u011finde constructor \u00fczerinden gonderici<\/code> parametresini almam\u0131zla zaten bir miktar uyguland\u0131.<\/p>\n\n
\n
BildirimSistemi<\/code> \u00f6rne\u011fi gibi).<\/li>\n\n\/\/ Setter Injection \u00d6rne\u011fi\nclass DatabaseService {\n kaydet(veri) {\n console.log(Veritaban\u0131na kaydedildi: ${veri}<\/code>);\n }\n}\n\nclass RaporlamaServisi {\n constructor() {\n this.dbService = null; \/\/ Ba\u015flang\u0131\u00e7ta ba\u011f\u0131ml\u0131l\u0131k yok\n }\n\n setDatabaseService(service) {\n this.dbService = service; \/\/ Setter ile enjekte ediliyor\n }\n\n raporOlustur(veri) {\n if (!this.dbService) {\n console.error(\"Veritaban\u0131 servisi atanmad\u0131!\");\n return;\n }\n console.log(\"Rapor olu\u015fturuluyor...\");\n this.dbService.kaydet(Rapor verisi: ${veri}<\/code>);\n }\n}\n\nconst raporServisi = new RaporlamaServisi();\n\/\/ raporServisi.raporOlustur(\"Analiz verisi\"); \/\/ Hata verir \u00e7\u00fcnk\u00fc dbService atanmad\u0131\n\nconst gercekDb = new DatabaseService();\nraporServisi.setDatabaseService(gercekDb);\nraporServisi.raporOlustur(\"Haftal\u0131k sat\u0131\u015f raporu\");\n\n\/\/ Test ortam\u0131nda mock bir servis enjekte edebiliriz\nclass MockDatabaseService {\n kaydet(veri) {\n console.log(MOCK Veritaban\u0131na kaydedildi (TEST): ${veri}<\/code>);\n }\n}\nconst testRaporServisi = new RaporlamaServisi();\ntestRaporServisi.setDatabaseService(new MockDatabaseService());\ntestRaporServisi.raporOlustur(\"Test raporu\"); \/\/ Test ortam\u0131nda farkl\u0131 bir davran\u0131\u015f\n<\/pre>\nMobil Uyumluluk: Kompozisyon ve Responsive Tasar\u0131m<\/h2>\n
Kart<\/code>) kendi alt bile\u015fenlerinin responsive davran\u0131\u015flar\u0131n\u0131 koordine edebilir. Bu, her bir par\u00e7an\u0131n kendi i\u00e7inde responsive olmas\u0131n\u0131 veya responsiveli\u011fi ebeveyninden devralmas\u0131n\u0131 sa\u011flayarak daha y\u00f6netilebilir bir kod taban\u0131 olu\u015fturur.<\/p>\n\n
Navbar<\/code> bile\u015feni, Logo<\/code>, NavMenuItem<\/code> ve HamburgerMenuIcon<\/code> gibi bile\u015fenlere sahip olabilir. Her bir alt bile\u015fen kendi responsive stilini y\u00f6netebilir.<\/li>\nUrunKarti<\/code> bir Resim<\/code>, Baslik<\/code>, Fiyat<\/code> ve Buton<\/code>a sahiptir.<\/p>\n\n