Веб -разработчикам часто приходится сталкиваться с различными потребностями менеджеров по продуктам в разработке системы. Конечно, большинство из них все еще полезны для опыта продукта. Например, когда мы упомянули сегодня, обновите страницу, вперед и назад и закройте тег браузера, чтобы избежать неправильного вычета пользователя, требуется вторичное поле для подтверждения. Я считаю, что все очень хорошо знакомы с этим. Использование механизма событий BOM, предоставленного браузером, может решить его. Вы можете использовать событие OnbeForeUnload в окне объекта. Если менеджер продукта только делает такой запрос, это действительно понятно, но это требует больше, чем эти ...
Например, во время разработки проекта менеджер продуктов предложил «план улучшения» для нашей реализации:
Ваша всплывающая коробка слишком уродливо, она не соответствует общему стилю системы. Разве вы не можете использовать диалог в нашей собственной библиотеке компонентов? Очень хороший вопрос ... я просто хочу сказать, ты можешь ...
Ваше обновление такое же, как закрытие копии, отображаемой на странице вкладок. Вы должны относиться к нему по -разному. Обновите подсказку XXX и SSS при закрытии, чтобы пользователь мог быть более ясным. Ну, учитывая пользовательский опыт, это очень хорошо. Я все еще хочу сказать, что вы можете вы поднять ... На самом деле, когда браузер закрывается и обновляется, с ним обращались по -разному. Подсказки разные, но наши пользовательские детали не могут отображать разные копирайтинг; Конечно, есть также некоторые методы взлома, но трудно адаптироваться к нескольким браузерам. Механизмы реализации закрывающих вкладок и обновления в каждом браузере будут разными;
Зачем вам нужно отложить 10 секунд, чтобы агент проверял телефонную систему каждый раз, когда вы входите в систему? Можно ли удалить этот предел? Пользовательский опыт очень плохой! Мы также хотим удалить его, но будут проблемы с частой регистрацией и из телефонной системы. Пользователь обновляет браузер и снова регистрирует. Если интервал короткий, телефонная система потерпит неудачу. Чтобы избежать этой проблемы, мы добавили это ограничение, но если мы вспомним, мы можем ввести тему, которую мы обсуждаем сегодня;
Различайте освежающие и закрытые вкладки
Мы не можем различить, обновлять или закрыть страницу вкладок в соответствии с событием браузера, а затем выполнять разные действия до того, как будет запускается соответствующее действие. Однако для третьего мнения, поднятого приведенным выше продуктом, мы можем фактически рассмотреть возможность его оптимизации, что состоит в том, что оно задерживается только 10 секунд, когда он освежает, и не откладывает, когда новый вход или закрытие страницы вкладок после периода времени;
Это на самом деле очень просто сделать это. Вы можете использовать локальный механизм хранения браузера, такой как файлы cookie, LocalStorage и т. Д. Вы не можете использовать здесь SessionStorage, потому что после этого ответа кэш будет недействительным. Поскольку хранение в файле cookie увеличит количество байтов, соответствующая сетевая передача в каждом запросе будет увеличиваться, мы используем LocalStorage; Его работа очень проста, а передняя структура, которую мы используем,-это AngularJS, что выглядит следующим образом:
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 -; This. $. this.secondcounter, false) .then (() => {this.updatebystatus (this.avayaservice.status.offline);});} else {this.updatebystatus (this.avayaservice.status.offline);};Основная функция приведенного выше кода заключается в том, что после входа в систему она сначала перейдет в LocalStorage, чтобы получить время последнего выхода, затем получить текущее время и вычесть два раза. Если значение составляет менее 10 секунд, мы думаем, что это обновление. Если значение превышает 10 секунд, мы думаем, что она должна закрыть вкладку или вход, а затем мы можем выполнить различные методы, чтобы обеспечить обслуживание клиентов лучшее опыт. Нет необходимости ждать 10 секунд для каждого входа в систему, прежде чем регистрироваться в телефонной системе. Менеджер продукта все еще очень важен. Да, если бы не его сомнения, мы могли бы не оптимизировать это место ... конечно, RD должен постепенно развивать это мышление об пользовательском опыте. Даже если есть немного, что может повысить эффективность обслуживания клиентов, это стоит того, чтобы оптимизировать;
Давайте опубликуем соответствующий код выхода ниже. Я забыл сказать до того, что он освежает или закрывает страницу вкладок, если страница будет уничтожена, мы выполним работу в отделении регистрации из телефонной системы, поэтому нам нужно регистрироваться снова каждый раз, когда мы приходим;
// Обновить страницу или закрыть страницу $ window.onbeforeUnload = () => {return 'Операция приведет к очистке данных страницы, будьте осторожны ...';}; // Каждый раз, когда страница будет выгружена, установите время локальной стадии; $ window.onunload = () => {$ window.localstorage.setItem ('LastESTLEAVETIME', new Date (). getTime ());};Мы также можем заметить некоторые проблемы, то есть обновить, закрыть страницу, вперед и назад, вам необходимо выпрыгнуть из вторичного флеша для вторичного подтверждения браузера по умолчанию, но если пользователь нажимает кнопку System Exit, диалог в его библиотеке компонентов должен появиться, и оба не должны всплыть. Конкретный код заключается в следующем:
OnStatusClick (index, name) {if (name === 'exit') {this.mgdialog.openconfirm ({showclose: false, шаблон: 'app/header/logoutdialog.html', контроллер: 'hederdialogcontroler как диалог System?Выше приведено все содержание JS, которое редактор представляет вам, чтобы отличить, обновлена или закрыта страница браузера. Я надеюсь, что это будет полезно для всех!