RequireJS یک راه موثر برای بهبود سرعت و کیفیت کد جاوا اسکریپت شما است و علاوه بر این، آن را بسیار خواناتر و نگهداری آن را آسان تر می کند.

در این مقاله من شما را با RequireJS و روش شروع استفاده از آن آشنا می کنم. ما نیاز به فایل ها و تعریف یک ماژول و حتی لمس را بررسی خواهیم کرد روی بهینه سازی

به زبان ساده require.js یک بارگیری اسکریپت است که به شما امکان می دهد کد جاوا اسکریپت خود را در فایل ها و ماژول ها قرار دهید و بنابراین وابستگی های هر مدل را مدیریت کنید.

فایل های مورد نیاز

برای شروع کار با RequireJS و تعریف ماژول آسنکرون آن (AMD) ابتدا باید دانلود کنید آن را، سپس به فایل require.js در سر سند ما پیوند دهید مانند این:

<script src="https://www.webdesignerdepot.com/2013/02/optimize-your-javascript-with-requirejs/require.js" data-main="main"></script>

ممکن است تعجب کنید که این چیست داده اصلی ویژگی است، به خوبی استفاده از RequireJS به این معنی است که وقتی تماس می گیرید نیاز دارند در سر سند خود نیز به فایل اصلی برنامه جاوا اسکریپت خود پیوند می دهید داده اصلی ویژگی یک پیوند به فایل اصلی جاوا اسکریپت برای برنامه شما است، در این مورد main.js. (توجه داشته باشید که RequireJS به طور خودکار js را در انتهای نام فایل اضافه می کند.)

در این فایل main.js پیکربندی RequireJS را قرار می‌دهید، ماژول‌های خود را بارگیری می‌کنید و یک مسیر پایه برای استفاده در هنگام نیاز به فایل‌ها تعریف می‌کنید.

تابع نیاز

RequireJS از یک ساده استفاده می کند نیاز دارند تابعی برای بارگذاری در اسکریپت ها، در این مثال RequireJS jQuery را بارگذاری می کند:

require(("jquery"), function($) {
 return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

یکی از بهترین چیزهایی که در مورد RequireJS وجود دارد این است که بسیار خوانا است، اگر به آن بلوک کد نگاه کنید، می بینید که ابتدا نیاز فایل با نام jquery.js را می گیرد و یک تابع ناشناس با پارامتر jQuery $ به عنوان پارامتر ارسال می کند. ، وقتی این کار انجام شد، می توانید از تمام کدهای JQuery استفاده کنید.

اکنون، شما معمولاً کتابخانه jQuery را در فایلی به نام jquery.js ندارید، همانطور که در مورد اکثر افزونه ها و فریم ورک ها، ما معمولاً انتخاب می کنیم که سپس از GitHub یا Google CDN آنها بارگذاری شود، و برای این کار باید مسیرها را به گونه ای پیکربندی کنیم. که آنها به مکان مناسب اشاره می کنند:

require.config({
 paths: {
 "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

این بدان معناست که می توانید از طریق گوگل به جی کوئری نیاز داشته باشید و بدون مشکل از آن استفاده کنید. (توجه داشته باشید که من از نام “jquery” در این مثال استفاده کرده ام، اما شما می توانید آن را هر چیزی که دوست دارید نامگذاری کنید.)

تعریف ماژول

استفاده از الگوی AMD به این معنی است که کد ما را می توان در ماژول ها ساخت. این مدل ها فقط تکه هایی از کد هستند که کاری را در برنامه ما انجام می دهند. شما می توانید دو خط کد را در یک ماژول یا 100 قرار دهید، فقط بستگی دارد روی کاری که می خواهید آن ماژول انجام دهد.

برای تعریف یک ماژول از کدی مانند زیر استفاده می کنیم:

define(function () { 
 function add (x,y) {
 return x + y;
 }
});

در این مثال من یک ساده ایجاد کرده ام اضافه کردن تابعی بدون وابستگی است، اما اگر این تابع برای درست کار کردن به jQuery نیاز داشته باشد، تابع define به شکل زیر ساخته می شود:

define((‘jquery’), function () { 
 function place(mydiv) {
 return $(mydiv).html(‘My Sample Text’);
 }
});

با استفاده از این نحو، به جاوا اسکریپت می گوییم که ابتدا جی کوئری را دریافت کنید و سپس کد را اجرا کنید تا در صورت نیاز جی کوئری در دسترس باشد. همچنین می‌توانیم از این در ماژول‌هایی که در فایل‌های جاوا اسکریپت نوشته‌ایم استفاده کنیم، این به چارچوب‌ها یا افزونه‌ها محدود نمی‌شود.

بهینه سازی

همانطور که می بینید RequireJS یک ابزار عالی برای سازماندهی فایل های شما در ماژول ها و بارگیری فقط موارد مورد نیاز است. نکته منفی این است که تعداد زیادی فایل جاوا اسکریپت منجر به زمان بارگذاری ضعیف می شود، به همین دلیل RequireJS شامل یک بهینه ساز برای جمع آوری داده ها از تمام فایل ها و قرار دادن آن در یک فایل کوچک شده.

در مجموع، RequireJS یکی از بهترین راه‌ها برای سازماندهی و بهینه‌سازی جاوا اسکریپت برای وب مدرن است.

آیا از RequireJS در پروژه ای استفاده کرده اید؟ آیا روند کار شما را بهبود بخشیده است؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر جعبه ها از طریق Shutterstock.