JavaScript ile Module Pattern Tasarım Kalıbının Kullanımı

11 Eylül 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Yazılım geliştirirken kullandığımız Design Patterns ya da Tasarım Kalıplarının Javascript gibi OOP (Object Oriented Programming) özellikleri güçlü bir dil ile kullanmak, hem yapmış olduğumuz HTML 5 tabanlı mobil uygulamalarda hem de web uygulamalarında çok daha profesyonel, yönetilebilir ve okunabilir bir kod yazmanızı sağlayacaktır. Bu yazı da Module Pattern ve Revealing Module Pattern tasarım kalıplarının Javascript ile nasıl kullanılacağını inceleyeceğiz.

Öncelikle konumuza giriş yapmadan önce bir senaryo hazırlayalım. Elimizden uygulamamızda kullandığımız aşağıdaki gibi bir Javascript kodumuz olduğunu varsayalım.

var current = null;
function init(){alert("init");}
function change(){alert("change");}
function verify(){alert("verify");}

Object Literal Kullanımı:

Yukarıda örneklediğimiz Javascript kodumuzu Object Literal şeklinde yazabiliriz. Bunun için kodumuzu aşağıdaki gibi revize edelim.

var myNameSpace = {
    current:null,
    init:function(){...},
    change:function(){...},
    verify:function(){...}
}
myNameSpace.init();

Bu yazım şekli ile init, change, verify fonksiyonlarını ve değişkenimizi myNameSpace isim uzayı altında toplayarak kapsamını özelleştirdik. Örneğin; artık init fonksiyonunu çağırırken init() şeklinde değil myNameSpace.init() şeklinde çağırabiliriz. Bu kullanım, Design Patterns/Tasarım Desenleri konusunda “Object Literal” ismiyle biliniyor.

Module Pattern ve Revealing Module Pattern

Eğer tanımladığınız fonksiyonların yalnızca oluşturduğunuz NameSpace içerisinde çalışmasını istiyorsanız Module Pattern tasarım desenini kullanabilirsiniz. Bunun için kodumuzu aşağıdaki gibi revize edelim.

myNameSpace = function(){
    var current = null;
    function init(){alert("init");}
    function change(){alert("change");}
}();

Module Pattern’e göre hazırladığımız örneğimizi Object Literal’de olduğu gibi myNameSpace.init() şeklinde çağırmaya kaltığımızda hata ile karşılaşacağız. Zira bu kullanım ile init, change ve verify fonksiyonları artık public değil birer private fonksiyon haline geldi. Dolayısı ile myNameSpace kapsamı dışında kullanılamaz. Ancak myNameSpace kapsamı içerisinde kullanılabilir.

myNameSpace = function(){
    var current = null;
    function init(){alert("init");}
    function change(){alert("change");}
    function verify(){alert("verify");}
    init();
}();

Peki bu fonksiyonlardan istediklerimizi dışarıdan erişebilir hale getirebilir miyiz? Elbette! Bunun için ise aşağıdaki örnekte olduğu gibi return anahtar kelimesini kullanmamız gerekiyor.

myNameSpace = function(){
    var current = null;
    function verify(){alert("verify");}
    return{
        init: function(){alert("init");},
        change: function(){alert("change");}
    }
}();
myNameSpace.init();

Bu kullanım şekli işe init ve change fonksiyonları artık public iken, verify fonksiyonu halen private olarak kullanılabilir durumdadır. Örneğin; init fonksiyonu artık myNameSpace.init() şeklinde çağırılabilir.

Ancak bu kullanım şeklini aşağıdaki örnekte olduğu gibi daha da geliştirmek mümkün.

myNameSpace = function(){
    var current = null;
    function init(){alert("init");}
    function change(){alert("change");}
    function verify(){alert("verify");}
    return{
        init: init,
        change: change
    }
}();
myNameSpace.init();

Böylelikle fonksiyon tanımlarını return’ün dışına taşıyıp, return içerisini yalnızca tanımlardan oluşturarak çok daha kullanışlı ve okunabilir bir kod parçası elde ettik.

Kodumuzun return bölümünde tanımlama metni olarak kullandığımız init ve change alanlarına aşağıdaki gibi farklı isimlerde verebiliriz. Bu şekildeki kullanıma da Revealing Module Pattern adını veriyoruz.

return{
    basla: init,
    degistir: change
}

Buna göre çağırma şeklimizde aşağıdaki gibi olacaktır.

myNameSpace.basla();

Bir sonraki yazıda görüşmek üzere..

Kaynak:
http://dev.opera.com/articles/view/javascript-best-practices/
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
http://www.raymondcamden.com/index.cfm/2013/3/22/JavaScript-Design-Patterns–The-Module-Pattern

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. Zamir
    31 Mayıs 2016 - 13:50

    Çok yararlı yazı. Teşekkür ederim