jQuery Namespacing

jQuery Namespacing

jQuery Namespacing

17.9.2015

Namespace her developer için bilmesi gereken en temel konulardan birisidir ve bu Javascript'te de böyledir. Peki Javascript'te Namespace öğrenmenin nedeni nedir? Namespace fonksiyonlarınızın daha korunaklı hale gelmesini ve kodlarınızı baz halinde toplayarak daha düzenli olmasını sağlar. Konuyu daha iyi anlayabilmeniz için örneklerle anlatmaya çalışacağım.

Örnekleri direk Firefox'un eklentisi olan Firebug Console'a kopyalarsanız kod blogu nasıl bir sonuca varıyor görebilirsiniz.

Normal bir fonksiyon :

myFunction = function() { console.log('myFunction çalışıyor...'); }; myFunction(); //fonksiyon burada çağırılıyor.

Peki buradaki sorun nedir? Aslında yok, ancak bir başka fonksiyon yazacak olursak ve adını "myFunction" koyacak olursak eski fonksiyonun üzerine yazmış olacak yani overwrite yapacaktır. İşte bu sorunu çözmek için Namespace vardır.

Temel bir namespace :

MYNAMESPACE = { myFunction: function() { console.log('MYNAMESPACE.myFunction çalışıyor...'); } }; MYNAMESPACE.myFunction(); //fonksiyon burada çağırılıyor.

Evet, şimdi hiçbir şekilde fonksiyonunuz overwrite yapılamaz ve MYNAMESPACE adında namespace'in blogu içersindedir. Fonksiyonu çağırmak için fonksiyon isminden önce namespace ismini yazmanız yeterli olacaktır.

Birden fazla fonksiyonlu namespace :

MYNAMESPACE = { myFunction1: function() { console.log('MYNAMESPACE.myFunction çalışıyor...'); }, myFunction2: function() { console.log('MYNAMESPACE.myFunction çalışıyor...'); } } MYNAMESPACE.myFunction1(); //fonksiyon burada çağırılıyor. MYNAMESPACE.myFunction1();

İç içe namespace kullanımı :

var MYNAMESPACE = {}; MYNAMESPACE.SUBNAME = {     myFunction: function()     {         console.log('MYNAMESPACE.SUBNAME.myFunction çalışıyor...');     }     }; MYNAMESPACE.SUBNAME.myFunction(); //fonksiyon burada çağırılıyor.

Burada MYNAMESPACE, SUBNAME ve myFunction sizin vereceğiniz isimler olacaktır.

JQuery namespace yapısı :

var MYNAMESPACE = {}; (function($) {     MYNAMESPACE.SUBNAME = {         myFunction: function()         {             console.log('MYNAMESPACE.SUBNAME.myFunction çalışıyor...');         }     };     })(jQuery); MYNAMESPACE.SUBNAME.myFunction(); //fonksiyon burada çağırılıyor.

Tabiki öncelikle kodların doğru çalışması için JQuery kütüphanesinin yüklü olması gerekmektedir. Ayrıca namespace'in JQuery blogundan önce tanımlanmış olması gerekir yoksa şöyle bir hatayla karşı karşıya kalabilirsiniz: ‘ReferenceError: MYNAMESPACE is not defined’.

Evet, genel olarak namespace'i, javascript'te namespace'in neden ve nasıl kullanıldığını ve en son olarak JQuery'de namespace yapısını anlattık. İnşallah faydalı olmuştur.

İLETİŞİM

İletişim Bilgileri

Adres
Kızlarpınarı Mh. Spor Cd. Can Apt. No:28/A Alanya, Antalya
Telefon
(+90) 242-966-2119
Email
info@tulparyazilim.com

İletişime Geç