Web uygulamalarımız geliştikçe ve yazılan kod satırları arttıkça, kodun yönetimini kolaylaştırmak amacıyla kodun iyi yapılandırılmış olması önem kazanmaya başlar. Bu kural, yazılımcılar tarafından edinilen tecrübelerle ortaya konmuştur.
Bu yazımızda Javascript kodunun iyi yapılandırılmasıyla ilgili kurallardan bahsedeceğiz. Javascript ortamında değişkenler için kod kapsamını incelemeye çalışacağız.
Değişkenlerin Erişilebilirlik Alanları
Javascript, internet tarayıcılar tarafından yorumlanan bir dildir. Bu sebeple Client taraflı uygulamalar Javascript ile geliştirilebilir. Diğer popüler dillerden(C++, C#, Java v.b) bu yönüyle ayrılır. Kod yazım kuralları diğer programlama dillerine biraz benzerdir.
Javascript ortamında tanımlanan değişkenlere nereden ulaşılabileceğine geliştiriciler karar verir. Bir değişken, her yerden ulaşılacaksa global şekilde tanımlanabilir veya sadece bir fonksiyon içerisinde kullanılacaksa yerel bir şekilde de tanımlanabilir.
Yani iki yeni kuralımız ortaya çıkmış oldu.
- Değişkenler bir fonksiyonun dışında tanımlanmışsa global olur.
- Bir fonksiyon içerisinde tanımlanmışsa yerel olur ve o fonksiyon içinde her yerden(fonksiyon içindeki başka bir fonksiyondan bile) erişilebilir.
Örnek-1:
<script type="text/javascript"> var name = "Bayram"; function getUsername() { alert(name); } </script>
Bu örnekte “name” değişkeni global olarak tanımlanmıştır. “name” değişkenine artık her yerden erişilebilir. Bu kodu bir *.js dosyasına tanımlayıp dosyayı gören her yerden “name” değişkenine erişebiliriz.
Örnek-2:
<script type="text/javascript"> var name = "Bayram"; function getUsername() { var name = "Undefined"; alert(name); } </script>
Bu örnekte tanımladığımız “getUsername” fonksiyonu çalıştırıldığında çıktı olarak “Undefined” şeklinde bir uyarı penceresi açılacaktır. “Bayram” diye uyarı vermeyecektir. getUsername fonksiyonu içinde yerel olarak tanımlanan “name” değişkeni global tanımlanan “name” değişkenini dikkate almamıştır.
Bu gibi durumlar, bazen istemediğimiz sonuçlara yol açabilir. Örneğin bir değişkenin unutularak tekrar değiştirilmesi sonucu yanlış bilgi alınması veya verilmesi gibi durumlar yaşanabilir. Çünkü global olarak tanımlanan değişkenlere web uygulamanızın her yerinden ulaşabilirsiniz.
Bu gibi çakışma sorunlarını bertaraf etmek için Javascript tarafında faydalanabileceğimiz birkaç yöntem mevcuttur. Bunlar:
- Hemen cevap veren fonksiyonlar
- Namespace (Ad alanları)
Hemen Cevap Veren Fonksiyonlar
Hemen cevap veren fonksiyonlar, tanımlandığı anda çalışan fonksiyonlardır. Yani bir yerde tanımlayıp başka yerde çalışan fonksiyonlar gibi değillerdir. Hemen cevap veren fonksiyonları anonim fonksiyon gibi iki parantez içine sarmalayarak hemen çalışır hale getirebiliriz.
Örnek:
<script type="text/javascript"> (function () { var firstName = "Bayram"; var lastName = "Üçüncü"; var fullName = firstName + " " + lastName; })(); </script>
Tarayıcı bu fonksiyonu gördüğü anda çalıştırır. Fonksiyon içinde tanımlanan değişkenler global ad alanını (namespace) boşuna kirletmemiş olur. Mesela “firstName” değişkenine bu fonksiyon dışından erişmek mümkün değildir.
Namespace (Ad Alanlarının Kullanımı)
Global değişkenlerin çakışmalarını gidermek için kullanılan bir diğer yöntem ise namespace kullanımıdır. Javascript ortamında namespece içerisine değişkenler ve fonksiyonlar tanımlamak mümkündür.
Örnek:
<script type="text/javascript"> var MyGlobalMapNamespace = { getMapName: function () { return "Nokia Maps"; }, getMapExtent: function () { return "411124, 552442, 4253211, 4011225"; }, gtMapLayers: function () { return 4; }, owner: "Bayram Üçüncü" } </script>
Bu örnekte tanımladığımız MyGlobalMapNamespace namespace içindeki üyelere şu şeklide erişmek mümkündür:
MyGlobalMapNamespace.getMapExtent(); MyGlobalMapNamespace.owner="Bayram";
Namespace içerisinde tanımlı üyelere bir gizlilik veya kapsülleme(encapsulation) yapmak söz konusu değildir. Namespace adı ile içerisindeki üyelere dışarıdan erişim mümkündür.
Bu şekilde Javascript ortamında değişkenlerle ilgili erişim bölgelerini yani kod kapsamına giren ve girmeyen bölgeleri incelemeye çalıştık. Global ve Yerel değişkenlerin hangi kapsamlarda kaldığını, değişken çakışmalarında alınacak önlemleri inceledik. Bir sonraki yazıda görüşmek dileğiyle.
Merhaba,
Çok güzel bir konuya değinmişsin bende bir süredir JavaScript kodlarımı nasıl daha iyi organize edebilirim diye araştırıyordum. Umarım bu konuda başka yazılarda yazarsın. Kodların bölünmesi ve dosya organizasyonu ile ilgili olarak.
Son bölümde namescape olarak anlattığın özelliği bir kaç yerde JavaScriptte sınıf tanımlamak diye okumuştum. Son kısımdaki bu özellik tam olarak nedir?
Teşekkürler @Zafer,
Son bölümde namespace olarak tanımlanan kısım geleneksel programlama dillerindeki namespace mantığı gibidir. Javascript diğer programlama dillerindeki gibi geniş kapsamlı olmadığından bu şekilde bir namespace tanımlaması mevcuttur. Her fonksiyonu birer sınıf gibi düşünecek olursak (parametreli olanlar constructor function) bu durumda fonksiyonları bir arda tutan bir namespace tanımlamak gerekebiliyor. Bir nevi genelleme ya da gruplama gibi düşünülebilir.
Konuyla ilgili dikkat çekici noktaları paylaşmaya devam edeceğim. Javascript tarafında kodun iyi yapılandırılması, kodun spagetti koda dönüşmesini engeller. Takip ettiğiniz için teşekkürler.