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

در مقاله قبلی با قوانینی که اکیداً توصیه به رعایت آن ها می شد، آشنا شدیم. در این مقاله قصد داریم شما را با قوانینی که اهمیت کمتری نسبت به مقالات قبلی دارند اما باز هم توصیه می شود که آنها را رعایت کنید، آشنا کنیم.

در این مقاله قصد داریم قوانین درجه C را معرفی کنیم. 

قوانینی که توصیه می شود رعایت کنید C

1. رعایت ترتیب instance و component

موارد instance و component باید به ترتیب نوشته شوند.

ترتیب پیش فرض در نظر گرفته شده برای این موارد در فریم ورک Vue js به صورت زیر است:

1. اثرات جانبی (Side Effects)

• el

2. اطلاعات کلی (Global Awareness)

• name
• parent

3. نوع کامپوننت (Component Type)

• functional

4. اصلاح کننده های template (Template Modifiers)

• delimiters
• comments

5. وابستگی های template (Template Dependencies)

• components
• directives
• filters

6. ترکیب بندی (Composition)

• extends
• mixins

7. رابط (Interface)

• inheritAttrs
• model
• props / propsData

8. حالت محلی (Local State) 

• data
• computed

9. event ها (Events)

• watch
• Lifecycle Events
• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed

10. ویژگی های غیرواکنشی (Non-Reactive Properties)

• methods

11. رندر کردن (Rendering)

• template / render
• renderError

2. رعایت ترتیب attribute ها در المان

Attribute های المان ها باید به ترتیب استفاده شوند.

ترتیب پیش فرض در نظر گرفته شده برای فریم ورک Vue js به صورت زیر است:

1. تعریف (Definition)

• is

2. رندر کردن لیست (List Rendering)

• v-for

3. شروط (Conditionals)

• v-if
• v-else-if
• v-else
• v-show
• v-cloak

4. اصلاح کننده های رندر (Render Modifier)

• v-pre
• v-once

5. اطلاعات کلی (Global Awareness)

• id

6. ویژگی های یکتا (Unique Attribute)

• ref
• key

7. بایندینگ دو طرفه (Two-Way Binding)

• v-model

8. سایر ویژگی ها (Other Attributes)

9. event ها (Events)

• v-on

10. محتوا (Content)

• v-html
• v-text

3. خطوط خالی در instance / component

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

زمانی که کدهای کامپوننت ها مقداری ناخوانا می شوند، گذاشتن یک خط خالی در بین property های آن می تواند سبب بهبود خوانایی کدها شود.

 4. ترتیب المان های سطح بالای کامپوننت تک فایل

کامپوننت های تک فایل همیشه شامل سه تگ <script>، <template> و <style> هستند به طوری که همیشه <style> در آخرین قسمت قرار می گیرد زیرا در یک کامپوننت حداقل یکی از دو تگ دیگر ضروری است و حتماً باید استفاده شود.

 امیدوارم که استفاده لازم را از قوانین بیان شده در این مقاله، برده باشید. در مقاله آخر از این فصل، مجموعه ای از قوانین بیان می شود که در بین 4 دسته قوانین مورد بررسی داری کمترین اهمیت هستند.