</>مدرسه زیب‌موجیاد بگیر، تمرین کن، بساز
مدرسهHTMLدرس 5
درس 5 از 8 · ۳۵ دقیقه

تابع و تقسیم مسئولیت

ساختار صفحه‌های وب را از اولین تگ تا یک صفحه کامل و دسترس‌پذیر یاد بگیر.

۰امتیاز شما
نقشه این درس

بعد از این درس چه کاری می‌توانی انجام بدهی؟

  • یک کار بزرگ را خرد کنی
  • ورودی و خروجی تابع را روشن بنویسی
  • تکرار منطق را حذف کنی
به زبان زندگی واقعی

HTML را ساده بفهم

HTML مثل اسکلت و برچسب‌های یک فروشگاه است؛ مشخص می‌کند هر بخش عنوان، توضیح، تصویر یا دکمه است.

نکته مهم برای شروع HTML

تابع کوتاه هدف نیست؛ تابع متمرکز با قرارداد روشن هدف است.

چرا مهم است؟ هر تابع یک دلیل روشن برای تغییر داشته باشد.

اولین تمرین تو: محاسبه اصلی نمونه را به تابعی نام‌دار منتقل کن و برای دو ورودی عادی و یک ورودی نامعتبر انتظار بنویس.

توضیح ساده و قدم‌به‌قدم

از یک مثال کوچک شروع کن

تابع و کلاس ابزار تقسیم مسئولیت‌اند. هر بخش باید یک دلیل روشن برای تغییر داشته باشد، ورودی لازم را آشکار بگیرد و خروجی قابل پیش‌بینی بدهد. وابستگی پنهان و state عمومی، آزمون و تغییر را سخت می‌کند.

1

۱. مسئولیت را نام‌گذاری کن

نام تابع باید کار واحد آن را توضیح دهد.

2

۲. ورودی و خروجی را محدود کن

فقط داده لازم را دریافت و نتیجه روشن برگردان.

3

۳. بدون UI آزمون کن

منطق اصلی باید مستقل از ورودی/خروجی قابل بررسی باشد.

نکته مهم

تابع کوتاه هدف نیست؛ تابع متمرکز با قرارداد روشن هدف است.

مفهوم‌های اصلی

سه قطعه‌ای که باید بفهمی

مسئولیت

هر تابع یک دلیل روشن برای تغییر داشته باشد.

پارامتر

داده‌ای که تابع برای کار نیاز دارد.

خروجی

نتیجه قابل پیش‌بینی و قابل آزمون.

سناریوی واقعی

صفحه معرفی محصولی که کاربر و موتور جست‌وجو هر دو ساختارش را درست بفهمند.

در این درس، بخشی واقعی از پروژه «صفحه معرفی یک محصول واقعی» را می‌سازیم. قبل از کد یا پرامپت، ورودی، قانون و خروجی مورد انتظار را روی کاغذ مشخص می‌کنیم.

ورودی روشنیک تغییر کوچکنتیجه قابل سنجش
بازی ساختن کد

قطعه‌ها را به ترتیب درست بچین

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

مرحله ۲ از ۳ · مرتب‌کردن کد
بانک قطعه‌هاقطعه مناسب را انتخاب کن
ترتیب پاسخ تواز بالا به پایین اجرا می‌شود

    هنوز پاسخی بررسی نشده است.

    کارگاه تعاملی

    اجرا و پیش‌نمایش

    این نمونه واقعاً داخل محیط جدا و امن مرورگر اجرا می‌شود؛ مقدار را تغییر بده و نتیجه را مستقیم ببین.

    html-functions
    خروجیآماده
    یک بخش را تغییر بده و دکمه بررسی را بزن.
    بعد از هر تغییر، نتیجه را دوباره بررسی کن.
    تمرین هدایت‌شده

    محاسبه اصلی نمونه را به تابعی نام‌دار منتقل کن و برای دو ورودی عادی و یک ورودی نامعتبر انتظار بنویس.

    دام‌های رایج

    این سه اشتباه را انجام نده

    1

    تابع با چند مسئولیت نامرتبط

    2

    وابستگی به state عمومی

    3

    خروجی یا اثر جانبی مبهم

    سنجش چندمرحله‌ای

    با 5 سؤال مطمئن شو که مفهوم را گرفته‌ای

    سؤال 1 از 5

    بهترین روش استفاده از نمونه این درس چیست؟

    سؤال 2 از 5

    تابع خوب چه کاری انجام می‌دهد؟

    سؤال 3 از 5

    وابستگی پنهان چه مشکلی دارد؟

    سؤال 4 از 5

    کدام روش نشان می‌دهد این درس را واقعاً فهمیده‌ای؟

    سؤال 5 از 5

    کدام رفتار احتمال خطا را در همین موضوع بیشتر می‌کند؟

    پایان درس 5

    فهمیدی، تغییر دادی، نتیجه را توضیح دادی؟

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