بخش 3 (الف): چگونه یک جزء مستقل بسازیم

اجزای خودکفا چیست؟

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

در توسعه frontend، یک جزء مستقل به یک واحد کد مدولار اشاره دارد که هم عناصر بصری (HTML یا JSX)، سبک‌ها (CSS) و رفتار (جاوا اسکریپت) مورد نیاز برای ارائه بخش خاصی از یک رابط کاربری را در بر می‌گیرد. این اجزا به گونه‌ای طراحی شده‌اند که مستقل و قابل استفاده مجدد باشند، و آنها را به یک بلوک اساسی برای ایجاد رابط‌های کاربری پیچیده تبدیل می‌کند. این جزء اجازه پیکربندی را می دهد و داده ها را به عنوان پایه می پذیرد.

از نمودار بالا، چند نکته قابل توجه است:

• ورودی: دو فیلد ورودی داده وجود دارد. داده ها به عنوان پایه به جزء در ورودی اول ارسال می شوند، در حالی که دومی داده های ورودی کاربر است.

• اجزای سازنده: مستقل، مدولار و قابل استفاده مجدد است. داده ها را از طریق props بپذیرید و آن را برای پردازش به تنظیمات داخلی منتقل کنید.

• پیکربندی داخلی: کامپوننت ها اغلب می توانند لوازم جانبی یا گزینه های پیکربندی را برای سفارشی کردن ظاهر یا رفتار خود بپذیرند. این انعطاف‌پذیری به آن‌ها اجازه می‌دهد تا با موارد استفاده مختلف بدون تغییر کد اصلی خود سازگار شوند. تمام کارها در داخل کامپوننت انجام شده است.

در این مثال، ما از VueJs برای ایجاد یک فیلد ورودی قابل استفاده مجدد، یک انتخاب کشویی و یک کامپوننت پاپ آپ مدال استفاده خواهیم کرد. این مؤلفه‌ها همان چیزی است که ما برای پیشرفت در توسعه فاز پروژه این مجموعه استفاده خواهیم کرد. این مؤلفه ورودی قابل دسترسی نیست زیرا فاقد برخی ویژگی‌های مهم دسترسی مانند کنترل صفحه کلید و نقش‌های wai-aria است.

این به منظور توضیح این مفهوم برای خوانندگان به صورت کوتاه و مختصر ایجاد شده است. با این حال، شخص باید تلاش کند تا برنامه خود را هنگام ساخت برای تولید در دسترس قرار دهد.

ایجاد یک ورودی فرم قابل استفاده مجدد

برای ایجاد یک کامپوننت مستقل در Vue، می توانید این مراحل را دنبال کنید:

توجه: ما از پروژه Vue موجود استفاده می کنیم که از قسمت 1 تنظیم شده است.

مرحله 1: یک پوشه جدید ایجاد کنید، به عنوان مثال، نام آن را مشترک بگذارید. در دایرکتوری کامپوننت شما
این پوشه حاوی تمام اجزای قابل استفاده مجدد ما خواهد بود

مرحله 2: یک فایل کامپوننت جدید ایجاد کنید.
در داخل پوشه پروژه خود، به پوشه src/components/common بروید (یا اگر وجود ندارد آن را ایجاد کنید). یک فایل جدید برای جزء خود ایجاد کنید، به عنوان مثال، CustomInput.vue.

مرحله 3: اجزاء را تعریف کنید
فایل CustomInput.vue را در ویرایشگر کد دلخواه خود باز کنید و مؤلفه خود را با استفاده از سینتکس Single File Component Vue تعریف کنید.

src/components/common/CustomInput.vue

<template>
   <div class="form-control">
      <label v-show="isLabel" :for="IdName">{{ labelValue }}</label>
      <input 
         :type="CustomType"
         class="custom__inputs"
         :placeholder="PlaceHolder"
         :value="value"
         :readonly="readOnly"
         :id="IdName"
         :autofocus="setFocus"
         :autocomplete="setAutocomplete"
         @input="onInput"
      >
      <p v-show="withValidation">{{ errorMsg }}</p>
   </div>
