RequireJS JavaScript kodunuzun hızını ve kalitesini artırmanın etkili bir yoludur, ek olarak daha fazla okunabilir ve bakımı daha kolay hale getirir.
Bu yazıda sizi RequireJS ile tanıştıracağım. Dosyaları istemek ve bir modül tanımlamaktan ve hatta optimizasyona bile değineceğiz.
Basit bir ifadeyle require.js, JavaScript kodunuzu dosyalara ve modüllere kaydırarak her modelin bağımlılıklarını yönetmenizi sağlayan bir betik yükleyicidir.
RequireJS ve onun Asynchronous Module Definition (AMD) ile çalışmaya başlamak için öncelikle indir Daha sonra belgenin başındaki requir.js dosyasına bağlanın:
Bu data-main niteliğinin ne olduğunu merak ediyor olabilirsiniz, RequireJS kullanımı, sizin de belgenizin başına girdiğinizde, JavaScript uygulamanızın ana dosyasına da bağlandığınız anlamına gelir, veri-ana niteliği Bu durumda, ana.js uygulamanız için ana JavaScript dosyası. (RequireJS'nin otomatik olarak .js dosyasının sonuna eklendiğini unutmayın.)
Bu main.js dosyasında, RequireJS için yapılandırmayı yerleştirecek, modüllerinize yükleyecek ve dosyalar gerektiğinde kullanılacak bir temel yol tanımlayacaksınız.
RequireJS, betiklere yüklemek için basit bir gereksinim işlevi kullanır, bu örnekte RequireJS jQuery yükler:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});RequireJS ile ilgili en iyi şeylerden biri, çok okunabilir olmasıdır, eğer bu kod bloğuna bakarsanız, ilk gereksinimin dosyayı jquery.js adıyla yakaladığını göreceksiniz ve jQuery's $ ile bir anonim işlevini parametre olarak geçirir. Bu yapıldığında, istediğiniz tüm JQuery kodunu kullanmakta serbestsiniz.
Şimdi, normalde jQuery kitaplığını jquery.js adlı bir dosyada, çoğu eklenti ve çerçevede olduğu gibi, normalde GitHub'larından veya Google CDN'lerinden yüklemeyi tercih edersiniz ve bunun için yolları yapılandırmamız gerekir. Doğru yere işaret ettiler:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Bu, jQuery'yi Google üzerinden talep edebileceğiniz ve sorunsuz bir şekilde kullanabileceğiniz anlamına gelir. (Bu örnekte “jquery” ismini kullandığımı unutmayın, fakat istediğiniz her şeyi arayabilirsin.)
AMD desenini kullanmak, kodumuzun modüller halinde yapılandırılabileceği anlamına gelir; Bu modeller, uygulamanızda bir şeyler yapan kodların sadece bir parçasıdır. Bir modüle veya 100'e iki satırlık kod yerleştirebilirsiniz, sadece bu modülün yapmasını istediğiniz şeye bağlıdır.
Bir modülü tanımlamak için aşağıdaki gibi kod kullanıyoruz:
define(function () {function add (x,y) {return x + y;}});Bu örnekte, bağımlılık içermeyen basit bir ekleme işlevi oluşturdum, ancak bu işlevin düzgün çalışması için jQuery gerekliyse, tanım işlevi şöyle yapılandırılabilir:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Bu sözdizimini kullanarak JavaScript'i jQuery olsun, önce jQuery olsun ve sonra jQuery gerektiğinde kullanılabilir şekilde çalıştıracağız. Bunu, JavaScript dosyalarında yazdığımız modüllerde de kullanabiliriz. Bu, çerçeveler veya eklentilerle sınırlı değildir.
Görebildiğiniz gibi, RequireJS, dosyalarınızı modüller halinde düzenlemek ve sadece ihtiyacınız olan şeyleri yüklemek için harika bir araçtır. Dezavantajı, çok fazla sayıda JavaScript dosyasının kötü yükleme süreleriyle sonuçlanmasıdır, bu nedenle RequireJS bir iyileştirici Tüm dosyalardan veri toplamak ve tek bir küçültülmüş dosyaya yerleştirmek.
Sonuç olarak, RequireJS, modern web için JavaScript'inizi düzenlemenin ve optimize etmenin en iyi yollarından biridir.
Bir projede RequireJS kullandınız mı? İş akışınızı geliştirdi mi? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, kutu resmi Shutterstock üzerinden.