Webentwickler sehen sich während der Systementwicklung häufig mit verschiedenen Anforderungen von Produktmanagern konfrontiert. Die meisten davon sind natürlich hilfreich für die Produkterfahrung, wie z. B. das Aktualisieren der Seite, das Vor- und Zurückblättern und das Schließen des Browsers, den wir heute erwähnt haben. Um Fehlbedienungen durch den Benutzer zu vermeiden, muss meiner Meinung nach jeder damit vertraut sein. Dies kann mithilfe des vom Browser bereitgestellten BOM-Ereignismechanismus gelöst werden . Wenn der Produktmanager nur solche Forderungen stellt, braucht es doch mehr als nur diese...
Zum Beispiel schlug der Produktmanager während einer unserer Projektentwicklungen einen „Verbesserungsplan“ für unsere Umsetzung vor:
Ihre Popup-Box ist zu hässlich und passt nicht zum Gesamtstil des Systems. Können wir den Dialog nicht in unserer eigenen Komponentenbibliothek verwenden? Sehr gute Frage ... Ich möchte nur sagen, können Sie aufstehen ...
Die in Ihren Registerkarten „Aktualisieren“ und „Schließen“ angezeigten Kopien müssen unterschiedlich behandelt werden. Die Aktualisierungsaufforderung lautet XXX und die SSS-Eingabeaufforderung wird beim Schließen abgefragt, damit Benutzer klarer sind. Nun, in Anbetracht der Benutzererfahrung möchte ich immer noch sagen, dass der Browser selbst es anders behandelt hat, wenn er geschlossen und aktualisiert wurde, aber wir haben ihn angepasst Einige Teile können natürlich keine unterschiedlichen Copywriting-Methoden anzeigen, aber es ist schwierig, sie an mehrere Browser anzupassen, und der interne Implementierungsmechanismus zum Schließen von Tabs und zum Aktualisieren ist in jedem Browser unterschiedlich
Warum müssen Sie jedes Mal, wenn Sie sich anmelden, 10 Sekunden warten, bevor sich der Agent beim Telefonsystem anmelden kann (wir sind ein Kundendienstsystem)? Können Sie diese Einschränkung aufheben? Die Benutzererfahrung ist so schlecht! Wir möchten es auch entfernen, aber das häufige Ein- und Auschecken des Telefonsystems führt zu Problemen. Wenn der Benutzer den Browser aktualisiert und erneut eincheckt, kommt es zu einer Fehlfunktion des Telefonsystems Um dieses Problem zu vermeiden, haben wir hinzugefügt: Wir haben diese Einschränkung überwunden, aber wenn wir noch einmal darüber nachdenken, können wir uns dem Thema widmen, das wir heute besprochen habenUnterscheiden Sie zwischen aktualisierenden und schließenden Tabs Wir können nicht zwischen dem Aktualisieren oder Schließen von Tabs basierend auf Browserereignissen unterscheiden und dann verschiedene Aktionen ausführen, bevor die entsprechende Aktion ausgelöst wird. Was den dritten Punkt betrifft, der durch das oben genannte Produkt angesprochen wird, können wir jedoch tatsächlich darüber nachdenken, ihn zu optimieren, d. h. Nur beim Aktualisieren kommt es zu einer Verzögerung von 10 Sekunden. Es gibt keine Verzögerung, wenn Sie sich erneut anmelden oder den Tab für eine Weile schließen
Dies ist eigentlich sehr einfach. Sie können den lokalen Speichermechanismus des Browsers verwenden, z. B. Cookies, LocalStorage usw. SessionStorage kann hier nicht verwendet werden, da der Cache nach dem Ende dieser Sitzung ungültig wird Erhöhen Sie die Anzahl der Bytes des Cookies, erhöht sich das entsprechende Netzwerkübertragungsvolumen bei jeder Anfrage. Die Bedienung ist sehr einfach. Das von uns verwendete Front-End-Framework ist wie folgt:
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 {
// 内部操作，大家不用管
...
}
}