</template>
<script>
export default {
   name:'CustomInput',
   props: {
      labelValue: {
         type: String,
         default: 'Label',
      },
      isLabel: {
         type: Boolean,
         default: false,
      },
      CustomType: {
         type: String,
         default: 'text'
      },
      PlaceHolder: {
         type: String,
         default:'',
      },
      value: {
         type: String,
      },
      readOnly: {
         type: Boolean,
         default: false,
      },
      IdName: {
         type: String,
         default: '',
      },
      setFocus: {
         type: Boolean,
         default: false,
      },
      setAutocomplete: {
         type: Boolean,
         default: true,
      },
      withValidation: {
         type: Boolean,
         default: false,
      },
      errorMsg: {
         type: String,
         default: ''
      }
   },
   methods: {
      onInput(e){
         this.$emit('input', e.target.value);
      }
   }
}
</script>
<style lang="scss" scoped>
   //component styles
   .form-control {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 2rem;

      & label {
         padding: 5px 2px;
      }

      & p {
         margin: 2px 0px;
         font-size: 14px;
         color: #e74e3c;
      }
   }

   .custom__inputs {
      padding: 10px ;
      font-size: 16px;
      border: 2px solid #eee;
      border-radius: 5px;
      width: 100%;

      &:focus {
         border: 3px solid #67679ac5;
      }
   }
</style>

مرحله 4: از کامپوننت استفاده کنید.
برای استفاده از مؤلفه ورودی سفارشی خود، می توانید آن را به مؤلفه Vue دیگری وارد کرده و آن را در قالب قرار دهید. به عنوان مثال، به پوشه view در همان پوشه src بروید و از کامپوننت در Home.vue به صورت زیر استفاده کنید:

<template>
  <div class="home">
    <!-- render emit data -->
    <form class="form__container" action="">
      <CustomInputVue
        v-model="firstName"
        :value="firstName"
        :PlaceHolder="'Firstname'"
        :withValidation="true"
        :errorMsg="'required'"
        :isLabel="true"
        :labelValue="'FirstName'"
      />
      <CustomInputVue
        v-model="email"
        :value="email"
        :PlaceHolder="'hello@example'"
        :withValidation="true"
        :errorMsg="'required'"
        :isLabel="true"
        :labelValue="'Email'"
      />
      <button class="btn">submit</button>
    </form>

  </div>
</template>

<script>
// @ is an alias to /src
import CustomInputVue from '@/components/common/CustomInput.vue'


export default {
  name: 'HomeView',
  components: {
    CustomInputVue,
  },
  data(){
    return {
      parentData: 'You are learning about props in this article',
      newMsg: 'hello',
      firstName: '',
      email: ''
    }
  },
}
</script>

<style lang="scss" scoped>
  .form__container {
    width: 40%;
    margin: 0 auto;
  }

  .btn {
    background: #0000ff;
    color: #fff;
    font-size: 18px;
    padding: 7px 15px;
    border: none;
    border-radius: 5px;

  }
</style>

در مورد استفاده از این کامپوننت باید به چند نکته توجه کرد

labelValue: داده های رشته ای را می پذیرد. برای انتقال عنوان برچسب برای ورودی استفاده می شود. زمانی که روی true تنظیم شود باید با isLabel استفاده شود.

isLabel: داده های بولی را می پذیرد. به طور پیش فرض نادرست است. اگر می خواهید از برچسب داخلی استفاده کنید، آن را روی true تنظیم کنید. در غیر این صورت، باید نادرست باشد.

CustomType: داده های رشته ای را می پذیرد. می توانید نوع ورودی را که باید با آن کار کنید به آن منتقل کنید.

PlaceHolder: داده های رشته ای را می پذیرد.

value: داده های رشته ای را می پذیرد.

readOnly: داده های بولی را می پذیرد. اگر نیاز دارید که ورودی فرم شما فقط خواندنی باشد، باید روی true تنظیم شود.

IdName: این برای ارسال شناسه به ورودی فرم است، رشته ای از داده ها را می پذیرد.

setFocus: پذیرش یک مقدار بولی، این برای کنترل فوکوس فیلد ورودی است.

setAutocomplete: این برای تنظیم تکمیل خودکار HTML در ورودی متن است.

withValidation: این به طور پیش‌فرض نادرست است، اما اگر می‌خواهید یک پیام تأیید اعتبار به برنامه اضافه کنید، می‌توانید آن را روی true تنظیم کنید.

errorMsg: پذیرش رشته ای از داده ها. به عنوان یک پیام خطا باید با “with validation” روی true استفاده شود.

تصویری از نتیجه نهایی:

نحوه ساخت یک کشویی سفارشی قسمت 3(a) را انتخاب کنید