Pengembang web sering harus menghadapi berbagai kebutuhan manajer produk dalam pengembangan sistem. Tentu saja, kebanyakan dari mereka masih membantu pengalaman produk. Misalnya, ketika kami menyebutkan hari ini, menyegarkan halaman, maju dan mundur, dan menutup tag browser, untuk menghindari kesalahan operasi pengguna, diperlukan kotak prompt konfirmasi sekunder. Saya percaya semua orang sangat akrab dengan ini. Menggunakan mekanisme acara BOM yang disediakan oleh browser dapat menyelesaikannya. Anda dapat menggunakan acara OnBeforeunload dari objek jendela. Jika manajer produk hanya membuat permintaan seperti itu, itu memang bisa dimengerti, tetapi membutuhkan lebih dari ini ...
Misalnya, selama pengembangan proyek, manajer produk mengusulkan "rencana peningkatan" untuk implementasi kami:
Kotak pop-up Anda terlalu jelek, itu tidak cocok dengan gaya sistem secara keseluruhan. Tidak bisakah Anda menggunakan dialog di perpustakaan komponen kami sendiri? Pertanyaan yang sangat bagus ... Saya hanya ingin mengatakan, Anda bisa ...
Refresh Anda sama dengan menutup salinan yang ditampilkan di halaman tab. Anda perlu memperlakukannya secara berbeda. Segarkan prompt xxx dan SSS saat menutup, sehingga pengguna bisa lebih jelas. Nah, mengingat pengalaman pengguna, itu sangat bagus. Saya masih ingin mengatakan bahwa Anda dapat melakukannya ... pada kenyataannya, ketika browser menutup dan menyegarkan, itu telah diperlakukan secara berbeda. Promptnya berbeda, tetapi bagian khusus kami tidak dapat menampilkan copywriting yang berbeda; Tentu saja, ada juga beberapa metode peretasan, tetapi sulit untuk beradaptasi dengan beberapa browser. Mekanisme implementasi tab penutup dan penyegaran di dalam setiap browser akan berbeda;
Mengapa Anda perlu menunda 10 detik agar agen check -in ke sistem telepon setiap kali Anda masuk? Bisakah batas ini dihapus? Pengalaman pengguna terlalu buruk! Kami juga ingin menghapusnya, tetapi akan ada masalah dengan check-in dan keluar dari sistem telepon yang sering. Pengguna menyegarkan browser dan check -in lagi. Jika interval pendek, sistem telepon akan gagal. Untuk menghindari masalah ini, kami telah menambahkan batasan ini, tetapi jika kami berpikir kembali, kami dapat memasukkan topik yang kami diskusikan hari ini;
Bedakan antara tab yang menyegarkan dan penutupan
Kami tidak dapat membedakan apakah akan menyegarkan atau menutup halaman tab sesuai dengan acara browser, dan kemudian melakukan tindakan yang berbeda sebelum tindakan yang sesuai dipicu. Namun, untuk pendapat ketiga yang diajukan oleh produk di atas, kita benar -benar dapat mempertimbangkan mengoptimalkannya, yaitu hanya menunda 10 detik saat menyegarkan, dan tidak menunda ketika login baru atau tutup halaman tab setelah periode waktu tertentu;
Sebenarnya sangat mudah untuk melakukan ini. Anda dapat menggunakan mekanisme penyimpanan lokal browser, seperti cookie, LocalStorage, dll. Anda tidak dapat menggunakan SesiStorage di sini, karena setelah balasan ini, cache akan tidak valid. Karena disimpan dalam cookie akan meningkatkan jumlah byte, transmisi jaringan yang sesuai dalam setiap permintaan akan meningkat, kami menggunakan LocalStorage; operasinya sangat sederhana, dan kerangka kerja front-end yang kami gunakan adalah AngularJS, yaitu sebagai berikut:
const max_wait_time = 10; const currentDate = new date (). getTime (); const lastestleavetime = parseInt (this. $ 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. $ interval () => {this.secondCoUNTER -; ini. this.secondCounter, false) .then (() => {this.updateByStatus (this.avayAserervice.status.offline);});} else {this.updateBystatus (this.avayaService.status.offline);}Fungsi utama dari kode di atas adalah bahwa setelah memasuki sistem, pertama -tama akan pergi ke LocalStorage untuk mendapatkan waktu keluar terakhir, kemudian mendapatkan waktu saat ini, dan kurangi dua kali. Jika nilainya kurang dari 10 detik, kami pikir ini adalah penyegaran. Jika nilainya lebih besar dari 10 detik, kami pikir itu adalah untuk menutup tab atau masuk, dan kemudian kami dapat menjalankan metode yang berbeda untuk memberikan layanan pelanggan pengalaman yang lebih baik. Tidak perlu menunggu 10 detik untuk setiap entri ke dalam sistem sebelum memeriksa ke sistem telepon. Manajer Produk masih sangat penting. Huh, jika bukan karena keraguannya, kita mungkin tidak akan datang untuk mengoptimalkan tempat ini ... tentu saja, RD harus secara bertahap menumbuhkan pemikiran pengalaman pengguna ini terlebih dahulu. Bahkan jika ada sedikit yang dapat meningkatkan efisiensi layanan pelanggan, ada waktu kami untuk mengoptimalkan;
Mari kirim kode keluar yang relevan di bawah ini. Saya lupa mengatakan sebelumnya bahwa apakah itu menyegarkan atau menutup halaman tab, selama halaman dihancurkan, kami akan melakukan pengoperasian logging dari sistem telepon, jadi kami perlu check -in lagi setiap kali kami masuk;
// Segarkan halaman atau tutup halaman $ window.onbeforeunload = () => {return 'Operasi akan menyebabkan data halaman dibersihkan, harap hati -hati ...';}; // Setiap kali ketika halaman diturunkan, atur waktu stor local; $ window.onunload = () => {$ window.localstorage.setitem ('lastestleavetime', tanggal baru (). gettime ());};Kami juga dapat melihat beberapa masalah, yaitu, menyegarkan, menutup halaman, maju dan mundur, Anda harus melompat keluar dari kotak konfirmasi sekunder default browser, tetapi jika pengguna mengklik tombol sistem keluar, dialog di perpustakaan komponennya harus muncul, dan keduanya tidak boleh muncul. Kode spesifiknya adalah sebagai berikut:
ontstatusClick (index, name) {if (name === 'exit') {this.mgdialog.openconfirm ({showclose: false, template: 'app/header/logoutdialog.html', controller: 'headdialogController sebagai dialog', data: {'title': {{'judul': 'Anda:' judul ': {{' title ':' {{'title' Sistem? '}}). Kemudian (() => {this. $ window.location.href =' /logout';this.$window.onbeforeunload = null;});} lain {// Operasi internal, semua orang tidak perlu khawatir tentang ...}}Di atas adalah seluruh konten JS yang diperkenalkan oleh editor kepada Anda untuk membedakan apakah halaman browser disegarkan atau ditutup. Saya harap ini akan membantu semua orang!