Bu makalemizde, bir önceki makalemizde bulunan örneğimizi Require.JS kullanarak nasıl modüler hale getireceğimizi göreceğiz. Require.JS ile birlikte çalışmak için, öncelikle ihtiyaç duyduğumuz kütüphanesini resmi sitesinden indirmemiz gerekiyor.

Bunun için sol taraftaki "Download" linkine, ardından da sağ taraftaki "Minified" butonuna tıklamamız gerekli.





Not : Bilirsin, normalde bu dosyayı "require-2.1.8.min.js" şeklinde kaydetmeni tavsiye ederdim ancak resmi sitesindeki dokümantasyonda, bazı konfigürasyon ayarlarını manuel olarak yapmak zorunda kalmamak için dosyayı direk "require.js" ismi ile bırakmamızı söylüyor. Kütüphaneyi yazan adamdan daha iyi bilecek halimiz yok, bu şekilde bırakıyoruz.

Ufak ufak projemiz için bir klasör yapısı oluşturmaya başlayalım. Bu örnek için masaüstünde "RequireJSSample" adında bir klasör oluşturalım. Burası, bizim HTML sayfamızın bulunduğu kök dizinimiz olacak. Ardından bunun içerisine "js" isimli bir klasör oluşturalım. Burası da tüm JavaScript dosyalarının içerisinde bulunacağı klasörümüz olacak. Son olarak "js" klasörünün altına "app" ve "libs" adında iki adet klasör oluşturalım. "app" klasörü, bizim yazdığımız kodların bulunacağı asıl klasör olacak. "libs" klasöründe ise, dışarıdan kullandığımız kütüphaneler yer alacak ki, bu örnekte sadece "require.js" kütüphanesini kullanacağız.

Bu durumda, içleri boş şekilde aşağıdaki gibi bir klasör yapısının hazır olması gerekiyor.


İlk olarak, az önce indirdiğimiz "require.js" dosyasını, buradaki "libs" klasörünün içine koyalım.

Bundan sonrasında, önceki makaledeki örneğimizde yazdığımız dört JS kodunu da Require.JS'e uygun hale getirmemiz gerekecek ki aslında bu oldukça kolay bir iş (Mümkün mertebe kompleks kısımlara girmeyeceğim). Require.JS ile hazırlanan modüllerin, aşağıdaki gibi bir görüntüde olması beklenir.

"use strict";

define(["modul1", "modul2"], function (m1, m2) {

    return {

        // Modüle yazılacak kodlar

        }

    }
});

Burada "define" fonksiyonunun dizi halinde aldığı ilk parametre, eğer bu modüle yazılacak kodların başka modüllere bağımlılığı varsa, bu modüllerin isimleridir. Yukarıdaki örnekte bu modülün, aynı klasörde bulunan "modul1.js" ve "modul2.js" isimli modüllerde bulunan fonksiyonlara ihtiyacının olduğunu bildiriyoruz. Require.JS varsayılan olarak .js dosyaları ile ilgilendiği için, modüllerin sonlarındaki ".js" uzantıları yazılmaz. Aynı şekilde, modüller farklı bir klasör içerisinde bulunuyorsa, "klasor/modul1" şeklinde bağıl yol belirtilmesi gerekir.

"define" fonksiyonunun aldığı ikinci parametre ise isimsiz bir fonksiyondur ve az önce talep edilen modüller, bu fonksiyona aynı sırada parametre olarak geçilir. Böylece fonksiyon içerisinde modüllere, bu parametreler üzerinden ulaşabiliriz (Ki bunu birazdan göreceğiz).

Haydi bunu pratiğe dökelim ve ilk olarak "code4.js" dosyamızı çevirelim. Aşağıdaki kodlarla,"code4.js" dosyasını, az önce oluşturduğumuz "app" klasörüne kaydedelim.

"use strict";

define(function () {

    return {

        write3: function () {

            document.write("Veli");

        }

    }
});

"code4.js" dosyasının herhangi bir modüle bağımlılığı yoktu. Bu yüzden "define" fonksiyonunun ilk parametresini atladık ve isimsiz fonksiyon da herhangi bir parametre almadı. Benzer şekilde aşağıdaki kodlarla,"code3.js" dosyasını da "app" klasörüne kaydedelim.

"use strict";

define(function () {

    return {

        write2: function () {

            document.write("Ali");

        }

    }
});

"code3.js" dosyası da "code4.js" dosyasının neredeyse aynısı oldu. Sıra geldi "code2.js" dosyasına. Aşağıdaki kodlarla,"code2.js" dosyasını "app" klasörüne kaydedelim.

