Fatih Acet

Fatih Acet

Frontend Engineer at GitLab.com

twittergitlabgithubenvelope-olinkedinyoutubeinstagram

Object Observe

ECMAScript 7’nin belki de en onemli ozelligi olan Object.observe Chrome 36 ile resmen hayatimiza girdi ve artik object uzerinde olusan degisiklikleri native bir sekilde dinlemek ve aksiyon almak mumkun.

Aslinda bir cogumuz gundelik hayatinda bu ozelligi Angular, Backbone, Ember gibi framework’ler ile zaten kullaniyor fakat bu ozelligin JavaScript’e native olarak geliyor olmasi cok daha heyecanlandirici bir durum. Ayrica suradaki Angular developer’larin yaptigi testlerde Angular ile native Object.observe arasinda 20x-40x performans farki olmasi da bir baska guzel haber.

Ufak bir ornek ile nasil kullanabilecegimizi gostereyim.

1
2
3
4
5
6
7
8
9
10
obj = {
name: 'Fatih',
nickname: 'fatih',
age: 26,
job: 'Developer'
}
Object.observe(obj, function(change){
console.log(change);
});

obj diye basit bir object’imiz var ve Object.observe(obj, callbackFn) ile bu object uzerinde olusacak degisiklikleri dinlemeye basladik. Simdi obj.nickname degerini fatihacet olarak degistirelim ve asagidaki console ciktisina bakalim.

obj.nickname = 'fatihacet'

Yukaridaki degisikligi yaptigimiz zaman callback function’imiza gelen change object’i icinde degisiklik ile ilgili detaylar mevcut.

Object.observe tabi ki array’ler icin de calisiyor. Fakat cok ufak degisiklikler ile. Asagidaki console ciktisina bakalim ve sonra devam edelim.

k.splice(1, 1, 1) ile arrayin 1. index’inden baslayarak 1 item cikardik ve yerine 1 sayisini koyduk ve console’da log’lagimiz change object’inde addedCount, index ve removed gibi yeni key’ler gorduk. Bunlar yapilan degisiklikle ilgili detaylar.

Bu yeni ozellik suan icin sadece Chrome 36’da bulunmakta. Butun modern browser’lar implement ettigi zaman suan kullandigimiz butun framework’lerin cok daha performansli calismasi mumkun. Ozellikle Angular, Ember gibi framework’lerin en buyuk ozelliklerinden biri olan Two Way Data Binding‘i cok kolay bir sekilde kendi uygulamamiz icin kullanabiliriz. Basit bir ornegi icin suradaki JSFiddle’ima bakabilirsiniz.


Konuyla ilgili daha fazla bilgi icin,

Comments