مجتبی افراز | Mojtaba Afraz
مجتبی افراز | Mojtaba Afraz
خواندن ۳ دقیقه·۳ سال پیش

بررسی props-based solution در Vue.js

دنیای بدون Props رو تصور کردی !؟
اصلا مگه داریم!؟مگه میشه!؟ قطعا نه ، پس بیا یکم درباره اش صحبت کنیم . . .
میخوام این بار با یسری Task شروع کنم،میتونی راه حل های این Task رو تو ذهنت بچینی یا این که بری کدش رو هم بنویسی

انتخاب با خودت . . .

1 - قدم اول

ساده است ، یه دکمه بسازید که از کامپوننت Parent بشه متن های مختلفی رو بهش داد

2 - قدم دوم

همچنان ساده و آسون ، حالا وقتش رسیده که بتونید آیکون رو هم به سمت راست دکمه تون اضافه کنید که مثل قبل از طرف Parent باید مشخص بشه که آیکون چیه

3 - قدم سوم

حالا وقتش رسیده این دکمه باحالی که تا اینجا داشتیم رو باحال تر کنیم
میخوایم این قابلیت رو بهش اضافه کنیم که بعضی جا ها فقط یه طرف آیکون داشته باشه
بعضی جاها هردو طرف آیکون داشته باشن

و اون جاهایی هم که یه طرف آیکون دارن بتونه به انتخاب خودمون راست یا چپ باشه

4 - قدم چهارم

رسیدیم به قسمت خوب ماجرا ، اینبار وقتی رو دکمه کلیک شد باید یه لودر به کار نشون بدیم

5 - قدم پنجم

حالا بهتر شد ، ولی بعضی موقع میخوایم لودر همه فضای دکمه رو بپوشونه،بعضی موقع هم نه،فقط جای آیکون ظاهر بشه
پس با اضافه کردن این قابلیت بهتر هم میشه



قضیه چیه !؟

خب اگر نتونستم همه مراحل بالا رو انجام بدید یا درک کنید نگران نباشید ، این بیشتر یه مثال ذهنی بود و اینکه بشه اون حس مورد نظر رو بهتون منتقل کرد

اما میپرسید : "خب،الان قراره درباره چی صحبت کنیم !؟"
پس الان بهتون میگم


توی "قدم اول " احتمالا شما با همچین نمونه کدی شروع کردید :

و اگر میخواید بدونید بعد از اضافه کردن قابلیت ها و طی کردن قدم های بعدی کد ما به چه شکل در اومد
باید بگم که این شکل :

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

یا فرض کنید یکی دیگه از اعضای تیمتون این کد رو نوشته و حالا وظیفه شماست که سرپرستی این یتیم رو انجام بدید و ازش استفاده کنید

و اینطوری میشه که : Props , EveryWhere


سوال مهم - این پدیده پیچیدگی بیش از حد Prop ها یا بده !؟

بد نیست ، چرا !؟
چون کارمون رو انجام میده ( کار میکنه ?)

+ پس یعنی خوبه ?!؟

- نه دقیقا . . .

+ ?


چه مشکلاتی داره !؟

  • نیازمندی های جدید ، پیچیدگی رو بیشتر میکنه
  • مسئولیت های زیادی رو ایجاد میکنه
  • تعداد زیادی Template با شرط های مختلف ( خودش یه پیچیدگی عظیم داره)
  • روی Flexibility تاثیر داره و اون رو کاهش میده (نمیدونم Flexibility باید بگم انعطاف پذیری یا نه)
  • حفظ و نگهداری اون تبدیل به یه کابوس میشه

اگر این مشکلات برای ما وجود داره آیا راه بهتری هم هست !؟

اولین نکته که خوب هست بهش اشاره کنم این هست که همیشه بهترین راه استفاده درست هست
و مجدد تاکید میکنم که اصلا منظورم این نبوده که Props خوب نیست (پس لطفا اینجور برداشت نکنید ?)

و اما فرشته نجات ما در این مواقع کسی نیست جز آقای Slot
ممکنه خیلیاتون از قبل با Slot اشنا بوده باشید و باهاش کار کرده باشید اما به اون هایی که تا امروز از این مورد استفاده نمیکردن شدیدا پیشنهاد می کنم که رویکردشون رو عوض کنن

خیلی قصد ندارم توی مقاله هام مستقیم همه مباحث رو آموزش بدم ، چون ممکنه خیلی ها این موارد رو بلد باشن ، پس صرفا قصد دارم که راهکار معرفی کنم و بیشتر آشناتون کنم با مباحث و راه حل های مختلف

پس اگر Slot یا حتی Props رو بلد نیستید ، این رو به خودتون میسپارم تا درباره اش بخونید و یاد بگیرید


ممنونم که تا اینجای مقاله همراهم بودی ، امیدوارم که برات مفید بوده باشه
اگر نظر یا پیشنهاد یا انتقادی داری میتونی برام بنویسی
یا اینکه از طریق سایر راه های ارتباطی باهام در تماس باشی








jsvueprogrammingjavascriptfront end
Dynamic and creative software developer with years of experience in generating strong code for companies. With first-class coding skills. As well as active and interested in startups
شاید از این پست‌ها خوشتان بیاید