Temel JavaScript: en iyi beş komut dosyası yükleyici

Yazar: Peter Berry

Yaratılış Tarihi: 14 Temmuz 2021

Güncelleme Tarihi: 13 Mayıs Ayı 2024

Temel JavaScript: en iyi beş komut dosyası yükleyici - Yaratıcı

İçerik

Komut dosyası yükleyiciler genel olarak nasıl çalışır?
01. HeadJS
02. GerekliJS
03. yepnope.js
04. LABjs
05. TembelYük
06. Sonuç
Bunu beğendin mi? Bunları oku!

Bu, Backbone.js gibi ön uç çerçeveler, Handlebars.js gibi şablon oluşturma motorları ve diğerleri dahil olmak üzere bir dizi kategorideki kaynakları inceleyecek bir dizi normal makalenin ilkidir. JavaScript kaynaklarının sayısı her geçen gün artıyor, bu da geliştiriciler için harikadır, ancak çoğu zaman eldeki duruma en uygun olanı seçmek kafa karıştırıcı veya bunaltıcı hale gelebilir. Çoğunlukla kesin bir çözüm yoktur ve umarız bu seri, belirli çözümlerin en iyi olduğu bilgileri ve vakaları sağlar.

Komut dosyası yükleyiciler genel olarak nasıl çalışır?

Teori, komut dosyası yükleyicilerinin, komut dosyası> etiketleri kullanılarak birden çok komut dosyası yüklenirken sayfanın yüklenmesini engellediğidir; bir sayfa yalnızca tüm JS komut dosyaları yüklendikten sonra kendini oluşturabilir. Bu, tüm komut dosyalarınızı tek bir dosyada küçülterek kısmen reddedilebilir, ancak yine de sayfanın oluşturulmasını engelleyecektir. Bu nedenle, komut dosyalarında hem eşzamansız hem de paralel (aynı anda birden çok dosya) yükleyebilen kod yükleyiciler, belirgin bir avantaj sunar. JS'nizi tek bir dosyada birleştirip küçültseniz bile, bir komut dosyası yükleyici aracılığıyla dahil etseniz bile, geleneksel olarak bir komut dosyası> etiketiyle eklemekten daha iyi performans gösterir.

Çoğu komut dosyası yükleyici, kullanımlarında çok benzer bir model izler. İlk adım, yüklenecek dosya adlarını iletmektir:

genericScriptLoader.load ("jquery.js", "undercore.js");

Komut dosyaları eşzamansız olarak yüklendiğinden, istediğiniz zaman bu komut dosyalarına dayanan herhangi bir kodu çalıştıramazsınız. Genellikle, gerekli kitaplıkları yükleyen kod> etiketlerinin altındaki komut dosyalarımıza bağlı olandan kod ekleriz; Eşzamansız olarak yüklerken, kodunuz yürütüldüğünde bağımlılıklarınızın yükleneceğini garanti edemeyeceğiniz için bu işe yaramaz. Tüm komut dosyası yükleyicilerin sağladığı çözüm, komut dosyaları yüklendikten sonra çağrılacak bir yöntemdir. Bunlar, tüm komut dosyaları yüklendiğinde yürütülecek bir işlevi kabul eder.

genericScriptLoader.ready (function () {
// kodunuz buraya gelecek
});

Şimdi genel bir komut dosyası yükleyicinin temellerini ele aldık, şimdi seçtiğim beş taneye ve her birinin artılarını ve eksilerini ele alalım.

01. HeadJS

İlki, Tero Piirainen tarafından yaratılan HeadJS'dir. HeadJS, en popüler komut dosyası yükleyicilerden biriydi, ancak son aylarda güncellenmedi, Github deposundaki son kayıt on ay önceydi. Buna rağmen, incelemeye değer mükemmel bir betik yükleyici olmaya devam ediyor. HeadJS'nin temel kullanımı çok basittir:

head.js ("jquery.js", "app.js", "twitter.js", işlev () {
// tüm komut dosyaları yüklendiğinde çağrılır
});

Kodu yükleme işlevine geri arama olarak iletmek istemezseniz, şunu kullanabilirsiniz: head.js () dosyaları yüklemek ve ardından kodunuzu head.ready:

head.js ("jquery.js", "app.js");
head.ready (function () {
// tüm komut dosyaları yüklendiğinde çağrılır
});

HeadJS'nin en iyi özelliklerinden biri, komut dosyalarınızı etiketleme ve belirli komut dosyaları yüklendikten sonra kodu çalıştırma yeteneğidir. Örneğin, jQuery ve Google Analytics olmak üzere iki komut dosyası yüklediğinizi varsayalım, ancak kodunuz yalnızca jQuery'ye dayalıdır, bu nedenle jQuery yüklenir yüklenmez çalıştırmak istersiniz. HeadJS bunu yapmanın gerçekten güzel bir yolunu sunuyor:

