JavaScript, ba\u015flang\u0131c\u0131ndan bu yana web geli\u015ftirmenin temel ta\u015f\u0131 olmu\u015ftur. Ancak, dilin ilk tasar\u0131mlar\u0131ndan biri olan k\u00fcresel kapsam (global scope) kullan\u0131m\u0131, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar geli\u015ftirirken ciddi sorunlara yol a\u00e7m\u0131\u015ft\u0131r. De\u011fi\u015fken ve fonksiyon isim \u00e7ak\u0131\u015fmalar\u0131, kodun okunabilirli\u011finin d\u00fc\u015fmesi ve kaps\u00fclleme (encapsulation) eksikli\u011fi gibi sorunlar, geli\u015ftiricileri kodlar\u0131n\u0131 daha d\u00fczenli ve izole bir \u015fekilde organize etmenin yollar\u0131n\u0131 aramaya itmi\u015ftir. \u0130\u015fte tam da bu noktada “Mod\u00fcl Tasar\u0131m Deseni” devreye girer.<\/p>\n
Mod\u00fcl deseni, JavaScript’te kodun mant\u0131ksal birimlere ayr\u0131lmas\u0131n\u0131, \u00f6zel (private) ve genel (public) \u00fcyelerin net bir \u015fekilde tan\u0131mlanmas\u0131n\u0131 ve k\u00fcresel kapsam\u0131n kirlenmesini engellemeyi ama\u00e7layan bir yap\u0131d\u0131r. Temel olarak, bir mod\u00fcl, kendi i\u00e7inde bir dizi de\u011fi\u015fkeni ve fonksiyonu bar\u0131nd\u0131ran, ancak d\u0131\u015f d\u00fcnyaya sadece belirli bir aray\u00fcz (API) sunan ba\u011f\u0131ms\u0131z bir kod birimidir. Bu sayede, mod\u00fcl\u00fcn i\u00e7 i\u015fleyi\u015fi d\u0131\u015far\u0131dan gizlenir ve sadece mod\u00fcl\u00fcn sundu\u011fu i\u015flevsellikler kullan\u0131labilir hale gelir. Modern JavaScript’te (ES6 ve sonras\u0131) yerle\u015fik mod\u00fcl sistemi ( Mod\u00fcl tasar\u0131m desenini kullanmak, JavaScript uygulamalar\u0131n\u0131z\u0131n kalitesini art\u0131rmak i\u00e7in bir dizi \u00f6nemli fayda sa\u011flar:<\/p>\n Mod\u00fcl deseninin en b\u00fcy\u00fck faydalar\u0131ndan biri kaps\u00fcllemedir. Bir mod\u00fcl i\u00e7indeki de\u011fi\u015fkenler ve fonksiyonlar varsay\u0131lan olarak \u00f6zeldir (private). Bu, mod\u00fcl\u00fcn i\u00e7 i\u015fleyi\u015finin d\u0131\u015far\u0131dan do\u011frudan eri\u015filemez oldu\u011fu ve de\u011fi\u015ftirilemeyece\u011fi anlam\u0131na gelir. Sadece mod\u00fcl\u00fcn a\u00e7\u0131k\u00e7a d\u0131\u015far\u0131ya sundu\u011fu (public) aray\u00fcz \u00fczerinden etkile\u015fim kurulabilir. Bu durum, kodun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar ve yanl\u0131\u015fl\u0131kla yap\u0131lan de\u011fi\u015fikliklerin \u00f6n\u00fcne ge\u00e7er.<\/p>\n K\u00fcresel kapsamda tan\u0131mlanan her de\u011fi\u015fken veya fonksiyon, di\u011fer t\u00fcm kod par\u00e7alar\u0131 taraf\u0131ndan eri\u015filebilir ve potansiyel olarak \u00e7ak\u0131\u015fabilir. \u00d6zellikle b\u00fcy\u00fck projelerde veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken bu durum ciddi sorunlara yol a\u00e7abilir. Mod\u00fcl deseni, kodunuzu kendi izole kapsamlar\u0131 i\u00e7ine alarak k\u00fcresel kapsam\u0131 temiz tutar ve isim \u00e7ak\u0131\u015fmas\u0131 riskini ortadan kald\u0131r\u0131r.<\/p>\n Mod\u00fcller, kodunuzu mant\u0131ksal olarak ilgili par\u00e7alara ay\u0131rman\u0131za olanak tan\u0131r. Her mod\u00fcl belirli bir sorumlulu\u011fu \u00fcstlenir ve bu da kod taban\u0131n\u0131n genel yap\u0131s\u0131n\u0131 daha anla\u015f\u0131l\u0131r hale getirir. \u0130yi organize edilmi\u015f mod\u00fcller, kodu okumay\u0131, anlamay\u0131 ve \u00fczerinde \u00e7al\u0131\u015fmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n Kaps\u00fcllenmi\u015f ve iyi tan\u0131mlanm\u0131\u015f mod\u00fcller, bak\u0131m s\u00fcre\u00e7lerini basitle\u015ftirir. Bir mod\u00fclde yap\u0131lan de\u011fi\u015fiklikler genellikle di\u011fer mod\u00fclleri do\u011frudan etkilemez, \u00e7\u00fcnk\u00fc her mod\u00fcl\u00fcn kendi i\u00e7 i\u015fleyi\u015fi izoledir. Bu, hatalar\u0131n bulunmas\u0131n\u0131 ve giderilmesini h\u0131zland\u0131r\u0131r, ayr\u0131ca yeni \u00f6zelliklerin eklenmesini veya mevcut \u00f6zelliklerin iyile\u015ftirilmesini kolayla\u015ft\u0131r\u0131r.<\/p>\n \u0130yi tasarlanm\u0131\u015f mod\u00fcller, farkl\u0131 projelerde veya uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde kolayca yeniden kullan\u0131labilir. Bir mod\u00fcl\u00fcn belirli bir i\u015flevi yerine getirmesi hedeflendi\u011finde, bu mod\u00fcl ba\u015fka bir ba\u011flamda da ayn\u0131 i\u015flevi yerine getirmek \u00fczere \u00e7a\u011fr\u0131labilir, bu da kod tekrar\u0131n\u0131 azalt\u0131r ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n JavaScript’teki mod\u00fcl deseni, dilin geli\u015fimiyle birlikte farkl\u0131 formlar alm\u0131\u015ft\u0131r. \u0130\u015fte en yayg\u0131n uygulamalar\u0131 ve modern yakla\u015f\u0131mlar:<\/p>\n IIFE, JavaScript’in k\u00fcresel kapsam sorununa erken bir \u00e7\u00f6z\u00fcm olarak ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Bir fonksiyonun tan\u0131mlan\u0131r tan\u0131mlanmaz hemen \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 prensibine dayan\u0131r. Bu y\u00f6ntem, bir fonksiyon kapsam\u0131 olu\u015fturarak de\u011fi\u015fkenlerin ve fonksiyonlar\u0131n k\u00fcresel kapsamdan izole edilmesini sa\u011flar.<\/p>\n Yukar\u0131daki \u00f6rnekte, Revealing Module Pattern, IIFE tabanl\u0131 mod\u00fcl deseninin daha okunabilir bir varyasyonudur. Temel fark\u0131, t\u00fcm \u00f6zel \u00fcyelerin \u00f6nce tan\u0131mlanmas\u0131 ve ard\u0131ndan d\u00f6nd\u00fcr\u00fclen nesnede bu \u00f6zel \u00fcyelerin genel isimlerle a\u00e7\u0131k\u00e7a “a\u00e7\u0131klanmas\u0131” veya if\u015fa edilmesidir. Bu, mod\u00fcl\u00fcn API’sini bir bak\u0131\u015fta g\u00f6rmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n Bu desende, ES6 (ECMAScript 2015) ile birlikte JavaScript’e yerle\u015fik bir mod\u00fcl sistemi geldi. ES Mod\u00fclleri, modern web geli\u015ftirmenin temelini olu\u015fturur ve taray\u0131c\u0131lar (import<\/code>\/export<\/code>) bulunsa da, bu desenin ge\u00e7mi\u015fi ve prensipleri, JavaScript’in evrimini anlamak ve eski kod tabanlar\u0131n\u0131 y\u00f6netmek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\nNeden Mod\u00fcl Deseni Kullanmal\u0131y\u0131z? Temel Faydalar\u0131<\/h2>\n
Kaps\u00fclleme (Encapsulation)<\/h3>\n
\u0130sim \u00c7ak\u0131\u015fmalar\u0131n\u0131 \u00d6nleme (Avoiding Name Collisions)<\/h3>\n
Kod Organizasyonu ve Okunabilirlik (Code Organization and Readability)<\/h3>\n
Bak\u0131m Kolayl\u0131\u011f\u0131 (Maintainability)<\/h3>\n
Yeniden Kullan\u0131labilirlik (Reusability)<\/h3>\n
Mod\u00fcl Deseninin Evrimi ve Farkl\u0131 Uygulamalar\u0131<\/h2>\n
IIFE (Immediately Invoked Function Expression) ile Basit Mod\u00fcller<\/h3>\n
var MyModule = (function() {\n var privateVar = \"Ben mod\u00fcl\u00fcn \u00f6zel de\u011fi\u015fkeniyim.\"; \/\/ \u00d6zel (private) de\u011fi\u015fken\n \n function privateMethod() { \/\/ \u00d6zel (private) fonksiyon\n console.log(privateVar);\n }\n \n return { \/\/ D\u0131\u015far\u0131ya a\u00e7\u0131lan genel (public) aray\u00fcz\n publicMethod: function() {\n console.log(\"Ben d\u0131\u015far\u0131dan eri\u015filebilen bir metodum.\");\n privateMethod(); \/\/ Mod\u00fcl i\u00e7indeki \u00f6zel metodu \u00e7a\u011f\u0131rabiliriz.\n },\n publicVar: \"Ben de genel bir de\u011fi\u015fkenim.\"\n };\n})();\n\nMyModule.publicMethod(); \/\/ \u00c7\u0131kt\u0131: \"Ben d\u0131\u015far\u0131dan eri\u015filebilen bir metodum.\" ve \"Ben mod\u00fcl\u00fcn \u00f6zel de\u011fi\u015fkeniyim.\"\nconsole.log(MyModule.publicVar); \/\/ \u00c7\u0131kt\u0131: \"Ben de genel bir de\u011fi\u015fkenim.\"\n\/\/ console.log(MyModule.privateVar); \/\/ Undefined, \u00e7\u00fcnk\u00fc private\n\/\/ MyModule.privateMethod(); \/\/ Hata, \u00e7\u00fcnk\u00fc private<\/code><\/pre>\nMyModule<\/code> bir IIFE taraf\u0131ndan olu\u015fturulan bir nesnedir. privateVar<\/code> ve privateMethod<\/code>, IIFE’nin kapsam\u0131 i\u00e7inde kald\u0131\u011f\u0131 i\u00e7in d\u0131\u015far\u0131dan do\u011frudan eri\u015filemez. Sadece publicMethod<\/code> ve publicVar<\/code> d\u0131\u015f d\u00fcnyaya a\u00e7\u0131lm\u0131\u015ft\u0131r.<\/p>\nRevealing Module Pattern (A\u00e7\u0131klay\u0131c\u0131 Mod\u00fcl Deseni)<\/h3>\n
var ShoppingCart = (function() {\n var items = []; \/\/ \u00d6zel: Sepetteki \u00fcr\u00fcnler\n \n function addItem(item) { \/\/ \u00d6zel: \u00dcr\u00fcn ekleme fonksiyonu\n items.push(item);\n console.log(item + \" sepete eklendi.\");\n }\n \n function removeItem(item) { \/\/ \u00d6zel: \u00dcr\u00fcn \u00e7\u0131karma fonksiyonu\n var index = items.indexOf(item);\n if (index > -1) {\n items.splice(index, 1);\n console.log(item + \" sepetten \u00e7\u0131kar\u0131ld\u0131.\");\n }\n }\n \n function getItemsCount() { \/\/ \u00d6zel: \u00dcr\u00fcn say\u0131s\u0131n\u0131 d\u00f6nd\u00fcrme\n return items.length;\n }\n \n \/\/ Genel (public) aray\u00fcz\u00fc a\u00e7\u0131k\u00e7a if\u015fa ediyoruz\n return { \n add: addItem,\n remove: removeItem,\n count: getItemsCount\n };\n})();\n\nShoppingCart.add(\"Elma\"); \/\/ \u00c7\u0131kt\u0131: \"Elma sepete eklendi.\"\nShoppingCart.add(\"Armut\"); \/\/ \u00c7\u0131kt\u0131: \"Armut sepete eklendi.\"\nconsole.log(\"Sepetteki \u00fcr\u00fcn say\u0131s\u0131: \" + ShoppingCart.count()); \/\/ \u00c7\u0131kt\u0131: \"Sepetteki \u00fcr\u00fcn say\u0131s\u0131: 2\"\nShoppingCart.remove(\"Elma\"); \/\/ \u00c7\u0131kt\u0131: \"Elma sepetten \u00e7\u0131kar\u0131ld\u0131.\"\nconsole.log(\"Sepetteki \u00fcr\u00fcn say\u0131s\u0131: \" + ShoppingCart.count()); \/\/ \u00c7\u0131kt\u0131: \"Sepetteki \u00fcr\u00fcn say\u0131s\u0131: 1\"\n\/\/ console.log(ShoppingCart.items); \/\/ Undefined, \u00e7\u00fcnk\u00fc items \u00f6zel<\/code><\/pre>\naddItem<\/code>, removeItem<\/code> ve getItemsCount<\/code> fonksiyonlar\u0131 \u00f6nce \u00f6zel olarak tan\u0131mlan\u0131r. Ard\u0131ndan, return<\/code> ifadesi i\u00e7inde bu \u00f6zel fonksiyonlar, d\u0131\u015far\u0131dan eri\u015filebilir olacaklar\u0131 genel isimlerle (\u00f6rn. add<\/code>, remove<\/code>, count<\/code>) e\u015fle\u015ftirilir.<\/p>\nES Mod\u00fclleri (ECMAScript Mod\u00fclleri) ve Modern Yakla\u015f\u0131m<\/h3>\n
import<\/code> ve export<\/code> anahtar kelimeleri sayesinde, dosya tabanl\u0131 mod\u00fcller olu\u015fturmak art\u0131k dilin do\u011fal bir par\u00e7as\u0131d\u0131r. Bu, \u00f6nceki IIFE tabanl\u0131 yakla\u015f\u0131mlara g\u00f6re daha g\u00fc\u00e7l\u00fc, statik olarak analiz edilebilir ve daha verimli bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n