JavaScript ve Observer İşlemleri

Fringe izleyenleriniz biliyordur. Observerlar değişimleri gözlüyor, ona göre reyizlerine raporlar sunuyorlardı. Bazı durumlarda kendi aralarında kritik yaparlardı. Bu abiyi de oradan biliyorsunuzdur.

Giriş

JavaScript için buna benzer bir durum var. Gözcü diyorum bir bakıma öyle. Aslında bunun için direkt metodlardan birisi observer metoduydu. Bir diğeri de watch metodu ancak bunlar deprecated durumda.

Bunun yerine get ve set çok işe yarar durumda. Bu işlemi kullanma nedeni olarak bir değişkenin değerinin değişik değişmediği örnek gösterilebilir. Ayrıca proxy kullanarak da yaşanan değişimi algılayabilirsiniz. Bunu birçok yöntemle yapabiliriz.

Bu yazıda Object.defineProperty, Proxy ve get & set kullanarak 3 farklı durumda nesnenin değişip değişmediğini nasıl algılayacağımızı göreceğiz.

Gelişme

Object.defineProperty

Object.defineProperty için ufak bir bilgi verelim.

Kendisi, descriptor tanımlamada bize yardımcı olmakta. Bu ES5 ile JS’e gelmiş. Miş ve mış diyorum çünkü o zamanlar ben JS yazmıyordum. Duyduğum kadarıyla yani.

Eğer bunu kullanacaksanız bilmeniz gereken şey bazı niteliklerinin varsayılan olarak false durumunda olması. Ne demek bu dediğinizi duyuyor gibiyim. Bu descriptor, ayrıca value, writable, enumerable ve configurable gibi bazı nitelikler içeriyor.

Siz bunları açıkca set etmediğiniz sürece false durumundalar. Eğer unwritable propertyler yazmak gayesindeyseniz kullanışlı olabilir. Şimdi gelelim bu işlemi nasıl yaptığımıza. Burada değişkenleri gözcü şeklinde adlandıracağım.

var secretGozcu = false;

Object.defineProperty(this, 'gozcu', {
    get: function() {
        console.log("değer dönü")
        return secretGozcu;
    },
    set: function(v) {
        secretGozcu = v;

        if (secretGozcu) {
            console.log("Gözcü bizi gözlüyor... Durumu: ", secretGozcu);
        }
    }
});

for(var i = 0; i < 10; i++) {
    console.log("Gözcü bizi gözlemiyor gibi.. Durumu: ", gozcu)
    if (i == 5) {
        gozcu = true;
        break;
    }
}

/*
observer.js:17 Gözcü bizi gözlemiyor gibi.. Durumu:  false
observer.js:11 Gözcü bizi gözlüyor... Durumu:  true
*/

Yukarıdaki kodda secretGozcu adında bir değişken, gözcülerin bizi izlemediğini şu anda rahat olduğumuzu anlatıyor. Henüz Walter uzay zamanı bükmemiş, gerçekliği, geleceği değiştirmemiş durumda.

set metodu, belirtili nesneye atanan değerleri karşılar get metodu ise bu değerleri döndürür. Basit bir örnek olması amacıyla for döngüsü hazırladım. Bu döngü herhangi bir şey olabilir. Az önce tanımladığımız gozcu adındaki property ise secretGozcu isimli nesneyi temsil ediyor. Yani sana gelen bana gelsin diyor.

Bu bir değişkenin değerinin değişip değişmediğini kontrol edebileceğimiz ilk yöntemdi. Bilmiyorum belki genel bir fonksiyon yazarak bunu global hale getirebilirsiniz.

Proxy

Proxy kullanarak da aynı işlemi yapabileceğinizi biliyor muydunuz? Örneğin elimizde şöyle bir nesnemiz bulunsun.

var gozculer = {};

Bu nesneyi, proxy’de kullanarak değişimini görüntüleyebiliriz. Sanırım bunu bir hayli öneriyorlar. Basit bir örnekle bakalım. Örnek için September adında bir gözcümüz olsun. Fotoğraftaki abinin kendisi bu arada. Aşağıdaki örneğe bakalım.

var gozculer = {
    get September() {
        return this.val;
    },
    set September(v) {
        console.log("September sanıyorum ki başarılı oldu. Durumu: ", v)
        this.val = v;
    },
    get October() {
        return this.val;
    },
    set October(v) {
        console.log("October başaramadı... Durumu: ", v);
        this.val = v;
    }
}

var p = new Proxy(gozculer, Object);

p.September = "September başarılı";
p.October = "October başaramadı..";

/*
September sanıyorum ki başarılı oldu. Durumu:  September başarılı
observer.js:52 October başaramadı... Durumu:  October başaramadı..
*/

Bu yöntemde aslında objeyi değiştirmiş olmuyorsunuz daha çok Proxy değişiyor. Bunu basitçe console.log(gozculer.September); ile görebilirsiniz.

Objenin Get ve Set İşlemleri

Yukarıda yaptığımız işlemlerin aynısı. Bu daha çok Proxy’de kullandığımız yöntem. Ancak Proxy ile bu yöntem arasında fark var. Eğer Proxy kullanırsanız söylediğim gibi nesne değil Proxy değişiyor. Bu yöntemde ise nesnenin kendisi değişime uğruyor ve siz bunu algılıyorsunuz. Basit bir örnekle:

var gozcu = {
    get September() {
        return this.val;
    },
    set September(v) {
        console.log("September buralarda mısın? Cevap:", v);
        this.val = v;
    }
}
console.log("September değerden önce:", gozcu.September);
gozcu.September = "Burada"

/*
September değerden önce: undefined
observer.js:31 September buralarda mısın? Cevap: Burada
*/

Sonuç

Bu yazıda;

• Object.defineProperty ile değişkenlerin değerinin değişimini nasıl yakalarız onu gördük
• Proxy ile bir nesnede yaşanan değişimi gördük. Bunu yaparken nesnenin aslının değil Proxy’nin değiştiğini gördük
• Nesnelerin get ve set metodlarını kullanarak, değerlerinin değişip değişmediğini gördük.
• Fazla Fringe izlemenin zararlarını gördük.