راهنمای استفاده از Vuejs به‌ جای jQuery

Using Vuejs Instead of jQuery

0 483

در این آموزش به شما استفاده از Vuejs به‌ جای jQuery را نشان خواهیم داد. ضمنا همه کدها در github.com/Erilan/replace-jQuery-by-vuejs قابل دسترسی است.

ابتدا با یک مقایسه بین یک مثال ساده jQuery و یک ترکیب ساده از VueJs شروع می کنیم. یک ترکیب کد VueJs شامل کتابخانه VueJs (به عنوان مثال با استفاده از CDN)، یک DIV و یک اسکریپت کوچک است. این ترکیب و یا ساختار ساده VueJS را در زیر مشاهده می کنید.

ابتدا فایل Simple.HTML را که شامل DIV است، مشاهده می‌ کنید:

و حالا ساختار فایل simple.vue را مشاهده خواهید کرد:

نتیجه را در تصویر زیر ببینید:

simple Vue

کد بالا در این لینک قابل دسترس و ویرایش است. می بینید که هیچ چیز پیچیده ای نسبت به ساختار کد jQuery ندارد!

حالا ساختار یک کد jQuery را مشاهده خواهیم کرد. یک DropDown ساده را در زیر می بینید (که با کلیک شدن یک دکمه، لیستی از تعدادی آیتم را نمایش می دهد)

ساختار فایل DropDown.HTML:

و سپس ساختار فایل DropDown.js:

نتیجه کد jQuery و فایل HTML را در تصویر زیر ببینید:

vueJs-JQ

کد بالا در این لینک قابل دسترس و ویرایش است.

در کد بالا که نتیجه آن را می توانید در تصویر بالا ببینید، این موضوع کاملا واضح است که استفاده از کد jQuery به جای کد Vue.js برای رسیدن به نتیجه ای مثل نتیجه تصویر بالا، کوتاه تر است.

کد بالا یک وظیفه بسیار ساده ای را بر عهده دارد. رویداد کلیک شدن و در ادامه تغییر وضعیت یک کلاس (jQuery) یا تغییر وضعیت یک مقدار boolean (در Vue.js) تنها کاری است که کد بالا انجام می دهد. در حقیقت کد ارائه شده ی بالا در نسخه Vue واقعا بهتر نیست اما نسبت به نسخه jQuery مقداری منطقی تر است. دلیلش هم این است که واقعا شما با یک کلاس رو به رو نیستید. ما یک متغیری داریم که وضعیت dropdown را به ما نشان می دهد، نه اینکه واقعا مثل یک کلاس برنامه نویسی عمل کند!

در زیر مثال دیگری را در jQuery و Vue می بینیم که شامل پنلی با تعدادی لینک است. کلیک کردن روی دکمه ها یا لینک ها موجب تغییر محتوایی می شود که کاربر مشاهده می کند.

در فایل panels.HTML خواهیم داشت:

و در ادامه کدهای زیر را در فایل panels.js داریم:

و حالا نتیجه کدهای بالا را در تصویر زیر ببینید:

jquery-Vue

کد بالا در این لینک قابل دسترس و ویرایش است.

در این جا هم کد در نسخه jQuery نسبت به نسخه Vue کوتاه تر است و همچنان موضوع، رویدادِ کلیک کردن است. می بینیم که کد jQuery نسبت به کد Vue کوتاه تر است اما در این جا نکته ی برتری کد برنامه نویسی Vue نسبت به کد jQuery، منطقی تر بودن آن است. برای مثال در کد بالا (نسخه Vue) به جای کلاس های adding/removing، یک متغیری وجود دارد که با تغییر مقدار آن، حالت جدید نشان داده می شود و محتوایی که باید کاربر مشاهده کند، تغییر می کند.

حالا مثالی را که کمی پیچیده تر است، بررسی می کنیم. مثال زیر کدهای یک محاسبه گر را در دو نسخه Vue و jQuery نشان می دهد.

ابتدا کدهای فایل recipe_calculator.HTML را مشاهده می کنید:

و سپس کدهای فایل recipe_calculator.js را خواهیم داشت:

مانند مثال های قبل تر، کدهای فایل جاوا اسکریپت بالا در دو نسخه jQuery و Vue ارائه شده است، نتیجه برنامه را در تصویر زیر مشاهده می کنید:

