قوانین ضروری در کد نویسی Vue js

قوانین ضروری در کد نویسی Vue js

قوانین ضروری A (پیشگیری از بروز خطا)

اسم کامپوننت های چند کلمه ای (Multi-word component names)

در نامگذاری کامپوننت ها باید از اسم های چند کلمه ای استفاده کرد، به جز مواردی که برای root پروژه به کار می روند مانند App و همچنین کامپوننتهایی که به صورت پیش فرض در Vue استفاده می شوند مانند <transition/> یا <component/> .

این کار باعث می شود که از conflict های احتمالی به دلیل اینکه در HTML از عناصر با اسم های یک کلمه ای استفاده شده است، جلوگیری شود.

داده کامپوننت (Component data)

داده ی یک کامپوننت باید به صورت یک تابع تعریف شود.

زمانی که از یک داده در کامپوننت استفاده می کنید باید آن را به صورت تابعی تعریف کنید که یک آبجکت را برگرداند.

تعریف prop (Prop definitions)

تعریف prop باید تا حد امکان دقیق باشد.

در یک کد خوب، تا حد امکان جزئیات prop بیان شود و یا حداقل نوع (type) آن مشخص شود.

Key در v-for

در کنار v-for همیشه از key استفاده کنید.

Key در کنار v-for همیشه برای یک کامپوننت ضروری است، در واقع استفاده از key سبب رعایت ترتیب اجزاء داخلی آن می شود. 

اجتناب از v-if در کنار v-for

هرگز از v-if و v-for در یک المان استفاده نکنید.

به طور کلی دو حالت وجود دارد که برخی از توسعه دهندگان به اشتباه، از v-if و v-for در کنار هم استفاده می کنند:

  • برای فیلتر کردن آیتم های یک لیست (برای مثال v-for="user in users"  v-if="user.isActive"). در چنین مواردی، باید به جای users از یک computed property جدید که لیست فیلتر شده جدید (برای مثال activeUsers) را برگرداند، استفاده شود.
  • برای جلوگیری از نمایش لیستی که به صورت پنهان است (برای مثال v-for="user in users" v-if="shouldShowUsers"). در این موارد باید v-if را در المان بالاتر (برای مثال ul یا ol) استفاده کرد.

 

scope در استایل های کامپوننت

برای اپلیکیشن ها، استایل ها در بالاترین سطح برنامه یعنی کامپوننت App، و در چیدمان کامپوننت ها شاید به صورت کلی (global) و در سایر کامپوننت های حتماً باید به صورت scoped استفاده شوند.

اسم های property خصوصی 

سعی کنید از اسم های خصوصی برای property های خود استفاده کنید. اگر این امکان برای شما وجود ندارد بهتر از یک پیشوند خاص (برای مثال $_) قبل از آنها استفاده کنید تا با property های عمومی فریمورک اشتباه در نظر گرفته نشوند. از این دستور می توان بیشتر در mixin ها و plugin ها استفاده کرد. همچنین برای جلوگیری از ایجاد conflict بین کدهای شما و سایر نویسندگان، از دامنه ی نامگذاری استفاده کنید (برای مثال اگر یک plugin با نام myPlugin ساخته اید بهتر است از عبارت $_myPlugin قبل از اسم خاص موردنظر خود استفاده کنید). 

تذکر: فریمورک vue js از _ به عنوان پیشوند برای property های خود استفاده می کند. بنابراین در صورتی که شما نیز از همین پیشوند به تنهایی استفاده کنید به احتمال زیاد این دو property که دارای اسم یکسانی هستند، overwrite خواهند شد و عملکرد خود را از دست خواهند داد. حتی اگر شما فریمورک vue js را بررسی کنید چنین property ای در آن مشاهده نکنید باز هم هیچ گونه تضمینی وجود ندارد که در نسخه های بعدی این فریمورک نیز از آن property استفاده ای نشود. از طرفی، پیشوند $ در اکوسیستم vue js نیز وظیفه خاصی را بر عهده دارد و استفاده از این پیشوند به تنهایی نیز مناسب نیست. در عوض پیشنهاد می کنیم که این دو پیشوند را در کنار هم و به صورت $_ استفاده کنید تا از بروز مشکلات احتمالی جلوگیری شود.

 

قوانینی که مطالعه کردید مجموعه قوانین ضروری در فریمورک Vue js بودند. برای مطالعه سایر قوانین (B، C و D) می توانید مقاله های بعدی این فصل را مطالعه کنید. 

دوره در دست تالیف است ... rocket
نظرات
اگر login نکردی برامون ایمیلت رو بنویس: