Javascript Refactoring : Use Constants

Javascript kodlarına bakarsanız etrafta bolca string göreceğinizden eminim. En azından benim eski Javascript kodlarım böyleydi.Daha öncede Java, C# gibi static typed dillerde bunların önüne nasıl geçebileceğimizden bahsetmiştik. Javascript dilinde Constant kavramı olmasa da Object Literal notasyonu kullanarak sabit değişkenler tanımlayabiliriz. Aşağıdaki masum Javascript fonksiyonlarını görüyorsunuz.

function createStatusImage(movie) {
    var img = document.createElement("img");
    if (movie.avaliable)
        img.src = '/Content/Images/watched.gif';
    else
        img.src = '/Content/Images/unwatched.gif';

    return img;
};

function makePlanned(img) {
    img.src = img.src = '/Content/Images/planned.gif';
}

Yukarıdaki kodlar ne kadar masum görünse de, her tarafta string tanımı olduğu için kodda eğer resim yani “Content/Images” dizinini değiştirmek istediğinizde kodun 3 yerinde bu değişikliği yapmak zorundasınız. Bunun yerine Object Litaral ile bir konfigürasyon nesnesi oluşturup kodumuzu aşağıdaki gibi refactor edersek daha okunaklı ve değiştirmesi daha kolay olacaktır.

var ImageConfig = {
    IMAGE_PATH: '/Content/Images/',
    WATCHED_IMAGE: 'watched.gif',
    UNWATCHED_IMAGE: 'unwatched.gif',
    PLANNED_IMAGE: 'planned.gif'
}

function createStatusImage(movie) {
    var img = document.createElement("img");
    if (movie.avaliable)
        img.src = ImageConfig.IMAGE_PATH + ImageConfig.WATCHED_IMAGE;
    else
        img.src = ImageConfig.IMAGE_PATH + ImageConfig.UNWATCHED_IMAGE;

    return img;
};

function makePlanned(img) {
    img.src = img.src = ImageConfig.IMAGE_PATH + ImageConfig.PLANNED_IMAGE;
}

Yukarıdaki tanımlama gerçek anlamda oluşturulduktan sonra değiştirilemiyen “constant” ya da “final” değişkenler sunmasa da fantazi olsun diye birisi ImageConfig nesnesi içeriğini değiştirmez ise bu amaçla kullanılabilir.Bu yüzden eğer takım olarak ortak Javascript dosyaları üzerinde değişiklik yapıyorsanız Code Conversions belirlemeniz faydanıza olacaktır. Sizi bilmiyorum ama ben son halini daha çok sevdim :)

zp8497586rq

5 thoughts on “Javascript Refactoring : Use Constants

  1. Berker Peksağ

    JavaScript’te sabitler var aslında:

    const IMAGE_PATH = ‘/Content/Images/';

    Yanlış hatırlamıyorsam Internet Explorer henüz desteklemiyor.

    Şöyle bir çözüm de kullanılabilir:

    var CONST = (function() {
    var key = {
    ‘IMAGE_PATH': ‘/Content/Images/’
    };

    return {
    get: function(value) {
    return key[value];
    }
    }
    })();

    alert(CONST.get(‘IMAGE_PATH’));

  2. M. Cihat Altuntaş Post author

    Evet bahsettiğin keyword Firefox ve Webkit tabanlı diğer browserlar tarafından destekleniyor fakat dediğin gibi IE desteklemiyor.Ayrıca EcmaScript’e dahil mi bilmiyorum.

  3. Fatih

    Bahsettiğiniz olay kodunuzu development ortamından production ortamına alırken oldukça faydalı olan bir yaklaşım.
    Development ortamında kullandığınız image path inizin /img
    Production ortamında ise cdn.sitename.com/img olduğu durumda sadece bir yeri değiştirmeniz yeterli olacaktır.
    Güzel yazı :-)

Comments are closed.