Vue-Jquery

کد بالا در این لینک قابل دسترس و ویرایش است.

کد این مثال در نسخه Vue کوتاه تر از نسخه jQuery کد است و نکته دیگری که باید به آن توجه کرد بهینه تر بودن کد Vue نسبت به کد jQuery است. در کد jQuery واکنش ها روی چند نوع رویداد است: ابتدا خواندن داده از DOM، سپس وارد کردن در innerHTML و در نهایت رفتن دستورالعمل برنامه به بخش محاسبه گر جهت شروع روال اصلی برنامه.

کد Vue را در برنامه بالا را بررسی می کنیم: کد کوتاه تر است و روال منطقی تری دارد. مقدار «حالت یا state» را داریم که کد (شماره) کاری را که باید در برنامه اجرا شود، نشان می دهد و هر خط موارد مربوط به خود را محاسبه می کند. مشاهده نمودید که نه چیزی از DOM خوانده شد و نه چیزی به DOM اضافه شد. ما تنها یک مقدار خاص را محاسبه کردیم. در نهایت هم می توانید واکنش پذیری Vue.js را ببینید.

همان طور که در مقایسه بین نسخه های مختلف کدهای بالا دیده شد، مواردی وجود دارد که کد jQuery از کد Vue کوتاه تر است اما در نهایت افزودن یک منطق صحیح با کد Vue راحت تر است.

در این لینک می توانید کد بالا را (در نسخه Vue) با استفاده بهینه از قدرت کامپوننت ها در Vue ببینید. (نتیجه همان تصویر بالاست)

در لینک قبلی کامپوننت ها شامل تگ های HTML در رشته های جاوا اسکریپتی هستند که همه در داخل یک فایل js. قرار گرفته اند و این ایده خوبی نیست. این کامپوننت ها به دلیل پیچیدگی کدنویسی، قابلیت استفاده مجدد ندارند.

حالا که در تکه کد بالا به جای jQuery، فرمت Vue جایگزین شده آن را دیدید، جهت استفاده بهینه از کامپوننت ها دقیق تر عمل می کنیم. به سراغ webpack می رویم. به دلیل سختی پیکربندی و استفاده از webpack من از نسخه ی standalone که توسط Symfony آماده شده است، استفاده می کنم. جهت نصب آن و برخی پکیج های مرتبط با Vue دستورات زیر را در ترمینال اجرا کنید:

در فایل تولید شده ی webpack.config.js باید Vue loader را با استفاده از کد زیر فعال کنیم:

حالا می توانیم فایل های vue. را ایجاد کنیم (تا همه چیز در یک فایل جاوا اسکریپت نباشد) و از یک vue-template-loader قوی بهره ببریم.

در رابطه با آخرین برنامه ای که در پیش تر کدهای آن در Vue و jQuery نوشته شد، ابتدا فایل Recipe.vue را ایجاد می کنیم و کدهای زیر را در آن قرار می دهیم:

همچنین فایل RecipeIngredient.vue را ایجاد می کنیم و کدهای زیر را در آن قرار می دهیم:

جهت مقداردهی اولیه در Vue باید یک تگ DIV با کلاس خاصی را در در فایل template.HTML.Twig اضافه کنیم:

سپس فایل app.js را ایجاد و کد زیر را در آن وارد می کنیم. این فایل نقطه شروع جاوا اسکریپت است که در آن با استفاده از «کلاس خاصی» که در کد بالا داده شد، محتوای تگ DIV را مدیریت و یا اصطلاحا رندر می کنیم:

حالا باید دقیق تر به این ساختار Vue که جایگزین jQuery در کدهای بالا شده است، بپردازیم.

در تصویر زیر نقشه ای شماتیک آورده شده است که من به آن نقشه یا چارت برنامه می گویم و در یک نگاه، بخش های مختلفی را که در یک برنامه فریم ورک سیمفونی (برای مثال) با یکدیگر ترکیب شده اند، نشان می دهد. در این مثال من جهت نشان دادن نقشه شماتیک برنامه به سراغ یک برنامه نمونه از فریم ورک سیمفونی رفتم اما این شیوه نقشه شماتیک در سایر فریم ورک ها و ابزارها نیز کاربرد دارد و مرسوم است.

