Apr 13

Javascript Refactoring : Use Constants

Tag: Javascript,RefactoringM. Cihat Altuntaş @ 2:45 pm

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 :)

4 Responses to “Javascript Refactoring : Use Constants”

  1. Berker Peksağ says:

    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ş says:

    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. Berker Peksağ says:

    Evet, EcmaScript’e dahil.

    Microsoft’un JScript’i ne zaman destekler meçhul :) Harmony ile beraber IE9′da belki.

  4. M. Cihat Altuntaş says:

    IE9 ne zaman gelir kimbilir :)

Leave a Reply