اول از همه بگم بعد خوندن "پیمان نامه" تعجب نکنید ? ، اینجا ما "Convention" رو "پیمان نامه" ترجمه کردیم
توی این مقاله ما درباره Component های Vue.js صحبت میکنیم،اما وابسته به صلاحدید خودتون میتونید این Rule هارو توی سایر پروژه هاتون هم استفاده کنید
فکر نکنم دیگه نیاز به مقدمه چیدن باشه،همه ها Front-End Developer ها با کانسپت Component آشنا هستیم،چون تبدیل به یه مفهوم جدا نشدنی از تکنولوژی وب شدن
اگر به موضوع کلین کد علاقه مند بوده باشید حتما با موضوع نامگذاری استاندارد آشنا هستید،اینجا میخوایم در سطح کامپوننت این نامگذاری ها رو بررسی کنیم
اولین نکته،هنگام نامگذاری اجزای خود از نام های تک کلمه ای خودداری کنید
چه Header باشه،چه Footer - با Button هم که دیگه فاجعه تکمیل میشه
که میشه برای جلوگیری از این کار آورد اینه که این نوع نامگذاری باعث سردرگمی و تعارض با تگ های معنایی در HTML5 میشه
توضیح زیادی شاید درباره این موضوع نیاز نباشه . . .
اما یکی از متداول ترین روش ها برای نامگذاری استفاده از یک پیشوند هست(مثل base یا app )
برای مثال وقتی یک دکمه طراحی کردید که تو سراسر برنامه از اون استفاده میکنید،خوبه که بجای نامگذاری تک کلمه ای مثل Button،اون رو BaseButton یا AppButton تعریف کنید
خب توی انتخاب پسوند یک نکته ای وجود داره ، وقتی شما کامپوننتی دارید که در آن واحد فقط یک نمونه از اون روی صفحتون Active هست ، خوبه که از پیشوند "The" استفاده کنید
مثلا هیچوقت شما توی صفحتون یدونه Header بیشتر ندارید ( اگر دارید دیگه ادامه این مقاله رو نخونید،برید یه مقاله درباره UX پیدا کنید?)
پس بهتره که اون کامپوننت رو TheHeader بنامید
همینطور که دارید عکس بالا رو مشاهده میکنید ، مثالش رو اینجا براتون میگم
فرض کنید شما یک کامپوننت ToDo دارید که چندتا آیتم توی اونها قرار میگیره،توی هرکدوم از آیتم ها هم یک کامپوننت دیگه وجود داره که مشخص کننده نام اون آیتم هست
چجوری اینا نامگذاری کنیم!؟ مثل مثالی که توی تصویر میبینید
خب حالا این چه مزیتی برامون داره !؟
خیلی نمیخوام رو این مورد مانوور بدم،چون یه موضوعی هست که نسبتا عمومیه و شاید خیلی انحصاری برای صرفا کامپوننت نباشه ، یه گریز ریزی میزنیم به یک نمونه متد در Vue.js
خب به عنوان اولین نکته،باید بگم اسم متدتون باید کامل اون کاری که قراره انجام بده رو تعریف کنه(مثال بالا)
اما نکته دوم که دیده شده دوستانی که از React.js مهاجرت میکنن سمت Vue.js این کار رو انجام میدن
نیازی نیست که برای گرفتن مقدار یک ایونت ، کل ایونت رو بگیرید => یک نام مفهومی و مناسب برای مقدار انتخاب کرده و فقط از اون استفاده کنید تا خوانایی کدتون بالا بره
در آخر شایان ذکر هست که در تیم های توسعه،پیروی از قوانین دستوری که همه تیم روی اون اتفاق نظر دارن میتونه کمک زیادی به سرعت توسعه و جلوگیری از بهم ریختگی و گنگی پروژه ما کنه
باشد که از رستگاران باشیم
ممنونم که تا اینجای مقاله با من همراه بودید ، اگر نظر یا نکته یا انتقاد یا پیشنهادی داشتید حتما برام بنویسید