head.js ({jQuery: "yol / / jquery.js"},
{gAnalytics: "path / to / analytics.js"});

head.ready ("jQuery", function () {
// jQuery'ye dayanan ancak analytics.js'ye dayanmayan kod
});

Dosyaları etiketlemek istemezseniz, içeri aktarabilirsiniz head.ready () dosya adı ve aynı şeyi başarır:

head.js ("yol / / jquery.js", "/ analytics.js");

head.ready ("jquery.js", işlev () {});

02. GerekliJS

Sırada, RequireJS'ye göz atmanın zamanı geldi. RequireJS, HeadJS ve diğer yükleyicilerden biraz farklı çalışır. Yapmanız gereken ilk şey, RequireJS kaynağını dahil etmektir, ancak aynı zamanda, RequireJS'ye ana JavaScript dosyanızın yolunu bildiren script> etiketinde data-main niteliğini de ayarlamaktır. Örneğin:

script data-main = "app" src = "require.js"> / script>

Bu, ana JS dosyanızın "app.js" başlıklı olduğunu ve script> etiketinin bulunduğu dosyayla aynı dizinde olduğunu varsayar. JS'niz "scripts>" alt dizinindeyse, RequireJS'ye şu yolu verirsiniz:

script data-main = "scripts / app" src = "require.js"> / script>

Bunun sonuna nasıl ".js" eklemeniz gerekmediğine dikkat edin, RequireJS bunu sizin için kapladı.

Şimdi, ana dosyada (benim durumumda, app.js) gerekli () işlevi. gerekli () fonksiyon, yüklenecek komut dosyaları ve bu komut dosyaları yüklendikten sonra çalıştırılacak fonksiyon olmak üzere iki argüman alır. Komut dosyası yollarının app.js yoluna göre olduğunu unutmayın:

gerekli ([’lib / jquery’], function () {
// jQuery yüklendiğinde çalıştırılacak kod
});

Bu, RequireJS'nin temel kullanımıdır, ancak aslında çok daha fazlasını yapabilir. RequireJS, yüklenebilecek modülleri tanımlamak için bir yöntem olan AMD (asenkron modül tanımı) spesifikasyonunu uygular. Tüm kodunuzu modüller halinde, özellikle RequireJS’ler aracılığıyla yazarsınız. tanımlamak() işlevi.Bu, tümü diğerlerine bağlı olarak birden çok komut dosyası içeren büyük bir uygulamanız olduğunda harika bir yaklaşımdır. Bu makalede bu konuya değinmek için çok fazla şey olsa da (yalnızca RequireJS üzerine birden fazla makale yazabilirim), Jim Hoskins, RequireJS ile kendi modüllerinizi oluşturma ve kullanma üzerine harika bir yazı yazdı ve bunu şiddetle tavsiye ederim.

03. yepnope.js

yepnope.js, HeadJS veya RequireJS'den biraz farklı bir amaca sahip bir komut dosyası yükleyicidir. yepnope, doğru veya yanlış olarak değerlendirebileceğiniz herhangi bir ifadeye dayalı olarak komut dosyalarında koşullu olarak yüklenebilen bir kaynak yükleyici olacak şekilde tasarlanmıştır. Çoklu dolgulara yükleme yapmak için tasarlanmıştır. Tarayıcı bir şeyi desteklemediği için ne sıklıkla fazladan JS yazmak zorunda kaldınız? Bu, özellikle tüm tarayıcıların henüz uygulamadığı yepyeni API'ler ve özellikler kullanıyorsanız, oldukça sık meydana gelen bir durumdur. Modernizr gibi bir özellik algılama kitaplığına mükemmel bir şekilde uyuyor - öyle ki Modernizr kaynağı aslında içinde yepnope içeriyor.

Yepnope kullanmak kolaydır. Kullanıyoruz evet () işlev, şuna benzer bir nesneyi iletmek:

yepnope ({
test: Modernizr.placeholder,
hayır: "yer tutucu-polyfill.js"
});

Burada, yerel olarak desteklenmiyorsa, HTML5 yer tutucu öznitelikleri için bir çoklu dolguyu yüklüyorum. Elbette sadece Modernizr testleri ile sınırlı değiliz. Ya bir sınıf ekliyorsak html> Tarayıcı IE8 veya daha azsa ve buna dayalı olarak dosyalara yüklemek istiyorsanız ".ie" etiketi?

yepnope ({
test: $ ("html"). hasClass ("ie"),
yep: "ie-fixes.js",
hayır: "ie.js olmayan"
});

"Yükleme" yoluyla koşulsuz bir komut dosyası yüklemek ve bu komut dosyasına dayanan bir test gerçekleştirmek de kolaydır:

