MVC veya MDV kullanan birçok JavaScript çerçevesinin, bir web uygulaması içindeki durumu modelleyen nesnelerde yapılan değişikliklere yanıt vermesi gerekir. Bu özellik, veri bağlama modelinin önemli bir parçasıdır.
JavaScript nesnelerini ve DOM özelliklerini bir tür eylemi tetiklemek üzere izlemenin birçok farklı yolu vardır, ancak bu tekniklerin çoğu performans gibi çeşitli nedenlerle ideal değildir.
Web uygulamalarının performansını iyileştirmek amacıyla, TC39'a ECMAScript'in (JavaScript) gelişimini denetleyen standart gövde metni olan Object.observe() adlı yeni bir yöntem teklif edilmiştir.
Object.observe(), söz konusu nesne veya özellikleri değiştiğinde çağrılan bir JavaScript nesnesine işleyici ekleyebilmenizi sağlar.
Bu özelliği hemen Chrome Canary sürüm 25'te deneyebilirsiniz.
Bu özellikle deneme yapmak için Chrome Canary'de Deneysel JavaScript'i Etkinleştir işaretini etkinleştirmeniz ve tarayıcıyı yeniden başlatmanız gerekir. Bayrak, aşağıdaki resimde gösterildiği gibi 'about:flags' altında bulunabilir:
Bir nesne üzerinde gözlemleyici oluşturmanın basit bir örneğini aşağıda bulabilirsiniz:
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şlevini tetikler.
JavaScript motoru, bir dizi değişikliği arabelleğe almakta ve bunların tümünü geri çağırma işlevine tek bir çağrıda iletmekte serbesttir. Bu, geri çağırmaların optimize edilmesine yardımcı olur; böylece kodunuz, çok sayıda JavaScript işlemi gerçekleştirip yalnızca birkaç geri çağırma işlemini (güncellemeleri toplu olarak yaparak işleyebilir).
Bir mülk eklendiğinde, değiştirildiğinde, silindiğinde veya yeniden yapılandırıldığında geri çağırma işlevi tetiklenir.
Dizilerde gözlemlemenin gerçekten faydalı olduğu bir diğer nokta da, dizide çok sayıda değişiklik yapıldıysa minimum değişiklik kümesi oluşturmak için bir Değişiklik Özeti yardımcı kitaplığı kullanabilirsiniz. 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 bir değişikliği kolayca yineleyebilirsiniz:
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, nesneye ne olduğunu tanımlar. Ayarlanan özelliklere ve ilişkili türe ilişkin bazı örnekleri 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 akıllı işlevlerinin JavaScript motoru içinde olmasıdır. Bu da tarayıcının onu iyi optimize etmesine olanak tanır ve bu özellikten yararlanan işlevselliği uygulamak için JavaScript'inizin serbest kalmasını sağlar.
Geliştirme için kullanılabilecek bir diğer harika özellik, Object.observe() kullanarak bir nesne her değiştiğinde hata ayıklayıcıyı tetiklemesidir. Bunun için aşağıdaki örneğe benzer bir kod kullanmanız gerekir.
Object.observe(beingWatched, function(){ debugger; });
Object.observe() hakkında, konuyu ayrıntılı olarak açıklayan mükemmel bir video tanıtımını burada bulabilirsiniz.
Ayrıca, güzel ve açıklayıcı bir açıklama ve burada çalışan bir örnek de bulabilirsiniz.
TC39 standartları gövdesi bu özellikle ilgili geri bildirim almak istiyor. Lütfen siz de deneyin ve düşüncelerinizi bizimle paylaşın.