محتوا
بهترین چارچوب های جاوا اسکریپت ، کد نویسی را سریعتر و آسان تر می کنند ، بنابراین می توانید به جای اینکه در کدها گیر بیفتید ، روی طراحی کامل وب سایت تمرکز کنید. در سالهای اخیر تعدادی از افراد برجسته در بازار ظاهر شده اند.
چارچوب های JavaScript: پیوندهای سریعVue.js
عکس العمل نشان دهید
AngularJS
پلیمر
اورلیا
دیگران
در این مقاله ، ما به بزرگترین و بهترین چارچوب های جاوا اسکریپت نگاهی خواهیم انداخت و نحوه بهترین استفاده را از آنها در پروژه های خود بررسی خواهیم کرد. برای هر یک از پنج چارچوب برتر جاوا اسکریپت ، ما به جزئیات ارائه شده نگاهی دقیق خواهیم انداخت و از طریق یک آموزش کوتاه می توانیم درک کنیم که چگونه کار می کند.
ما به Vue.js ، React ، AngularJS ، Polymer و Aurelia نگاه خواهیم کرد ، سپس برخی از گزینه های جدیدتر یا کمتر شناخته شده را که ممکن است بخواهید بررسی کنید نیز کشف خواهیم کرد. برای رفتن به بخشی که می خواهید ابتدا کاوش کنید ، از جعبه مقابل یا منوی کشویی در بالا استفاده کنید.
برای توصیه های بیشتر درباره جعبه ابزار خود ، نگاهی به خلاصه بهترین ابزارهای طراحی وب ، سازنده وب سایت عالی یا راهنمای ما برای بهترین API های جاوا اسکریپت بیاندازید. شما همچنین باید خدمات میزبانی وب خود را برای نیازهای خود فراهم کنید ، بنابراین راهنمای ما را بررسی کنید.
Vue.js
بهترین برای:
- مبتدیان
- برنامه های سبک با رد پای کوچک
Vue.js یک چارچوب مترقی JavaScript برای ساخت رابط های کاربری است. یک پروژه منبع باز (برای دیدن افراد مبتدی ایده آل GitHub است). کتابخانه اصلی روی لایه مشاهده متمرکز شده است و همه الگوها HTML معتبری هستند که برداشت آن را آسان می کند. در دو مینی آموزش زیر ، نحوه استفاده از Vue برای مدیریت چندین ذخیره داده و سرعت بخشیدن به اولین بار برای بهبود عملکرد سایت شما را بررسی خواهیم کرد.
01. دولت را با Vue مدیریت کنید
مانند هر کتابخانه مبتنی بر م componentلفه ها ، مدیریت وضعیت در Vue نیز می تواند مشکل باشد. در حالی که برنامه کوچک است ، می توان با انتشار رویدادها در هنگام تغییر مقادیر ، موارد را همگام کرد. با این حال ، با رشد برنامه ، این امر می تواند شکننده و مستعد خطا شود ، بنابراین ممکن است بهتر باشد که با یک راه حل متمرکزتر شروع کنید.
اگر با Flux و Redux آشنا هستید ، Vuex تقریباً به همان روش کار می کند. حالت در یک مکان متمرکز برگزار می شود و به برنامه اصلی Vue مرتبط است. هر آنچه در داخل برنامه رخ می دهد در جایی از آن حالت منعکس می شود. کامپوننت ها می توانند اطلاعاتی را که برای آنها مرتبط است انتخاب کنند و در صورت تغییر ، مانند آنچه در بخشی از وضعیت داخلی آن باشد ، از آنها مطلع می شوند.
یک فروشگاه Vuex از چهار چیز تشکیل شده است: دولت ، گیرنده ها ، جهش ها و اقدامات. دولت یک شی single واحد است که تمام داده های لازم را برای کل برنامه در خود نگهداری می کند. نحوه ساختار این شی به پروژه بستگی دارد ، اما به طور معمول حداقل یک مقدار را برای هر نمای نگه می دارد.
گیرنده ها مانند خصوصیات محاسبه شده در داخل اجزا کار می کنند. مقدار آنها از حالت و هر پارامتر منتقل شده به آن مشتق می شود. آنها می توانند برای فیلتر کردن لیست ها بدون نیاز به کپی کردن این منطق در داخل هر م componentلفه ای که از آن لیست استفاده می کند ، استفاده شوند.
دولت نمی تواند مستقیماً ویرایش شود. هرگونه به روزرسانی باید از طریق روشهای جهش ارائه شده در داخل فروشگاه انجام شود. اینها معمولاً اقدامات ساده ای هستند که هر بار یک تغییر را انجام می دهند. هر روش جهش حالت را به عنوان آرگومان دریافت می کند ، سپس با مقادیر مورد نیاز برای تغییر به روز می شود.
جهش ها باید همزمان باشند تا Vuex بفهمد چه عواملی تغییر کرده است. برای منطق ناهمزمان - مانند تماس سرور - می توان به جای آن از اقدامات استفاده کرد. اقدامات می توانند وعده ها را برگردانند ، این به Vuex اجازه می دهد تا بداند که نتیجه در آینده تغییر خواهد کرد و همچنین توسعه دهندگان را قادر می سازد تا اقدامات مشترک را انجام دهند.
برای انجام جهش ، آنها باید با تماس به فروشگاه متعهد شوند مرتکب شدن() و گذراندن نام روش جهش مورد نیاز است. اقدامات باید به روشی مشابه با ارسال شود ارسال().
این عمل خوبی است که اقدامات انجام جهش را انجام دهند تا اینکه مرتکب دستی شود. به این ترتیب ، تمام منطق به روزرسانی با هم در یک مکان نگهداری می شوند. اجزای سازنده می توانند اقدامات را مستقیماً ارسال کنند ، به شرطی که با استفاده از mapActions () روش تهیه شده توسط Vuex.
برای جلوگیری از پیچیدگی بیش از حد چیزها ، فروشگاه همچنین می تواند به ماژول های جداگانه ای تقسیم شود که به دنبال وضعیت خاص خود باشند. هر ماژول می تواند حالت ، گیرنده ها ، جهش ها و اقدامات خاص خود را ثبت کند. حالت بین هر ماژول ترکیب شده و با نام ماژول آنها گروه بندی می شود ، تقریباً به همان روشی که کمربندهای کوچک () در داخل کار می کند Redux.pport.
02. مسیرهای باروی تنبل را کاوش کنید
به طور پیش فرض ، تمام محتوای برنامه در داخل یک فایل JavaScript ختم می شود ، که می تواند باعث بارگذاری آهسته صفحه شود. بسیاری از این مطالب هرگز در صفحه نخست کاربر از آن استفاده نمی شود. در عوض می توان آن را از بسته اصلی جدا کرد و در هر زمان که لازم بود بارگیری کنید.
Vue تنظیم این فرآیند را بسیار ساده می کند ، زیرا vue-router از پشتیبانی داخلی برای بارگذاری تنبل برخوردار است.
const AsyncAbout = () => واردات ('./ About.vue')؛ روتر const = VueRouter جدید ({route: [{path: ’/ about، component: AsyncAbout}]})
Vue با استفاده از واردات پویا برای تعریف اجزای سازنده پشتیبانی می کند. این وعده های بازگشتی ، که به خود جز component برطرف می شوند. سپس روتر می تواند از آن ملفه استفاده کند تا صفحه را مانند حالت معمول ارائه دهد. اینها در کنار تقسیم کد داخلی در Webpack کار می کنند ، که استفاده از ویژگی هایی مانند نظرات جادویی را برای تعریف نحوه تقسیم اجزا امکان پذیر می کند.
آیا سایت پیچیده ای برنامه ریزی شده اید؟ برای ایمن نگه داشتن پرونده های رسانه ای خود به فضای ذخیره سازی برتر احتیاج دارید.
بیشتر بخوانید: بیاموزید که چگونه با استفاده از Vue.js سرعت سایت را افزایش دهید
صفحه بعدی: ReactJS
