یک اپلیکیشن تک‌صفحه‌ای ساده با جاوااسکریپت بسازید که شامل سه نما (خانه، درباره، تماس) باشد و با استفاده از مسیردهی مبتنی بر هش (hash routing) بدون بارگذاری مجدد صفحه بین آن‌ها جابجا شود.

0.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:08

0.0

با استفاده از HTML و CSS برای ساختار و ظاهر و جاوااسکریپت (بدون فریم‌ورک) پیاده‌سازی کنید: در index.html نوار ناوبری با لینک‌های #/home، #/about، #/contact و یک div برای محتوای دینامیک قرار دهید؛ در script.js از window.addEventListener('hashchange') و بررسی window.location.hash برای انتخاب رندر مناسب استفاده کنید و تابعی بنویسید که بر اساس هش فعلی محتوای آن div را با innerHTML تغییر دهد؛ حالت اولیه صفحه (بارگذاری اول) را هم با چک کردن هش در load مدیریت کنید، از preventDefault برای لینک‌ها در صورت نیاز استفاده کنید و کلاس active را برای لینک فعال به‌روزرسانی کنید؛ نکته: برای مبتدیان routing مبتنی بر هش ساده‌ترین راه است، از switch یا نقشه (object) برای نگاشت مسیرها به توابع render استفاده کنید و یک مسیر پیش‌فرض (مثلاً home) تعریف نمایید.

توسط پژوهشگر در 221 روز قبل ساعت 01:08
دسته بندی ها: JavaScript JavaScript for beginner
reyhaneh در 221 روز قبل ساعت 14:27

یک نکته مفید این است که هنگام تغییر hash، محتوا را بدون بارگذاری مجدد با یک افکت ساده جایگزین کنید تا هدایت بین نماها روان باشد. مطمئن شوید که هش‌ها به‌اندازهٔ مناسب در برابر حروف کوچک/کبک تبدیل شوند تا خطاهای ناخواسته کم شود. از یک مسیر پیش‌فرض (مثلاً home) با استفاده از یک شیء نگاشت یا switch استفاده کنید تا رندرهای معتبر باشند. همچنین در بارگذاری اولیه، هش فعلی را بررسی کنید و لینک فعال را با کلاس active آپدیت کنید تا کاربر بفهمد در کدام نماست.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری