Bu makalemizde, CDN üzerinde host edilen bir kütüphanenin Require.JS ile nasıl kullanılacağını göreceğiz.

Öncelikle CDN nedir ve neden kullanırız sorusuyla kısa bir giriş yapalım. Bazı kütüphaneler vardır ki, bunu neredeyse herkes kendi projelerinde veya web sayfalarında kullanır. Bunlara en bariz örnek JQuery'dir. Biz JQuery'i projemizde kullanmak için minimize edilmiş kütüphanesini indirip kendi klasör yapımızda bir yerlere koyabilir ve buradan referans verebiliriz. Böylece kullanıcılarımız programımızı açtığında, bu kütüphane de tarayıcı tarafından indirilerek kullanıma hazır hale gelir. Tarayıcı bu dosyayı bir kez indirdikten sonra, aynı domain altındaki diğer sayfalar için tek tek indirmek yerine bu dosyayı Cache'e atar ve oradan kullanır.


Ancak dedik ya, bu kütüphaneleri herkes kullanıyor. O halde, bir hayırsever gidip bunu ortak bir noktaya koysa da, herkes bu ortak noktadan referans gösterse, bu durumda farklı projeler ve siteler olmasına karşın aynı url üzerinden bu dosyalara ulaşılmaya çalışıldığı için, tarayıcı bu dosyaları her zaman Cache'den getirecektir ve farklı farklı projeler için de ayrı ayrı indirmek zorunda kalmayacaktır. Bu, CDN kullanmanın güzel bir sebebi olabilir.

Bir sonraki makalede, yazdığımız programdaki tüm JS dosyalarını nasıl tek bir bütün haline getireceğimizi öğreneceğiz. Eğer ortak kütüphaneleri CDN üzerinden kullanırsak, bu kütüphanelerin bizim son çıktıya dahil olmasına da gerek kalmaz, böylece çıktı dosyamızın boyutu da daha küçük olur. Bu da, CDN kullanmanın diğer bir güzel sebebi olabilir.

Elbette CDN kullanmak için birkaç ön şartı yerine getirmek gerekli. Öncelikle istemcilerin, kullandığımız CDN adresine, dolayısıyla internete erişiminin olması gerekir. Aksi takdirde, kütüphaneleri kendi çıktımıza gömmekten başka şansımız kalmaz. Ayrıca kullandığımız CDN'in de, sağlam, sürekli ayakta kalan ve güvenilir birilerine ait olması gerekir.

Dikkat edecek olursan, bu blokta yazdığım tüm makalelerde JQuery'i Google CDN'inden referans veriyorum. HTML'lere eklediğim "script" tagını aşağıda görebilirsin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


Bu makalemizde de örnek olarak, bir önceki makalemizde Require.JS kullanarak hazırladığımız örneğimize Google CDN'inden JQuery referansını vereceğiz ve bu referansları "code3.js" ve "code4.js" dosyalarında kullanacağız. Haydi başlayalım.

Aslında bunun için yapacağımız iş oldukça basit. İlk olarak "js" klasörü altında bulunan "app.js" dosyasının içeriğini aşağıdaki gibi değiştirelim.

"use strict";

requirejs.config({
    "baseUrl": "js/app",
    "paths": {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min"
    }
});

requirejs(["code1"]);


Gördüğün gibi, konfigürasyon dosyamıza "paths" adında bir kısım ekledik ve "jquery" değerine karşılık JQuery'nin Google CDN adresini, sonunda ".js" olmadan verdik. Aslında işimiz bu kadar. Artık istediğimiz yerlerde, "jquery" modül ismiyle JQuery komutlarını kullanabiliriz.

"code3.js" dosyası ile başlayalım ve içeriğini aşağıdaki gibi değiştirelim.

"use strict";

define(["jquery"], function ($) {

    return {

        write2: function () {

            $("body").append("Ali");

        }

    }
});


Bir önceki aşamada "jquery" modülünün adresini tanımlamıştık. Burada bağımlılık olarak "jquery" modül ismini verdik ve fonksiyonun parametresinde bunu "$" şeklinde aldık. Artık alışık olduğumuz gibi "$" işareti ile JQuery komutlarını kullanabiliriz ki "write2" fonksiyonu içerisinde de öyle yaptık.

Benzer şekilde "code4.js" dosyasının içeriğini aşağıdaki gibi değiştirelim.

"use strict";

define(["jquery"], function ($) {

    return {

        write3: function () {

            $("body").append("Veli");

        }

    }
});


Hepsi bu kadar. Konfigürasyon dosyasındaki "paths" kısmında tanımladığımız dış modülleri, sanki kendi modülümüz gibi kullanabiliyoruz. Hatta buraya CDN haricinde lokalde bulunan bir kütüphanenin yolunu da yazarsak, aynı şekilde kullanmamız mümkün olur.

Not : Kütüphaneleri bu şekilde kullanabilmemiz için, bahsi geçen kütüphanenin ya AMD (Asynchronous Module Definition) yapısına uygun yazılmış olması, ya da bu kütüphanenin de başka kütüphanelere bağımlılıklarının olmaması gerekir. Eğer AMD yapısına uygun yazılmadıysa ve onun da başka kütüphanelere bağımlılıkları varsa, bunun için Require.JS konfigürasyon ayararındaki "shim" kısmını kullanmak gerekir. Bizim şimdilik bu tarz bir kütüphane ile işimiz olmadığı için, bu kısımlara hiç girmiyorum ama merak edenler buradan "shim" ile ilgili kısımları inceleyebilirler.

Artık uygulamayı çalıştırabiliriz. Hazır yazılmışını görmek istersen buraya tıklayabilirsin. Aşağıdaki gibi bir görüntü ile karşılaşmış olman gerekiyor.


Makalemizi tamamlarken öğrendiklerimizi özetleyelim.
  • Herkes tarafından ortak kullanılan kütüphaneleri CDN üzerinden referans gösterirsek, tarayıcının Cache'inde hazır bulunan dosyalardan faydalanabiliriz.
  • CDN'de bulunan bir kütüphaneyi modül olarak eklemek için, Require.JS'in konfigürasyon dosyasındaki "paths" kısmına bu kütüphaneyi eklemek gerekir.
  • Bu işlemin ardından, "paths" kısmında verdiğimiz isim ile birlikte sanki kendi modülümüzmüş gibi bu kütüphaneye ulaşabilir ve kullanabiliriz.


Yorum Gönder

  1. çok teşekkürler,
    ama cdn örneği çalışmıyor.
    bir bakıp düzeltebilir misiniz? cdn src si hatalı. düzeltilmiş hali de kodu çalıştırmıyor.

    YanıtlaSil
  2. Yukarıdaki örneğe tıklayınca açılan sayfada örnek sorunsuz çalışıyor gözüküyor. Sorun devam ediyor mu?

    YanıtlaSil

 
Top