عند إنشاء تطبيق ويب ، قد تواجه مواقف تحتاج فيها إلى تتبع حالة الرؤية الحالية. يحدث أنك تحتاج إلى تشغيل أو إيقاف تأثير الرسوم المتحركة أو الفيديو أو تقليل كثافة أو تتبع سلوك المستخدم للتحليلات. للوهلة الأولى ، تبدو هذه الوظيفة سهلة التنفيذ ، ولكنها ليست كذلك. تتبع نشاط المستخدم عملية معقدة إلى حد ما.
هناك واجهة برمجة تطبيقات (API) لرؤية الصفحة تعمل بشكل جيد في معظم الحالات ، لكنها لا تتعامل مع جميع الحالات المحتملة لعدم نشاط علامة تبويب المتصفح. ترسل واجهة برمجة تطبيقات إمكانية رؤية الصفحة حدثًا لإمكانية الرؤية للسماح للمستمعين بمعرفة أن حالة ظهور الصفحة قد تغيرت. لا يتم تشغيل حدث في بعض الحالات إذا كانت نافذة المستعرض أو علامة التبويب المقابلة مخفية عن العرض. للتعامل مع بعض هذه الحالات ، نحتاج إلى استخدام مجموعة من الأحداث التي تم التركيز عليها وطمسها في كل من المستند والنافذة.
لذلك ، سوف تتعلم من هذه المقالة كيفية إنشاء مكون React بسيط يتتبع حالة رؤية الصفحة.
سيتم استخدام Codesandbox هنا لإنشاء تطبيق React (يمكنك أيضًا استخدام create-react-app). سننشئ تطبيقًا صغيرًا يتم فيه تشغيل عنصر فيديو HTML5 فقط إذا كانت علامة تبويب المتصفح قيد التركيز أو نشطة ، وإلا سيتم إيقافها تلقائيًا. يتم استخدام الفيديو لتسهيل اختبار ميزات التطبيق.
visibilityjs - التفاف لواجهة برمجة تطبيقات رؤية الصفحة
إن Visibility.js عبارة عن غلاف لـ API Visibility Page. يخفي بادئات البائع ويضيف وظائف عالية المستوى. تتيح لك واجهة برمجة تطبيقات إمكانية رؤية الصفحة تحديد ما إذا كانت صفحة الويب الخاصة بك إما مرئية للمستخدم أو مخفية في علامة تبويب الخلفية أو العرض المسبق. يتيح لك استخدام حالة رؤية الصفحة في منطق JavaScript وتحسين أداء المتصفح عن طريق تعطيل المؤقتات غير الضرورية وطلبات AJAX ، أو تحسين تجربة واجهة المستخدم (على سبيل المثال ، عن طريق إيقاف تشغيل الفيديو أو عرض الشرائح عندما ينتقل المستخدم إلى علامة تبويب متصفح أخرى).
Crossbrowser وطريقة خفيفة الوزن للتحقق مما إذا كان المستخدم يبحث في الصفحة أو يتفاعل معها. (غلاف حول رؤية HTML5 api)
الشروع في العمل
سوف نستخدم Codesandbox لتمهيد تطبيق React الخاص بنا (يمكنك استخدامه إنشاء تتفاعل التطبيق كذلك). سننشئ تطبيقًا صغيرًا يحتوي على عنصر فيديو HTML5 يتم تشغيله فقط عندما تكون علامة تبويب المتصفح قيد التركيز أو نشطة وإلا سيتم إيقافها تلقائيًا. نحن نستخدم مقطع فيديو لأنه سيجعل اختبار وظائف تطبيقنا أمرًا سهلاً.
لنبدأ بإنشاء أبسط قطعة ، على سبيل المثال مكون الفيديو. سيكون مكونًا بسيطًا سيحصل على الدعائم المنطقية المسماة النشطة والدعائم المتسلسلة المسماة src والتي تحمل عنوان URL للفيديو. إذا كانت الدعائم النشطة صحيحة ، فسنشغل الفيديو وإلا فإننا سنوقفه مؤقتًا.
سنقوم بإنشاء مكون فئة التفاعل البسيط. سنجعل عنصر فيديو بسيطًا مع تعيين مصدره على عنوان URL الذي تم تمريره باستخدام الدعائم src ونستخدم واجهة برمجة تطبيقات ref React الجديدة لإرفاق مرجع على عقدة DOM للفيديو. سنقوم بتعيين الفيديو على التشغيل التلقائي على افتراض أنه عند بدء تشغيل التطبيق ، ستكون الصفحة نشطة. هناك شيء واحد يجب أن نلاحظه هنا وهو ألا يسمح Safari الآن بتشغيل عناصر الوسائط تلقائيًا دون تدخل المستخدم. تعتبر طريقة دورة حياة المكون هي أداة مفيدة للغاية في التعامل مع الآثار الجانبية عندما تتغير الدعائم الخاصة بالمكون. لذلك ، هنا سنستخدم طريقة دورة الحياة هذه لتشغيل الفيديو وإيقافه مؤقتًا بناءً على القيمة الحالية لـ this.props.active.
اختلافات بادئة بائع المتصفح مزعجة للغاية للتعامل معها عند استخدام واجهات برمجة تطبيقات معينة ، ومن المؤكد أن واجهة برمجة تطبيقات رؤية الصفحة هي واحدة منها. لذلك ، سننشئ وظيفة أداة مساعدة بسيطة تعالج هذه الاختلافات وتعيد إلينا واجهة برمجة التطبيقات المتوافقة بناءً على متصفح المستخدم بطريقة موحدة. سنقوم بإنشاء وتصدير هذه الوظيفة الصغيرة من pageVisibilityUtils.js تحت ال SRC الدليل.
في هذه الوظيفة ، سوف نستخدم تدفق التحكم البسيط القائم على البيان لإرجاع واجهة برمجة التطبيقات الخاصة بالمستعرض. يمكنك أن ترى أننا تعلق مللي ثانية بادئة لمستكشف الإنترنت و بكت بادئة لمتصفحات webkit. سنقوم بتخزين API الصحيح في متغيرات سلسلة مخفية و visibilityChange وإرجاعها من الوظيفة في شكل كائن بسيط. أخيرًا ، سوف نقوم بتصدير الوظيفة.
بعد ذلك ، ننتقل إلى المكون الرئيسي لدينا. سنقوم بتغليف منطق تتبع رؤية الصفحة الخاص بنا في مكون فئة React القابل لإعادة الاستخدام من خلال الاستفادة من نموذج Render Props. سنقوم بإنشاء مكون فئة يسمى VisibilityManager. سوف يتعامل هذا المكون مع إضافة وإزالة جميع مستمعي الأحداث على أساس DOM.
سنبدأ من خلال استيراد وظيفة الأداة المساعدة التي أنشأناها في وقت سابق واستدعاءها للحصول على واجهات برمجة التطبيقات المحددة للمتصفح الصحيح. ثم ، سنقوم بإنشاء مكون React وتهيئة حالته بحقل واحد هو مجموعة مرئية إلى true. سيكون حقل الحالة المنطقية هذا مسؤولاً عن عكس حالة رؤية صفحتنا. في طريقة دورة حياة componentDidMount للمكون ، سنقوم بإرفاق مستمع حدث في المستند لحدث visibilitychange بأسلوب this.handleVisibilityChange كمعالج له. سنقوم أيضًا بإرفاق مستمعي الأحداث للتركيز ولتمويه الأحداث في المستند بالإضافة إلى عنصر النافذة. هذه المرة سنقوم بتعيين هذا. ForceVisibilityTrue و this.forceVisibilityFalse كمعالجات للتركيز وتمويه الأحداث على التوالي.
الآن ، سنقوم بعد ذلك بإنشاء أسلوب handleVisibilityChange الذي سيقبل وسيطة واحدة مفروضة. سيتم استخدام وسيطة forceFlag لتحديد ما إذا كانت الطريقة تسمى بسبب حدث visibilitychange أو أحداث التركيز أو التمويه. وذلك لأن أساليب forceVisibility و True و forceVisibilityFalse لا تفعل شيئًا سوى استدعاء أسلوب handleVisibilityChange ذي القيمة الصواب والخطأ للوسيطة forceFlag. داخل أسلوب handleVisibilityChange ، نتحقق أولاً مما إذا كانت قيمة وسيطة forceFlag هي قيمة منطقية (وهذا لأنه إذا تم استدعاؤها من معالج أحداث visibilitychange أكثر من أن تكون الوسيطة التي تم تمريرها عبارة عن كائن SyntheticEvent). إذا كان منطقيًا ، فإننا نتحقق مما إذا كان هذا صحيحًا أم خطأ. عندما يكون صحيحًا ، فإننا نطلق على طريقة setVisibility بـ true وإلا فإننا نسميها بطريقة false كحجة. تستفيد طريقة setVisibility من هذه الطريقة. setState لتحديث قيمة الحقل المرئي في حالة المكون. ولكن ، إذا لم يكن القسري القسري منطقيًا ، فإننا نتحقق من قيمة السمة المخفية في المستند ونستدعي طريقة setVisibility وفقًا لذلك. هذا يختتم منطق تتبع حالة رؤية الصفحة.
لجعل المكون قابلاً لإعادة الاستخدام في الطبيعة ، فإننا نستخدم نموذج Render Props ، أي بدلاً من تقديم مكون من طريقة التجسيد ، فإننا نستدعي this.props.children كدالة مع this.state.isVisible.
أخيرًا ، نقوم بتثبيت تطبيق React على DOM في منطقتنا index.js ملف. نحن نستورد عنصري React في VisibilityManager والفيديو الخاصين بنا ونقوم بإنشاء تطبيق React Component وظيفي صغير من خلال تأليفهما. نقوم بتمرير وظيفة كأولاد لمكون VisibilityManager الذي يقبله وهو مرئي كوسيطة وتمريره إلى مكون الفيديو في بيان الإرجاع الخاص به. نقوم أيضًا بتمرير عنوان URL للفيديو كدعائم src إلى مكون الفيديو. هذه هي الطريقة التي نستهلكها المكون VisiblityManager Render Props. أخيرًا ، نستخدم طريقة ReactDOM.render لتقديم تطبيق React على عقدة DOM بمعرف "root".
استنتاج
أصبحت واجهات برمجة التطبيقات الحديثة للمتصفح قوية بالفعل ويمكن استخدامها للقيام بأشياء مذهلة. معظم واجهات برمجة التطبيقات هذه ضرورية في طبيعتها ويمكن أن تكون خادعة للعمل في بعض الأحيان في نموذج رياكت التصريحي. يمكن أن يكون استخدام أنماط قوية مثل Render Props للالتفاف على واجهات برمجة التطبيقات هذه في مكونات React القابلة لإعادة الاستخدام الخاصة بها مفيدًا للغاية.
جافا سكريبت مطور ومتحمس الأمن السيبراني.
نشرت 24 أغسطس