"use strict";

define(["code3", "code4"], function (c3, c4) {

    return {

        write1: function () {

            c3.write2();

            c4.write3();

        }

    }
});

"code2.js" dosyasında bulunan fonksiyon, "code3.js" dosyasında bulunan "write2" fonksiyonunu ve "code4.js" dosyasında bulunan "write3" fonksiyonunu kullanıyordu. Bu yüzden "define" fonksiyonunun ilk parametresine bu modül isimlerini geçiyoruz. Ardından bunlar isimsiz fonksiyonumuza "c3" ve "c4" isimleri ile parametre olarak geçiliyor. Son olarak, bu parametreler üzerinden "write2" ve "write3" fonksiyonlarını çağırıyoruz.

Çevrilecek tek bir dosyamız kaldı. Aşağıdaki kodlarla,"code1.js" dosyasını "app" klasörüne kaydedelim.

"use strict";

define(["code2"], function (c2) {

    c2.write1();

});

"code1.js" dosyası sadece "code2.js" dosyasındaki "write1" fonksiyonunu çağırdığı için, bağımlılık olarak sadece "code2" modül ismini verdik ve bunu da "c2" parametresi ile alarak "write1" fonksiyonunu çağırdık.

Buraya kadar yaptıklarımız aslında oldukça kolay tanımlamalardı ancak alışık olmayanlar için biraz yabancı gelebilir. Bu örneği kendi bilgisayarında da sıfırdan bir kez yaparsan, sorunsuz anlayacağına eminim.

Tüm bunların ardından, eklememiz gereken son bir JS dosyası daha var. Bu dosya, Require.JS'in konfigürasyon ayarlarını barındırır ve programın giriş kapısının hangi modül olacağını bildirir. Aşağıdaki kodlarla "app.js" isimli bir dosyayı, direk "js" klasörünün içerisine kaydedelim.

"use strict";

requirejs.config({
    "baseUrl": "js/app",
});

requirejs(["code1"]);

Burada, yazdığımız kodların root dizininin "js/app" altında olduğunu belirtiyoruz. Bu klasörün haricindeki tüm modüllere, buradan ("klasor/modul1" gibi) bağıl yol ile ulaşılması gerekir. Ardından programın başlangıcının "code1" modülü ile yapılmasını söylüyoruz.

Artık programı çalıştırmak için gerekli olan tek şey, HTML sayfamızı oluşturmak. Zaten en zevkli kısım da burası. Aşağıdaki kodlarla "sayfa.html" dosyamızı, "RequireJSSample" klasörünün altına kaydedelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script data-main="js/app" src="js/libs/require.js"></script>
</head>
<body>
</body>
</html>
]]>

Dikkat edersen, burada "require.js" haricinde hiçbir dosyayı eklememize gerek kalmadı. Tarayıcı ilk olarak "js/app" dosyasını yükleyecek, ardından da "code1" dosyasını ve onun ihtiyacı olan diğer dosyaları yükleyerek kodu çalıştıracaktır. Gelinen son noktada, aşağıdaki gibi bir dosya ve klasör yapısının oluşması gerekiyor.



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.


Bu makalede, dosyaları tek bir parçaya indirgeme ve optimize etme konularına girmiyorum. Zaten bunun öncesinde CDN üzerinden script yüklemeyi de öğrenmemiz gerekiyor. Ancak sadece bu makalede anlatılanlarla bile, modüller arası bağımlılıklar sebebiyle "script" taglarının yerlerini hesaplama eziyetinden kurtulmuş olduk. Makalemizi tamamlarken öğrendiklerimizi özetleyelim.
  • Yazdığımız kod bloklarını Require.JS'e uygun hale getirmek için, "define" fonksiyonundan faydalanırız.
  • "define" fonksiyonunda ilk parametre olarak belirtilen modüller çalışma zamanında yüklenerek, ikinci parametre olarak geçilen isimsiz fonksiyona aynı sırada parametreler olarak geçilir.
  • Geçilen bu fonksiyon parametreleri üzerinden ihtiyaç duyduğumuz dış modüldeki fonksiyonları çağırabiliriz ya da özelliklerine ulaşabiliriz.
  • HTML belgemize "script" tagı ile sadece Require.JS'i eklemek yeterlidir. Geri kalan modüller, ihtiyaç anında çözülerek asenkron olarak yüklenir.


Yorum Gönder

 
Top