‏ForesightJS: پیش‌بینی می‌کنه کاربر کجا کلیک می‌کنه

ForesightJS یه کتابخانهٔ جاوااسکریپته که هدفش اینه محتوا رو قبل از این که کاربر واقعاً لازمش داشته باشه آماده کنه. به‌جای این که فقط وقتی کاربر روی لینک هاور کرد یا کلیک کرد prefetch رو شروع کنی، این ابزار نیت کاربرو حدس می‌زنه و زودتر شروع می‌کنه. کاملاً قابل‌تنظیمه و traceable هست، و برای کاربرای دسکتاپ و موبایل استراتژی‌های متفاوتی داره.

برای کاربرای موس و کیبورد سه تا استراتژی پیش‌بینی داره که می‌تونی ترکیبشون کنی. Mouse Trajectory الگوی حرکت نشانگرو تحلیل می‌کنه تا حدس بزنه کاربر داره سمت کدوم لینک می‌ره و محتواشو قبل از رسیدن prefetch می‌کنه. Keyboard Navigation استفاده از کلید Tab رو دنبال می‌کنه و وقتی کاربر N قدمِ Tab با المان ثبت‌شده فاصله داره، prefetch می‌کنه. Scroll هم بر اساس جهت اسکرول پیش‌بینی می‌کنه کاربر داره به کدوم المان نزدیک می‌شه.

برای دستگاه‌های لمسی دو تا گزینه داره که یکیشونو انتخاب می‌کنی. Viewport Enter تشخیص می‌ده چه وقت یه المان ثبت‌شده وارد viewport می‌شه و بر اساس رفتار اسکرول و دیده‌شدنش محتواشو prefetch می‌کنه. onTouchStart هم همون رویداد اولیهٔ لمسو می‌گیره و به‌محض این که کاربر شروع به تعامل کرد prefetch رو شروع می‌کنه. طبق مستندات، پشتیبانی کامل لمسی از نسخهٔ 3.3.0 اضافه شده.

طرز کارش هم ساده‌ست: اول اگه بخوای تنظیمات دلخواه بذاری، ForesightManager رو initialize می‌کنی و مثلاً touchDeviceStrategy و tabOffset رو ست می‌کنی. بعد یه المانو با register ثبت می‌کنی و یه callback بهش می‌دی که وقتی نیت کاربر تشخیص داده شد صدا زده بشه:

ForesightManager.instance.register({
  element: myLink,
  callback: () => {
    console.log('User intent detected!')
  },
})

از نظر کارایی، تیم می‌گه هیچ polling و reflowی نداره و معماریش رویداد‌محوره؛ برای همین سبک می‌مونه. کامل با TypeScript اومده و از همون اول تایپ‌سیفه. یه ابزار توسعه (DevTools) رسمی هم داره که می‌تونی پیش‌بینی‌ها رو لحظه‌ای ببینی و تنظیمشون کنی، هرچند برای تجربهٔ کامل سیستم پیش‌بینی مسیر موس باید رو دسکتاپ باشی.

نکات کلیدی:

• ForesightJS نیت کاربرو پیش‌بینی می‌کنه تا محتوا رو قبل از کلیک prefetch کنه
• رو دسکتاپ سه استراتژی داره: مسیر موس، جابه‌جایی با Tab و جهت اسکرول
• رو دستگاه‌های لمسی از Viewport Enter یا onTouchStart استفاده می‌کنه (از نسخهٔ 3.3.0)
• کار با API ساده‌ست: یه المانو با register ثبت می‌کنی و یه callback می‌دی
• معماری رویداد‌محور بدون polling و reflow، به‌همراه پشتیبانی کامل TypeScript