yepnope ({
load: [’path / to / jquery.js’, ’app.js’],
complete: function () {
$ (işlev () {
yepnope ({
test: $ ("html"). hasClass ("ie"),
yep: "ie-fixes.js",
hayır: "ie.js dışı",
});
});
});
});

Yepnope'un mutlaka en hızlı komut dosyası yükleyici olması gerekmediğini, amacının bu olmadığını, ancak oradaki başka hiçbir kaynakla eşleştirilemeyen koşullu yükleme sunduğunu belirtmek gerekir.

04. LABjs

Bu makaledeki sondan bir önceki teklifimiz Kyle Simpson tarafından yazılan LABjs. Komut dosyalarını verimli ve hızlı bir şekilde yükleyen çok amaçlı bir JavaScript yükleyici olacak şekilde tasarlanmıştır. Söz dizimi, bu makalede ele alınanlardan biraz farklıdır, ancak yine de anlaşılması ve kullanılması kolaydır.

Örneğin, jQuery ve yüklenecek bir eklentimiz olduğunu varsayalım. LABjs ile bunu şöyle yapardık:

$ LAB.script ("yol / jquery.js"). Wait () .script ("yol / / plugin.js")

Bir dizi dosyayı iletmek yerine, .senaryo() Yüklemek istediğimiz her dosya için. LABjs ayrıca bağımlılıkları farklı şekilde belirtir. Buraya .Bekle() eklentiye yüklenmeden önce jQuery'nin yüklenmesini beklemek anlamına gelir. Bu, eklenti yüklenmeden önce jQuery'nin yüklendiğinden emin olabileceğiniz anlamına gelir. Her şey yüklendikten sonra biraz kod çalıştırmak istiyorsanız, Bekle():

$ LAB.script ("yol / / jquery.js"). Wait () .script ("/ plugin.js") .wait (function () {// her iki dosya yüklendikten sonra çalıştırılacak kod} );

Belgelerde LABjs kullanımı hakkında daha fazla bilgi edinebilirsiniz. Bununla birlikte, bu makaleyi yazarken, LABj'lerde daha fazla gelişme olmayacağının duyurulduğunu belirtmek önemlidir. Bu utanç verici olsa da, güvenilir bir komut dosyası yükleyici olarak kalır (ve korumak veya hataları düzeltmek istiyorsanız kod da Github'dadır) ve bu makaleye dahil etmenin değerli olduğunu hissettim.

05. TembelYük

Son olarak, ama en azından, Ryan Grove'un yazdığı LazyLoad'a bir göz atmak istiyorum. LazyLoad, bir şeyi ve bir şeyi iyi yapmak için yola çıkar. Size gösterdiğim tüm yükleyiciler arasında en küçüğüdür (1KB'den daha az küçültülmüş) ve kasıtlı olarak küçük ve CSS ile JavaScript yüklemeleri için kullanımı basit olacak şekilde yazılmıştır. İşlevsellik seti diğer bazı çözümlerden daha küçüktür, ancak bu beklenen bir durumdur. Bir veya birden çok dosyayı yüklemek için kullanımı kolaydır:

LazyLoad.js ("jquery.js", function () {// jQuery yüklendi}); LazyLoad.js (["jquery.js", "plugin.js"], işlev () {// birden çok dosya yüklendi});

LazyLoad, dosyaları sırayla değil paralel olarak yükler; bu nedenle, bir komut dosyasını yüklemeniz gerektiğinde, ancak yalnızca başka bir komut dosyası yüklediğinde, en iyi yaklaşım şudur:

LazyLoad.js ("jquery.js", function () {LazyLoad.js ("plugin.js", function () {// eklentiyi çalıştır});});

İşlevsellik, CSS'de yükleme için çok benzer, ancak .css () işlevi.

06. Sonuç

Umarım bu makale bazı popüler kütüphaneleri ve bunların en iyi nasıl kullanılacağını göstermeye hizmet etmiştir. Farklı kütüphaneler farklı şeyleri daha iyi yapar ve her zaman elinizdeki durum için en iyisini seçmelisiniz. Şahsen, birkaç basit komut dosyasından daha fazlası, işlevsellikle dolu RequireJS'e bakma eğilimindeyim. Polyfiller ile çalışıyorsam, her seferinde evet ve basit bir şey için genellikle HeadJS'yi tercih ederim. Ancak, bu, bu seçeneklerin size uygun olacağı anlamına gelmez, bu nedenle, onlar hakkında iyi bir bilgi edinmek ve eldeki durum için en iyisini seçebilmek için mümkün olduğunca çok şeyi denemenizi tavsiye ederim.

Jack Franklin, İngiltere'nin Londra şehrinde yaşayan 20 yaşında bir geliştiricidir. Javascriptplayground.com'da bir JavaScript blogu çalıştırıyor ve ayrıca PHP, Ruby ve diğer dilleri de yazıyor. @Jack_Franklin olarak tweet atıyor.