웹 개발자는 시스템 개발 중에 제품 관리자의 다양한 요구에 직면하는 경우가 많습니다. 물론 대부분은 오늘 언급한 페이지 새로 고침, 앞으로 및 뒤로 이동, 브라우저 닫기 등 제품 경험에 도움이 됩니다. 사용자의 오작동을 방지하려면 보조 확인 프롬프트 상자가 제공되어야 합니다. 이는 모두가 잘 알고 있을 것으로 생각됩니다. 브라우저에서 제공하는 BOM 이벤트 메커니즘을 사용하면 됩니다. . 제품 관리자가 그러한 요구만 제기하는 것은 이해할 수 있지만, 이것보다 더 많은 것이 필요합니다...
예를 들어 프로젝트 개발 중에 제품 관리자가 구현을 위한 "개선 계획"을 제안했습니다.
팝업 상자가 너무 보기 흉하고 시스템의 전체 스타일과 일치하지 않습니다. 자체 구성 요소 라이브러리에서 대화 상자를 사용할 수 없나요? 아주 좋은 질문입니다... 꼭 말씀드리고 싶습니다. 힘내세요...
새로고침 탭과 닫기 탭에 표시되는 사본은 동일합니다. 새로고침 프롬프트는 XXX이고 닫을 때 SSS 프롬프트가 표시되므로 사용자가 더 명확하게 알 수 있습니다. 글쎄요, 사용자 경험을 고려하면 매우 좋습니다. 그래도 가능합니다... 실제로 브라우저 자체는 닫히고 새로 고쳐질 때 다르게 처리했지만 사용자 정의했습니다. 일부 부분에서는 다른 카피라이팅을 표시할 수 없습니다. 물론 몇 가지 해킹 방법이 있지만 여러 브라우저에 적응하기 어렵고 탭 닫기 및 새로 고침의 내부 구현 메커니즘은 각 브라우저마다 다릅니다.
왜 로그인할 때마다 상담원이 전화 시스템(우리는 고객 서비스 시스템입니다)에 로그인하기 전에 10초를 지연해야 합니까? 이 제한을 제거할 수 있습니까? 사용자 경험이 너무 나쁩니다! 저희도 제거하고 싶지만, 전화시스템의 잦은 체크인과 체크아웃은 문제를 일으키게 되며, 사용자가 브라우저를 새로고침하고 다시 체크인을 하게 되면, 간격이 매우 짧을 경우 전화시스템이 오작동하게 됩니다. 이 문제를 피하기 위해 우리는 이 한계를 극복했지만 다시 생각해보면 오늘 논의한 주제로 들어갈 수 있습니다.
탭 새로 고침과 탭 닫기 구별
브라우저 이벤트에 따라 탭 새로 고침과 닫기를 구분할 수 없으며 해당 작업이 실행되기 전에 다른 작업을 수행합니다. 그러나 위 제품에서 제기한 세 번째 사항에 대해서는 실제로 최적화를 고려할 수 있습니다. 새로고침할 때 10초 정도 지연이 발생합니다. 다시 로그인하거나 잠시 탭을 닫은 후에도 지연이 발생하지 않습니다.이 작업은 실제로 매우 간단합니다. 쿠키, LocalStorage 등과 같은 브라우저의 로컬 저장 메커니즘을 사용할 수 있습니다. 세션이 끝나면 캐시가 무효화되므로 여기서는 SessionStorage를 사용할 수 없습니다. 쿠키의 바이트 수를 늘리면 각 요청의 해당 네트워크 전송량이 증가합니다. 따라서 우리가 사용하는 프런트엔드 프레임워크는 다음과 같이 매우 간단합니다.
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 - lastestLeaveTime) / 1000), 0); if (this.secondCounter > 0) { this.logoutTimeInterval = this.$interval(()=> { this.secondCounter--; this.$scope.$digest(); }, 1000, this.secondCounter, false).then(() => { this.updateByStatus(this.AvayaService.status.OFFLINE); }); } else { this.updateByStatus(this.AvayaService.status.OFFLINE); }
//刷新页面或者关闭页面 $window.onbeforeunload = () => { return '操作将会导致页面数据清空,请谨慎操作...'; }; //每次页面unload时,设置LocalStorage时间; $window.onunload = () => { $window.localStorage.setItem('lastestLeaveTime', new Date().getTime()); };
onStatusClick(index, name) { if (name === '退出') { this.mgDialog.openConfirm({ showClose: false, template: 'app/header/logoutDialog.html', controller: 'HeaderDialogController as dialog', data: { 'title': '您确定要退出系统吗?' } }).then(() => { this.$window.location.href = '/logout'; this.$window.onbeforeunload = null; }); } else { // 内部操作,大家不用管 ... } }