Normal JS yüklemesinin dezavantajları
Arayüz, js yüklendikten sonra render etmeye başlamalıdır
Eğer js arasında bağımlılıklar varsa, bunlar bağımlılıklara göre sırayla yüklenmelidir. Bağımlılıklar karmaşıksa, kodu yazmak ve sürdürmek daha zahmetlidir
Böylece, require.js halkın geniş kitlelerinin sesinde ortaya çıktı.
require.js
Sayfa yanıt vermemesini önlemek için js'nin asenkron yüklemesini uygulayın
Kod yazımı ve bakımını kolaylaştırmak için modüller arasındaki bağımlılıkları yönetin
require.js yükleme
Öncelikle, [resmi web sitesine] gidin http://requirejs.org/ en son sürümü indirin
İndirilmiş veya kopyalanan require.js proje dizinine yatırın
İstediğiniz sayfaya require.js yükleyin
Doğrudan yükleme: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asenkron yükleme: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Not: asenkron, bu dosyanın web sayfasının yanıt vermemesi için asenkron olarak yüklenmesi gerektiği anlamına gelir. IE asenkron desteklemez, bu yüzden erteleme özniteliğini yükleyin;
require.js yüklendikten sonra, bir sonraki adım kendi kodumuzu yüklemek. Diyelim ki kendi kod dosyamız main.js ve o da js dizininin altında yer alıyor. Yani, sadece şunu yaz: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Data-ana özniteliğinin işlevi, web programının ana modülünü belirtmektir. Yukarıdaki örnekte, bu dosya önce js dizininde main.js require.js yüklenecektir. require.js varsayılan dosya eki js olduğundan, main.js ana ile kısmalarak yapılabilir.
Ana modül nasıl yazılır
Önceki bölümden gelen main.js ana modül olarak adlandırılır. Yani tüm modül için giriş yöntemi.
Nasıl yazılır main.js
Başka modüllere dayanmadan doğrudan main.js yazılmış yöntemler
main.function()
Ana modül diğer modüllere bağlıdır, bu yüzden require() fonksiyonunu kullanın
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Burada biraz kod
});
Revire() fonksiyonu iki parametreyi kabul eder:
İlk parametre, bağlı olacak modülleri temsil eden bir dizidir
İkinci parametre, ön panelde belirtilen tüm modüller yüklendikten sonra çağrılacak bir geri çağırma fonksiyonudur. Eklenen modüller, geri çağrı fonksiyonu içinde kullanılabilmek için parametreler şeklinde aktarılır.
Modüllerin yüklenmesi
Örnek: Ana modülün (main.js) bağımlı modülü ['jquery', 'crypto-js', 'anything'] ise.
Varsayılan olarak yükleme
Bu üç bağımlı modülün dosyaları aynı dizinde jquery.js, crypto-js.js, anything.js ve main.js ise, önceki bölüme göre otomatik olarak yüklenebilirler
Config load require.config()
require.config() ana modülün (main.js) başında yazılır.
AMD modülleri nasıl yazılır
require.js modül yüklü, AMD spesifikasyonunu kullanıyor. Yani, modül AMD'nin yönetmeliklerine göre yazılmalıdır.
Özellikle, modüller belirli bir define() fonksiyonuyla tanımlanmalıdır. Bir modül diğer modüllere bağlı değilse, define() fonksiyonunda doğrudan tanımlanabilir
Şimdi bir matematik modülünü tanımlayan math.js bir dosya olduğunu varsayalım. Sonra, math.js yazalım:
İşte nasıl yükleneceği:
Modül diğer modüllere de bağımlıysa, define() fonksiyonunun ilk argümanı, modülün bağımlılıklarını gösteren bir dizi olmalıdır.
require() fonksiyonu yukarıdaki modülü yüklediğinde, önce myLib.js dosyayı yükler.
AMD dışı modülleri yükleyin
Piyasada AMD spesifikasyonunu karşılamayan birçok modül var require.js yüklenebilen
Bu modüller yüklenebilmeden önce, bazı özelliklerini tanımlamak için require.config() olarak ayarlanmaları gerekir
Örneğin noamd.js ve noamddeps.js her iki modül de AMD olmayan modüller ve yüklemek istiyorsanız özelliklerini tanımlamanız gerekir:
require.js, yol özelliğine ek olarak, AMD dışı modüllerin yapılandırılması için özel bir şim özelliğine sahip bir yapılandırma nesnesini kabul eder.
Özellikle, her modül şunları tanımlar:
- dışa aktarma değeri (çıktı değişken adı): modül harici çağrıldığında adını gösterir
- deps dizisi: bu modülün bağımlılıklarını gösterir
Örneğin, jQuery eklentisi şöyle tanımlanabilir:
require.js eklentisi
require.js ayrıca bazı özel özellikleri uygulayan çeşitli eklentiler de sunuyor
domready eklentisi, sayfa DOM yapısı yüklendikten sonra geri çağrı fonksiyonunun çalışmasına izin verir:
require.js metin ve görsel dosyalarını yüklemesini sağlayan metin ve görüntü eklentileri:
Benzer eklentiler arasında JSON ve Markdown dosyalarını yüklemek için JSON ve MDOWN bulunur.
|
Yayınlandı 11.10.2017 09:31:50
|
|
|
