jQuery üzerinden observer pattern oluşturulması

$ içinde tanımlı olan ve jQuery nesnelerine sarılan on, off, trigger metotları vardır. trigger Metodu bir tetikleyicidir ve hangi olayın tetiklenmesini istiyorsak, ilgili değişkenleri ikinci parametrede vererek çalıştırırız.


on Metodu bir olayın tetiklenmesi halinde çalışır. Birinci parametre hangi event durumunda çalışacağını, ikinci parametre ise hangi fonksiyonun çalışacağını gösterir.


off Metodu ise daha önce bir olaya eklenmiş bir metodun kaldırılması esasına dayanır.


Yukarıdaki bu metotların çalışabilmesi için önce hangi nesneye kilitlediğinizi seçmelisiniz ve bu nesne tabii ki jQuery örneği olmalı. Mesela her div'e tıklandığında zapa zupa olsun: $('div').on('click',zapaZupaFonksiyonunuCagir());
Eğer bir tıklama olmadan programatik olarak çağırmak isterseniz $('div').trigger('click',['extra parametreler']); ile çağırabilirsiniz olayları.

Şimdi biliyoruzki jQuery nesneleri on,off,trigger metotlarına sahiplerken $ buna sahip değil. Bunu sağlamak için bir jQuery nesnesi yaratalım:
var o = $({});
Bu nesneden o.trigger() diyerek metot çağırmakla o['trigger']() diyerek metot çağırmak arasında bir fark yoktur. Neticede javascript nesnesinin bir özelliğini çağırıyoruz ve fonksiyonlarda bu nesnelerin bir propertysi gibidirler.


Peki 'on' metodunun içeriği zaten jQuery içinde tanımlanmış ve sadece nesnelere bağlanabiliyorsa biz jQuery örneğimiz için on fonksiyonunun adını değiştirebilir miyiz?
o['hebeleOlsun'] = function(){ o.on.apply(o, arguments); }; burası azıcık karışık gelebilir. Baş taraf çok basit. hebeleOlsun diye bir özellik ekliyoruz "o" nesnemize. Bu nesneye anonymous bir function atıyoruz. Bu durumda o['hebeleOlsun']() ya da o.hebeleOlsun() çağrıları bu anonymous fonksiyona çağrı yapacak ve tüm parametrelerde bu metot içinde arguments dendiğinde elde edilebilecek. Şimdi sırada apply var. apply da bir metot çağrısı ama kime yapılıyor? Bir başka metotan yapılabiliyor ki burada bizim "on" metodumuzun üstünden yapıldığını farketmişsinizdir. Peki parametrelerin anlamı ne? Birinci parametre bu fonksiyon içinde this diyerek elde edebileceğimiz değişken olacak. Ki; biz burada o nesnesini gönderdik. Böylece apply ile çağırdığımız on fonksiyonu içinde artık this = o olmuştur. ON fonksiyonunun içine diğer diğer parametreleride arguments ile gönderiyoruz.

Peki biz jQuery içinden özelleştirilmiş bir olay oluşturma, bu olaya abone olma ve aboneliği silmek konusununu nasıl yazabiliriz:

<script>
        var o = $({});

        jQuery['yayinYap'] = function () {
            o.trigger.apply(o, arguments);
        };

        jQuery['uyeOl'] = function () {
            o['on'].apply(o, arguments);
        };

        jQuery['uyeOlma'] = function () {
            o['off'].apply(o, arguments);
        };

        $.yayinYap('onBasimKasindi',['bu bir event parametresi','bu da digeri',2,3,{oz:'el',li:'ck'}]);

        $.uyeOl('onBasimKasindi',function(e){ console.log('Başı kaşınan birisi var'); console.log(e); $.uyeOlma('onBasimKasindi','**'); });

Bunun pratik halleride var ama bu şeklini anladığınızda diğerleri daha anlamlı gelecektir.

Geç oldu, ben gider...