تصویر زیر را مشاهده کنید:application widget - استفاده از Vuejs به‌ جای jQuery

ایده بکار رفته در تصویر بالا جهت ایجاد کردن صفحات (به طور معمول) است که به صورت یک سری static HTML از سمت سرور رندر و با استفاده از بخش های مختلف Vue بهینه و کارا می شوند. به این بخش های Vue در این جا، Vue Widget می گوییم. یک Vue Widget می تواند برای عملکردی خاص یک یا چند بار استفاده شود. همچنین یک Vue Widget می تواند کاملا مستقل به ایفای نقش بپردازد یا همان طور که در چارت بالا قابل مشاهده است، توسط Vuex Store EventBus با سایر Widget ها یا بخش های Vue لینک شود.

با تصویری که از روند کار Vue در بالا ارائه شد، با نگاهی دقیق تر به بررسی ساختار فایل های پروژه می پردازیم. در تصویر زیر ساختار (معماری) فایل های پروژه که Widget ها و کلیه فایل های مرتبط با Vue را مدیریت می کنند، مشاهده می کنید:

file architecture - استفاده از Vuejs به‌ جای jQuery

در تصویر بالا و در فایل js فقط یک فولدر جهت ابزارهای مرتبط با Vue مانند mixins، پلاگین ها و directive ها و… داریم. همچنین یک فولدر با عنوان widgets موجود است که شامل همه widget های پروژه می شوند. هر widget دایرکتوری مربوط به خود را دارد که محتوی فایل Vue و کامپوننت های مرتبط با widget است. در نظر داشته باشید که می توانیم یک دایرکتوری برای فایل های Vue مشترک داشته باشیم. در ادامه مشاهده می کنید که دایرکتوری store شامل فولدرها و ابزارهای مرتبط با store یا یک دایرکتوری جهت مدیریت service ها، مدیریت api، مدیریت eventBus و … را داریم.

در نهایت طبق تصویر بالا در شروع به کار فایل های Vue، فایل vueWidgetsHandler را خواهیم داشت که کد آن را در زیر مشاهده می کنید:

این فایل وظیفه ایجاد Widget های پروژه را برعهده دارد. این کار می تواند هم صورت کاملا عمومی انجام گیرد تا در پروژه های مختلف یکسان باشد و بارها مورد استفاده قرار گیرد، هم جهت نیازهای یک پروژه به صورت کاملا خاص و سفارشی سازی شده باشد.

حالا می خواهیم برای هر Widget با استفاده از Vue یک نمونه بسازیم که براساس نیازهای widget می تواند شامل موارد مختلفی همچون store ،router و props باشد. در مثالی که در حال بررسی آن هستیم از صفتی به نام dataset جهت مقداردهی props استفاده می کنیم. این روش کاملا با HTML سازگار و به راحتی قابل استفاده می باشد.

در زیر کد فایل props.HTML.twig را می بینید:

با ترکیب مناسبی از widget ها می توانید وبسایت های بسیار قوی بسازید. بعنوان مثال این مورد را مشاهده کنید. (در حالت موبایل دید بهتری خواهید داشت)

موارد مختلف بسیاری هستند که می توانید حهت بالا بردن کیفیت پروژه خود در Vue، افزایش کارایی آن و بهینه کردن پروژه از آن ها استفاده کنید، مانند: Vuex store یا eventBus.

در نهایت باید به این نکته اشاره کنم که jQuery، بسیار محبوب و کارامد است و شامل مجموعه کاملی از کتابخانه ها و پلاگین ها می شود که با بکارگیری آن ها می توانید پروژه خود را سرعت بخشید اما استفاده از Vue بسیار هیجان انگیز و جالب است و راه دیگری را برای افزایش کارایی و بهبود پروژه در اختیارتان قرار می دهد. استفاده از Vue از لحاظ کدنویسی تمیزتر و از لحاظ نگهداری کد آسان تر است. همین طور ویژگی های جدیدی هم چون native data binding به شما ارائه می کند.

همه کدها و موارد و مثال های بیشتری در این لینک در دسترس است.


منبع: سایت Medium

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort
mezitli escort