مرحبًا، أنا هارون، أحد كبار مطوري Full Stack. اليوم، سأشارك بعض وظائف JavaScript المفيدة بشكل لا يصدق والتي يمكنك استخدامها في كل مشروع تقريبًا

1. يتتبع رؤية العنصر داخل إطار العرض

تستخدم هذه الأداة المساعدة Intersection Observer API لتتبع رؤية عنصر داخل إطار العرض. يستدعي دالة رد اتصال ذات قيمة منطقية تشير إلى ما إذا كان العنصر مرئيًا أم لا.

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. نقاط توقف إطار العرض التفاعلية

تسمح لك هذه الأداة المساعدة بتحديد نقاط التوقف والحصول على إشعار عندما يتجاوز عرض إطار العرض نقاط التوقف هذه. يستدعي وظيفة رد اتصال بقيمة نقطة التوقف الحالية.

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. واجهة برمجة تطبيقات الحافظة التفاعلية

تستمع هذه الأداة المساعدة إلى نسخ الأحداث وتقرأ النص المنسوخ من الحافظة، وتستدعي وظيفة رد اتصال مع النص المنسوخ.

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. واجهة برمجة تطبيقات اتجاه الشاشة التفاعلية

تستمع هذه الأداة المساعدة إلى التغييرات في اتجاه الشاشة وتستدعي وظيفة رد الاتصال بنوع الاتجاه الحالي.

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. حالة رد الفعل لإظهار ما إذا كان الماوس يغادر الصفحة

تتتبع هذه الأداة المساعدة عندما يغادر الماوس الصفحة أو يدخل إليها وتستدعي وظيفة رد الاتصال بقيمة منطقية تشير إلى ما إذا كان الماوس قد غادر الصفحة.

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

تعمل كل من هذه الأدوات المساعدة على تعزيز مستمعي الأحداث وواجهات برمجة التطبيقات الحديثة لتوفير سلوك تفاعلي في تطبيقات JavaScript الخاصة بك.

شكرًا لك على الوقت الذي أمضيته معي في استكشاف أدوات جافا سكريبت القوية هذه. آمل أن تجدها مفيدة ومثيرة كما أفعل. لا تتردد في تجربة هذه الوظائف في مشاريعك ومعرفة كيف يمكن أن تعزز عملية التطوير الخاصة بك. إذا كان لديك أي أسئلة أو ترغب في مشاركة نصائحك الخاصة، يرجى كتابتها في التعليقات. برمجة سعيدة!