جی کوئری چیست و چگونه از آن استفاده کنیم؟ – به زبان ساده

جی کوئری (jQuery) یک کتابخانه کوچک جاوا اسکریپت است که موجب می‌شود کار با HTML آسان‌تر شود. این کتابخانه کارکردهای زیادی برای دست‌کاری عناصر صفحه‌های وب ارائه می‌کند که موجب می‌شود برای ایجاد محتوای دینامیک مفید باشد. در ادامه به سؤال جی کوئری چیست و همچنین کاربردهای آن پاسخ خواهیم داد.

جی کوئری چیست و به چه منظور مفید است؟

جی کوئری همه جا حضور دارد و با اختلاف زیادی رایج‌ترین کتابخانه جاوا اسکریپت محسوب می‌شود. این کتابخانه در سیستم‌های بزرگی مانند وردپرس ادغام شده است و سؤال‌های مربوط به جاوا اسکریپت در وب‌سایت StackOverflow غالباً از طریق جی کوئری پاسخ داده می‌شوند.

این کتابخانه روش میانبری برای بسیاری از کارکردهای جی کوئری ارائه می‌کند و برای دست‌کاری HTML نیز استفاده می‌شود که غالباً کاری طولانی و ملال‌آور محسوب می‌شود. جی کوئری ساختار بسیار کوتاه‌تر و تمیزتری ارائه می‌کند و به جای این که صدها بار عبارت ()document.getElementByID را وارد کنید، می‌توانید تنها با یک کاراکتر این کار را انجام دهید و بدین ترتیب زمان توسعه به شدت کوتاه می‌شود.

بزرگ‌ترین حسن جی کوئری در تابع سلکتور آن است که برای یافتن عناصر در HTML استفاده می‌شود و به آن‌ها اشاره می‌کند. برای نمونه اگر بخواهید یک عنصر را بر اساس ID انتخاب کنید، می‌توانید به صورت زیر عمل کنید:

که بسیار آسان‌تر از نوشتن دستور زیر است:

البته این تنها روش انتخاب عناصر نیست و جی کوئری می‌تواند تقریباً از همه سلکتورهای CSS استفاده کند. این سلکتورها در تابع $ آن قرار دارند. شیء $ همچنین شامل متدهای دیگر جی کوئری مانند ()ajax.$ است.

جاوا اسکریپت مدرن در عمل همین کارکرد انتخاب را در تابع ()document.querySelectorAll خود دارد، از این رو اگر صرفاً از جی کوئری برای خلاصه کردن دستورهایی مانند زیر استفاده می‌کنید:

با تعیین اسم مستعار برای تابع‌های به صورت $ یا هر چیز دیگر می‌توانید از جی کوئری پیشی بگیرید:

اما این تنها مزیت جی کوئری نیست. جی کوئری در زمان کار با عناصر DOM بسیار بهتر از جاوا اسکریپت خالص عمل می‌کند. این کتابخانه با بهره‌مندی از تابع‌های پیمایشی (Traversal) می‌تواند یک لیست از عناصر را تجزیه و نتایج جستجو را نیز فیلتر کند. در هنگام انتخاب کردن چیزی از HTML با استفاده از جاوا اسکریپت خالص، یک فهرست ساده از عناصر DOM در اختیار شما قرار می‌گیرد، اما جی کوئری اشیای jQuery بازگشت می‌دهد که دارای متدها و مشخصه‌های دیگری نیز هستند و کار با آن‌ها فواید زیادی دارد.

جی کوئری چند قابلیت دیگر مانند انیمیشن و پشتیبانی از AJAX نیز دارد، اما انیمیشن‌های CSS خالص در اغلب موارد سریع‌تر هستند و کتابخانه‌هایی مانند axios می‌توانند درخواست‌های AJAX را بسیار بهتر از جی کوئری مدیریت کنند. جی کوئری هم اینک یک نسخه سبک را بدون این قابلیت‌ها عرضه می‌کند که موجب کاهش حجم آن به میزان 6 کیلوبایت در حالت فشرده‌سازی و minify شده می‌شود.

آیا جی کوئری موجب کند شدن وب‌سایت می‌شود؟

افزودن انواع مختلف کتابخانه‌ها، فریمورک‌ها و کدها به وب‌سایت، ساده‌ترین روش برای کُند ساختن زمان بارگذاری صفحه به خصوص برای کاربران موبایل یا اتصال‌های شبکه ضعیف محسوب می‌شود. با این حال جی کوئری یک استثنا در این زمینه است، چون حجم بسیار کمی دارد و همه جا استفاده می‌شود. بنابراین اگر از یک CDN محبوب مانند گوگل به آن ارجاع بدهید، این احتمال وجود دارد که بیش از نیمی از کاربران شما از قبل آن را روی سیستم خود به صورت کَش‌شده داشته باشند و نیازی به دانلود هیچ چیزی از روی سرور شما نداشته باشند. با این حال این موضوع به تنهایی توجیهی برای گنجاندن آن در وب‌سایت نیست، زیرا همچنان باید از حافظه سیستم کاربر بارگذاری و اجرا شود که همه این‌ها به زمان نیاز دارند.

فیلم آموزش طراحی رابط کاربری سایت با فریمورک jQuery UI در فرادرس

کلیک کنید

اگر کاربر شما کتابخانه جی کوئری را روی سیستم خود به صورت کش‌شده نداشته باشد، می‌توانید از نسخه minify و gzipp-شده آن استفاده کنید که تنها 28.78 کیلوبایت حجم دارد و احتمالاً حتی از حجم HTML شما نیز کمتر است. این راه‌حل ایده‌آلی نیست و ممکن است حتی تا یک یا دو ثانیه به زمان بارگذاری صفحه روی اتصال‌های ضعیف 3G اضافه کند.

از آنجا که جی کوئری موجب مسدود شدن رندر صفحه می‌شود، باید آن را پیش از نمایش صفحه بارگذاری کنید که برای کاربران موبایل چیز خوبی محسوب نمی‌شود. اگر می‌خواهید وب‌سایت غالباً استاتیک خود را تا حد امکان روی همه دستگاه‌ها در سریع‌ترین زمان ممکن بارگذاری کنید، احتمالاً بهتر است به جای جی کوئری از جاوا اسکریپت خالص استفاده کنید. اما اگر وب‌سایت شما به مقدار زیادی دینامیک است، جی کوئری و دیگر کتابخانه‌ها ارزش استفاده را دارند، چون سرعت توسعه را بالا می‌برند. برای وب‌سایت‌های داخل سازمانی، پنل‌های ادمین یا هر چیزی که در مواجهه با کاربر نیست، گنجاندن جی کوئری موجب ایجاد هیچ دغدغه‌ای نخواهد بود.

از کدهای بد آگاه باشید

از آنجا که جی کوئری، تابع‌های نیتیو جاوا اسکریپت را در برمی‌گیرد، همواره عملکردی پایین‌تر از جاوا اسکریپت خالص دارد و تنها مزیت آن این است که سرعت توسعه را افزایش می‌دهد. این به آن معنا نیست جی کوئری خود کُند است، اما باید مراقب کدهای غیر بهینه باشید. داشتن تعداد زیادی فراخوانی‌های تابع با تأخیر زیاد می‌تواند موجب کاهش نرخ فریم اپلیکیشن به زیر نرخ رفرش شود که از دید کاربر نهایی به صورت عملکرد با وقفه یا یک توقف واضح به چشم می‌آید.

فیلم آموزش افزونه ها در برنامه نویسی وب با جی کوئری (رایگان) در فرادرس

کلیک کنید

استفاده از حلقه‌های for به جای حلقه‌های each جی کوئری در زمان تعریف حلقه روی تعداد بالایی آیتم می‌تواند به کاهش تأخیرها کمک کند. با این که هر دوی این حلقه‌ها سریع هستند، اما حلقه‌های each کندتر هستند، گرچه خوانایی بیشتری دارند. بخش عمده این تأخیر از تأخیر در انتهای حلقه و پیش از شروع حلقه بعدی ناشی می‌شود، از این رو حلقه‌های دارای کد کمتر و طول بیشتر،‌ شاهد افت عملکردی بیشتری نسبت به حلقه‌های با کد زیاد و عناصر کم هستند.

سلکتورهای جی کوئری کند هستند. در واقع هر نوع کاری با DOM کند است، بنابراین باید فراخوانی‌های مرتبط با DOM را در اسکریپت‌های خود کاهش دهید. اگر به یک آیتم چندین بار ارجاع می‌دهید، آن را در یک متغیر کش کنید:

این کار موجب می‌شود که جی کوئری هر بار که از ساختار ()$ استفاده می‌کنید، چندین بار اقدام به جستجو برای یافتن عنصر مورد نظر شما نکند. این علامت $ در ابتدای متغیر، یک قرارداد برای نامیدن متغیرهای شیء جی کوئری است و الزامی محسوب نمی‌شود.

فرایند انتخاب جی کوئری را می‌توان با استفاده از ID-ها به جای کلاس‌ها باز هم بالاتر برد. انتخاب کردن با یک ID بسیار سریع‌تر از انتخاب کردن بر حسب کلاس است، چون جی کوئری صرفاً پیرامون متد نیتیو ()getElementByID. می‌پیچد و از «موتور انتخاب» خاص خود بهره نمی‌گیرد. اگر مجبور به انتخاب چیزی بر مبنای کلاس هستید، باید دست کم یک context یا زمینه تعیین کنید تا جی کوئری متوجه شود به دنبال چه چیزی هستید. برای نمونه از کدی مانند زیر استفاده کنید:

دستور فوق بسیار سریع‌تر از جستجو کردن ‎.class است، زیرا جی کوئری همه عناصر درون DOM را به جز عنصر container# نادیده می‌گیرد.

آیا باید از جی کوئری استفاده کنیم؟

جی کوئری یک کتابخانه و نه یک فریمورک است. یک کتابخانه برخی ابزارهای مفید برای کاربرد شما ارائه می‌کند یا یک مشکل را که جاوا اسکریپت خالص در آن عملکرد خوبی ندارد حل می‌کند. یک فریمورک مانند Recat یا Vue ساختار مستحکم‌تری محسوب می‌شود و ارتباط بیشتری با طرز کار اپلیکیشن دارد.

جی کوئری ساختار ساده‌ای دارد و موجب ایجاد سهولت زیادی در فرایند توسعه می‌شود. اگر به وب‌سایت خود چیزهای کمی اضافه می‌کنید، احتمالاً نیازی به جی کوئری نخواهید داشت، اما اگر قصد دارید محتوای دینامیک زیادی روی وب‌سایت داشته باشید، جی کوئری می‌تواند به افزایش سرعت توسعه کمک کند. اگر به تازگی با فرایند کدنویسی جاوا اسکریپت آشنا شده‌اید، یادگیری جی کوئری می‌تواند به بوت‌استرپ کردن اپلیکیشن‌های ساده کمک کند.

اما در زمینه اپلیکیشن‌های بزرگ، مزیت‌های جی کوئری کم‌رنگ‌تر می‌شوند، زیرا این کتابخانه برای تبدیل شدن به موتور وب اپلیکیشن‌ها طراحی نشده است، بلکه غالباً به جای فریمورک‌های پیچیده‌تر برای ساخت صفحه‌های دینامیک ساده مورد استفاده قرار می‌گیرد. این کتابخانه برای ساخت اپلیکیشن‌های ساده عملکرد خوبی دارد، اما استفاده از آن روی پروژ‌ه‌های بزرگ‌تر دشوار است. در این موارد شما احتمالاً به سازمان‌دهی بیشتر، ماژولار بودن و قابلیت بسط‌پذیری نیاز دارید که فریمورک‌های کامل در اختیار شما قرار می‌دهند.

با این حال جی کوئری نفوذ بسیار گسترده‌تری از کتابخانه بزرگی مانند React دارد، بنابراین اگر نمی‌خواهید کار چندان صیقل‌یافته‌ای تولید کنید، جی کوئری می‌تواند کمک زیادی به پاک‌سازی کد شما بکند. اگر روی کدبیس از قبل موجود کار می‌کنید، افزودن جی کوئری در مقایسه با یک فریمورک کامل بسیار آسان‌تر است و نیاز به ریفکتور، یادگیری و به‌روزرسانی کمتری دارد. به علاوه جی کوئری بسیار ساده‌تر از اغلب فریمورک‌های وب است و نیازمند بازنگری در طرز کار کد نیست.

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های طراحی سایت
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش کاربردی برنامه نویسی وب با جی کوئری
• آموزش مقدماتی jQuery — بخش اول: مفاهیم اولیه به زبان ساده
• آموزش مقدماتی jQuery — مجموعه مقالات جامع وبلاگ فرادرس

==