غالبًا ما يتعين على مطوري الويب مواجهة احتياجات مختلفة لمديري المنتجات في تطوير النظام. بالطبع ، لا يزال معظمهم مفيدين لتجربة المنتج. على سبيل المثال ، عندما ذكرنا اليوم ، قم بتحديث الصفحة ، إلى الأمام والخلف ، وأغلق علامة المتصفح ، من أجل تجنب سوء الفعل المستخدم ، يلزم مربع موجه التأكيد الثانوي. أعتقد أن الجميع على دراية بهذا. باستخدام آلية حدث BOM التي يوفرها المتصفح يمكن حلها. يمكنك استخدام حدث OnBeforeUnload لكائن النافذة. إذا كان مدير المنتج يقدم مثل هذا الطلب فقط ، فهذا أمر مفهوم بالفعل ، لكنه يتطلب أكثر من ...
على سبيل المثال ، خلال تطوير المشروع ، اقترح مدير المنتج "خطة تحسين" لتنفيذنا:
صندوق المنبثقة الخاص بك قبيح للغاية ، ولا يتطابق مع النمط العام للنظام. ألا يمكنك استخدام مربع الحوار في مكتبة المكون الخاصة بنا؟ سؤال جيد جدا ... أريد فقط أن أقول ، يمكنك أن تستيقظ ...
التحديث الخاص بك هو نفسه إغلاق النسخة المعروضة في صفحة علامة التبويب. تحتاج إلى معاملته بشكل مختلف. قم بتحديث المطالبة XXX و SSS عند الإغلاق ، بحيث يمكن للمستخدم أن يكون أكثر وضوحًا. حسنًا ، بالنظر إلى تجربة المستخدم ، إنها جيدة جدًا. ما زلت أريد أن أقول أنه يمكنك أن تستيقظ ... في الواقع ، عندما يغلق المتصفح ويتحقق ، فقد تم التعامل معه بشكل مختلف. المطالبات مختلفة ، لكن أجزائنا المخصصة لا يمكنها عرض كتابة نصية مختلفة ؛ بالطبع ، هناك أيضًا بعض طرق الاختراق ، ولكن من الصعب التكيف مع متصفحات متعددة. ستكون آليات التنفيذ لإغلاق علامات التبويب والتحديث داخل كل متصفح مختلفة ؛
لماذا تحتاج إلى تأخير 10 ثوانٍ للوكيل لتسجيل الوصول إلى نظام الهاتف في كل مرة تقوم فيها بتسجيل الدخول؟ هل يمكن إزالة هذا الحد؟ تجربة المستخدم سيئة للغاية! نريد أيضًا إزالته ، ولكن ستكون هناك مشاكل في تسجيل الوصول المتكرر والخروج من نظام الهاتف. يقوم المستخدم بتحديث المتصفح ويتحقق مرة أخرى. إذا كان الفاصل الزمني قصيرًا ، فسوف يفشل نظام الهاتف. من أجل تجنب هذه المشكلة ، أضفنا هذا التقييد ، ولكن إذا فكرنا في العودة ، فيمكننا إدخال الموضوع الذي نناقشه اليوم ؛
التفريق بين علامات التبويب المنعشة والإغلاق
لا يمكننا التمييز بين ما إذا كان سيتم تحديث أو إغلاق صفحة علامة التبويب وفقًا لحدث المتصفح ، ثم تنفيذ إجراءات مختلفة قبل تشغيل الإجراء المقابل. ومع ذلك ، بالنسبة للرأي الثالث الذي أثاره المنتج أعلاه ، يمكننا في الواقع التفكير في تحسينه ، وهو أنه لا يتأخر فقط 10 ثوانٍ عند الانتعاش ، ولا يتأخر عند تسجيل الدخول الجديد أو إغلاق صفحة علامة التبويب بعد فترة زمنية ؛
من السهل جدًا القيام بذلك. يمكنك استخدام آلية التخزين المحلية للمتصفح ، مثل ملفات تعريف الارتباط ، المحلية ، وما إلى ذلك. لا يمكنك استخدام SessionStorage هنا ، لأنه بعد هذا الرد ، ستكون ذاكرة التخزين المؤقت غير صالحة. نظرًا لأن التخزين في ملف تعريف الارتباط سيزيد من عدد البايتات ، فإن نقل الشبكة المقابل في كل طلب سيزداد ، نستخدم LocalStorage ؛ تشغيله بسيط للغاية ، والإطار الأمامي الذي نستخدمه هو AngularJS ، وهو على النحو التالي:
const max_wait_time = 10 ؛ const currentDate = new date (). getTime () ؛ const lastestleavetime = parseint (هذا. $ window.localStorage.getItem ('lastestleavetime') ، 10) || CurrentDate this.secondcounter = math.max (max_wait_time - math.ceil ((currentDate - lastLeavetime) / 1000) ، 0) ؛ if (this.SecondCounter> 0) {this.logouttimeInterval = this. $ veral () => this.secondcounter ، false) .Then (() => {this.updateByStatus (this.avayaservice.status.offline) ؛}} آخر {this.updatebystatus (this.avayaservice.status.offline) ؛}}تتمثل الوظيفة الرئيسية للرمز أعلاه في أنه بعد إدخال النظام ، ستذهب أولاً إلى LocalStorage للحصول على وقت المخرج الأخير ، ثم الحصول على الوقت الحالي ، وطرح المرتين. إذا كانت القيمة أقل من 10 ثوان ، فإننا نعتقد أن هذا تحديث. إذا كانت القيمة أكبر من 10 ثوانٍ ، فإننا نعتقد أنها هي إغلاق علامة التبويب أو تسجيل الدخول ، ثم يمكننا تنفيذ طرق مختلفة لمنح خدمة العملاء تجربة أفضل. ليست هناك حاجة للانتظار 10 ثوان لكل إدخال في النظام قبل تسجيل الدخول إلى نظام الهاتف. لا يزال مدير المنتج مهمًا جدًا. هاه ، إذا لم يكن ذلك بسبب شكوكه ، فقد لا نأتي لتحسين هذا المكان ... بالطبع ، ينبغي على RD أن يزرع تدريجياً هذا التفكير في تجربة المستخدم أولاً. حتى لو كان هناك القليل من الكفاءة التي يمكن أن تحسن كفاءة خدمة العملاء ، فإن الأمر يستحق وقتنا لتحسينه ؛
دعنا ننشر رمز الخروج ذي الصلة أدناه. لقد نسيت أن أقول من قبل ما إذا كانت تحديث أو إغلاق صفحة علامة التبويب ، طالما تم تدمير الصفحة ، سنقوم بتنفيذ تشغيل تسجيل الخروج من نظام الهاتف ، لذلك نحتاج إلى تسجيل الوصول مرة أخرى في كل مرة نأتي فيها ؛
// قم بتحديث الصفحة أو أغلق page $ window.onbeforeunload = () => {return 'ستتسبب العملية في مسح بيانات الصفحة ، يرجى توخي الحذر ...' ؛} ؛ // في كل مرة يتم فيها تفريغ الصفحة ، قم بتعيين وقت LocalStorage ؛ $ window.onunload = () => {$ window.localStorage.setItem ('lastestLeavetime' ، date (). getTime ()) ؛} ؛قد نلاحظ أيضًا بعض المشكلات ، أي ، تحديث ، وإغلاق الصفحة ، إلى الأمام والخلف ، تحتاج إلى القفز من مربع التأكيد الثانوي الافتراضي للمتصفح ، ولكن إذا انقر المستخدم على زر الخروج ، يجب أن يظهر الحوار في مكتبة مكونه ، ويجب ألا يظهر كلاهما. الرمز المحدد كما يلي:
onStatusClick (الفهرس ، الاسم) {if (name === 'exit') {this.mgdialog.openconfirm ({showclose: false ، template: 'app/header/logoutdialog.html' ، controller: 'headerdialogcontroller as dialog ، {data': '' exit ‘ye ex hean to to to the النظام؟ '}}). ثم (() => {هذا. $ window.location.href =' /logout' ؛ما سبق هو المحتوى الكامل لـ JS الذي يقدمه لك المحرر لتمييز ما إذا كانت صفحة المتصفح قد تم تحديثها أو إغلاقها. آمل أن يكون ذلك مفيدًا للجميع!