بررسی jQuery و کاربرد آن در توسعه وب اپلیکیشن ها

در این درس می خواهیم در رابطه با کتابخانه jQuery و کاربرد آن در توسعه اپلیکیشن های وب صحبت کنیم. احتمالاً می‌دانید که زبان برنامه نویسی جاوااسکریپت امروزه با سرعت بسیار زیادی در حال استانداردسازی می باشد. کتابخانه jQuery هرچند یک کتابخانه قدیمی است، اما در توسعه وب اپلیکیشن های امروزی بسیار پرکاربرد است. اپلیکیشن‌هایی که قرار است با html و CSS کار کنند و حتی AJAX call هایی را به Web API ها ارسال نمایند، می توانند از jQuery استفاده کنند. موضوع مهم در رابطه با jQuery این است که بر اساس document object model و یا DOM کار می‌کند و یک روش imperative و نه declarative را در اختیار ما قرار می‌دهد. در رابطه با jQuery می توانید از آموزش متنی توسعه وب با جی کوئری (jQuery) و آموزش ویدئویی توسعه وب با جی کوئری (jQuery) و آموزش ویدئویی توسعه وب با جی کوئری موبایل (jQuery Mobile) دیدن کنید. در ادامه در رابطه با ذات imperative بودن jQuery صحبت خواهیم کرد.

فرض کنید که قرار است یک textbox در یک Web page قرار داده شود و زمانی که مقدار درون آن textbox از ده بیشتر به شود یک عنصر دیگر بر روی همان Web page ظاهر بشود. با استفاده از کتابخانه jQuery به سادگی می‌توان با لحاظ کردن یک event handler و نوشتن یک کد ساده مقدار درون textbox را بررسی کرد و مقدار visibility مربوط به element مورد نظر را بر اساس مقدار درون آن textbox تنظیم نمود. این روش imperative می باشد چرا که نیاز به نوشتن کد دارد. به عبارت دیگر هر وقت که نیاز به نوشتن کد برای انجام کاری را داشته باشید و خودتان به صورت قدم به قدم ذکر کنید که می بایست چه کاری انجام بشود، در حال استفاده کردن از مدل imperative هستید. ممکن است یک فریم ورک دیگر از روش declarative استفاده کند. روش declarative اغلب با استفاده از databinding اتفاق می‌افتد و برنامه نویس نیاز به نوشتن کد خاصی ندارد. در این روش به سادگی می‌توان مقدار visibility مدیریتی مربوط به عنصر مورد نظر را به value وارد شده در textbox اصطلاحاً bind نمود. این روش نیازی به نوشتن کد ندارد و فقط با درگیر کردن element ها در databinding پیاده سازی می شود. با پیچیده‌تر شدن رفتارهای وب اپلیکیشن ها در Client side استفاده کردن از روش های declarative و همین مکانیزم databinding می تواند کمک کند تا حجم کد نوشته شده کمتر بشود و از پیچیدگی برنامه کاسته شود.

مقایسه jQuery و یک فریم ورک SPA

یکی از تفاوتهای بسیار مهم در استفاده کردن از کتابخانه jQuery نسبت به استفاده کردن از فریم ورک های ساخت اپلیکیشن های SPA از قبیل Angular همین declarative بودن این فریم ورک ها و imperative بودن کتابخانه jQuery می باشد. علاوه بر این موضوع برای حل و فصل کردن کمبودهای کتابخانه jQuery اغلب نیاز به دیگر کتابخانه ها وجود دارد. این در حالی است که یک فریم ورک SPA از قبیل Angular تمامی این مکانیسم ها را به صورت درونی در خود قرار داده است و دیگر نیازی به کتابخانه و یا فریم ورک دیگری ندارید. دو مورد از مهمترین این موارد تنظیم کردن مقداری در یک HTML element و یا خواندن یک مقدار از یک HTML element می باشد.


با استفاده از databinding و روشی که آن در اختیار ما قرار می دهد دیگر نیازی به نوشتن کد برای خواندن مقدار یک HTML element و یا لحاظ کردن یک مقدار در آن نداریم. با استفاده از کتابخانه jQuery زمانی که می‌خواهید مقدار درون یک element DOM را بخوانید نیاز به نوشتن کد دارید. این کد هر چند کوتاه است ممکن است نیاز باشد که در چندین تابع و چندین قسمت مختلف تکرار بشود. این در حالی است که با استفاده از databinding و فریم ورک هایی از قبیل Angular نیازی به نوشتن چنین کدی وجود ندارد. علاوه بر این موضوع با استفاده از کتابخانه jQuery نیاز به نوشتن کد برای تغییر دادن visibility و یا قابلیت پدیدار بودن HTML element دارید. در چنین شرایطی نیز با استفاده از databinding و بدون نیاز به نوشتن هیچ گونه کدی می توانید یک HTML element را ظاهر و یا مخفی کنید. برای انجام این کار کافی است که مقدار مربوط به یک HTML element را به پروپرتی visibility یک کنترل اصطلاحاً bind کنید. تمامی این موضوعات در آموزش‌های مختلفی که بر روی وب سایت پرووید قرار داده شده اند ارائه گردیده اند. برای مثال می توانید از بسته ی آموزش ویدئویی شروع به کار با Angular 2 و آموزش متنی برنامه نویسی تحت وب با فریم ورک AngularJS استفاده کنید. در قسمتهای بعدی از این آموزش در رابطه با فریم ورک های Angular و React و نهایتا Vue صحبت خواهیم کرد.