قوانین با توصیه اکید در کد نویسی Vue js

قوانین با توصیه اکید در کد نویسی Vue js

در مقاله قبلی با قوانین ضروری در کد نویسی Vue js آشنا شدیم. در این مقاله قصد داریم شما را با قوانینی که اهمیت نسبتاً بالایی دارند آشنا کنیم، به طوری که رعایت کردن این اصول و قوانین سبب بهبود خوانایی کدهای شما می شود.

در این بخش 16 تا از مهمترین اصول کدنویسی مورد بررسی قرار می گیرد. 

قوانینی که به شدت توصیه می شود B (برای بهبود خوانایی کد)

فایل های کامپوننت (Component files)

هر فایل js باید تنها شامل یک کامپوننت باشد. معمولاً کامپوننت ها را با استفاده از دو حالت فایلهای js و فایلهای vue می توان ساخت. درون هر فایل vue تنها یک کامپوننت می توان ساخت اما در هر فایل js می توان بیش از یک کامپوننت ایجاد کرد. ایجاد چند کامپوننت مختلف درون یک فایل js می تواند باعث بروز مشکلاتی شود. استفاده از یک فایل js فقط برای یک کامپوننت باعث می شود که بعداً راحت تر بتوان کامپوننت مورد نظر را پیدا کرد. به همین دلیل بهتر است در هر فایل js تنها یک کامپوننت ساخته شود.

 

شیوه نامگذاری فایل کامپوننت

نامگذاری فایل کامپوننت باید در کل پروژه یا به صورت PascalCase یا به صورت kebab-case باشد.

در اکثر مواقع پیشنهاد می شود از PascalCase استفاده شود. با این حال، نام فایل های ترکیبی گاهی اوقات می تواند در سیستم فایل های حساس به حروف بزرگ، مشکل ایجاد کند به همین دلیل، حالت kebab-case  نیز در چنین مواقعی توصیه می شود.

اسم کامپوننت های پایه

برای تفکیک کامپوننت های پایه از سایر کامپوننت ها که در قسمت های مختلف برنامه استفاد می شوند، بهتر از پیشوندهایی مانند Base، App یا استفاده شود.

نامگذاری کامپوننت هایی که یکتا هستند

کامپوننت هایی که فقط یک نمونه فعال داشته باشند باید با پیشوند The شروع شوند، تا مشخص شود که فقط یک نمونه وجود دارد.

این موضوع به این معنی نیست که این کامپوننت فقط در یک صفحه استفاده شده است، بلکه به این معنی است که در هر صفحه فقط یک بار استفاده می شود. این کامپوننت ها تا زمانی که در برنامه شما هستند، هرگز از props استفاده نمی کنند.

نامگذاری کامپوننت های مرتبط به هم

در نامگذاری کامپوننت های child که به شدت با parent خود مرتبط هستند، باید از نام مولفه parent به عنوان پیشوند استفاده شود.

اگر یک کامپوننت فقط در زمینه کامپوننت تک parent خود معنا پیدا کند، این رابطه باید در نام آن مشهود باشد. از آنجا که editor ها معمولاً فایل ها را به صورت الفبایی مرتب می کنند، این فایل های مرتبط را نیز در کنار یکدیگر نگه می دارد که در پیدا کردن نام کامپوننت ها می تواند کمک بسیاری کند.

رعایت ترتیب کلمات در نامگذاری کامپوننت ها

نام کامپوننت ها باید با بالاترین سطح (اغلب عمومی ترین) شروع شود و با کلمات اصلاح کننده توصیفی پایان یابد. 

کامپوننت های Self-closing

کامپوننت های مورد استفاده در کامپوننت های تک-فایل، string template و JSX باید به صورت self-closing باشند اما در DOM هرگز نباید اینگونه باشد.

نامگذاری کامپوننت ها درون template

در اکثر پروژه ها، برای نامگذاری کامپوننت ها درون کامپوننت های تک-فایل و string template همیشه از حالت PascalCase استفاده می شود، اما درون DOM (مثلاً فایل های HTML) از حالت kebab-case استفاده می شود.

دقت کنید که از آنجا که HTML به حروف بزرگ و کوچک حساسیت ندارد ممکن است در صورت استفاده از حالت PascalCase با مشکل موجه شود بنابراین باید از حالت kebab-case بهره برد. به صورت کلی پیشنهاد می شود که از حالت kebab-case استفاده شود.

نامگذاری کامپوننت های درون JS/JSX

نام کامپوننت ها در JS/JSX همیشه باید به صورت PascalCase باشد، اگر چه ممکن است در داخل stringها (برای جهت رجیستر کردن کامپوننت ها در استفاده از دستور Vue.component(‘component-name’)) از حالت kebab-case استفاده شود.

استفاده از نام کامل کلمه در کامپوننت ها

در نامگذاری کامپوننت های چند کلمه ای باید از نام کامل (نه مخفف) هر کلمه استفاده شود.

نامگذاری prop ها

اسم propها همیشه در هنگام تعریف شدن باید به صورت camelCase باشند اما در هنگام استفاده از آن ها در template و JSX باید به صورت kebab-case باشند.

المان های دارای چند attribute 

برای المان هایی که دارای بیش از یک attribute هستند بهتر است که هر کدام از attribute ها را در یک خط تعریف کنید زیرا در این صورت خوانایی کد بالاتر می رود.

استفاده از عبارت های ساده در template

Template های یک کامپوننت باید شامل عبارت های ساده باشد به جای استفاده از عبارت های پیچیده تر بهتر است از computed property ها و یا method ها استفاده کرد.

Computed property های ساده

computed property های پیچیده باید به computed property های ساده تری تقسیم شوند.

 

استفاده از علائم (‘ یا “) برای attribute ها

Attribute های مورد استفاده در HTML نباید بدون یکی از علامت های ‘ یا “ استفاده شوند.

مختصر نویسی directive ها

مختصر نویسی directive ها ( به جای v-bind:، به جای v-on: و به جای v-slot) یا همیشه باید انجام شود و یا هیچ وقت انجام نشود.

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