MVC veya MDV kullanan birçok JavaScript çerçevesinin, bir web uygulamasındaki durumu modelleyen nesnelerde yapılan değişikliklere yanıt vermesi gerekir. Bu özellik, veri bağlama modelinin temel bir parçasıdır.
Bir tür işlem tetiklemek için JavaScript nesnelerini ve DOM mülklerini izlemenin birkaç farklı yolu vardır ancak tekniklerin çoğu performans gibi çeşitli nedenlerden dolayı ideal değildir.
Web uygulamalarının performansını iyileştirmek amacıyla, ECMAScript'in (JavaScript) geliştirilmesini denetleyen standartlar kuruluşu TC39'a Object.observe() adlı yeni bir yöntem önerildi.
Object.observe(), herhangi bir JavaScript nesnesine, o nesne veya nesne özellikleri değiştiğinde çağrılan bir dinleyici eklemenize olanak tanır.
Bu özelliği Chrome Canary 25 sürümünde deneyebilirsiniz.
Bu özelliği denemek için Chrome Canary'da Deneysel JavaScript'i etkinleştir işaretini etkinleştirmeniz ve tarayıcıyı yeniden başlatmanız gerekir. İşaret, aşağıdaki resimde gösterildiği gibi "about:flags" altında bulunabilir:
Bir nesnede gözlemcinin nasıl ayarlanacağına dair basit bir örnek aşağıda verilmiştir:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
"beingWatched" nesnesi değiştirildiğinde, nesneye uygulanan bir dizi değişikliği alan "somethingChanged" geri çağırma işlevi tetiklenir.
Bu nedenle, JavaScript motoru bir dizi değişikliği arabelleğe alabilir ve bunların tümünü geri çağırma işlevine tek bir çağrıda iletebilir. Bu, kodunuzun çok sayıda JavaScript değiştirme işlemi yapabilmesi ancak güncellemeleri toplu olarak gruplandırarak yalnızca birkaç geri çağırma işleyebilmesi için geri çağırma işlemlerini optimize etmeye yardımcı olur.
Geri çağırma işlevi, bir mülk eklendiğinde, değiştirildiğinde, silindiğinde veya yeniden yapılandırıldığında tetiklenir.
Dizileri gözlemlerken kullanabileceğiniz bir diğer kullanışlı özellik de, bir dizede bir dizi değişiklik yapılmışsa minimum değişiklik grubu oluşturmak için Değişiklik Özeti yardımcı kitaplığını kullanabilmenizdir. Böylece, istemci tarafı JavaScript'in her öğeyi kontrol etmek için diziyi manuel olarak taraması gerekmez.
"somethingChanged" geri çağırma işlevinizde aşağıdaki gibi bir işlem yaparak her değişikliği kolayca iteratif olarak inceleyebilirsiniz:
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
type özelliği, nesneyle ne olduğunu tanımlar. Ayarlanan özellikler ve ilişkili tür örneklerini aşağıdaki kodda görebilirsiniz.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Bu tekniğin en iyi yanı, tüm izleme özelliklerinin JavaScript motorunun içinde olmasıdır. Bu sayede tarayıcı, JavaScript'i iyi optimize edebilir ve JavaScript'inizi bu özellikten yararlanarak işlevleri uygulamak için özgürleştirebilir.
Geliştirme için gerçekten mükemmel bir diğer özellik de, bir nesne değiştiğinde hata ayıklayıcıyı tetiklemek için Object.observe() işlevini kullanabilme olanağıdır. Bunu yapmak için aşağıdaki örnekte gösterilen gibi bir kod kullanırsınız.
Object.observe(beingWatched, function(){ debugger; });
Object.observe() hakkında ayrıntılı bilgi veren harika bir tanıtım videosu burada verilmiştir.
Ayrıca açıklayıcı bir makale ve çalışma örneği de bulabilirsiniz.
TC39 standartlar kuruluşu bu özellik hakkında geri bildirim istiyor. Lütfen bu özelliği deneyin ve düşüncelerinizi bizimle paylaşın.