Die erste Regel für Testobjekte ist, niemals Testobjekte zu erstellen!
Auf Habré gab es bereits viele Streitigkeiten darüber, und dann hatte ich die Gelegenheit, diese Lektion auf meiner eigenen Haut zu lernen. Ich habe die Lösung gesendet, aber keine Antwort erhalten. Sogar negativ. Nichts. Natürlich kann alles auf die Krise zurückgeführt werden, dass die Vakanz plötzlich eingefroren wurde (ich höre das in letzter Zeit oft, aber die gleichen Vakanzen hängen weiter). Trotzdem wäre banale Höflichkeit mehr als genug gewesen. Die Schlussfolgerung ist eindeutig: Sie müssen die Zuverlässigkeit des Gesprächspartners sorgfältig prüfen, bevor Sie in die TZ beißen.
Trotzdem habe ich diesen Schritt bewusst unternommen, um mich selbst zu testen und Erfahrungen zu sammeln, auch im Falle eines Versagens beim Arbeitgeber. Der Artikel wird nicht darüber sein. Schwierigkeiten mit der Lösung treten bereits beim Lesen der technischen Erklärung auf. Manchmal wissen Sie nicht einmal, wie Sie eine Aufgabe starten sollen, und die Auswahl, die Sie zu Beginn treffen, wirkt sich auf alle Entwicklungsstadien aus.
Es gibt viele Tutorials, wie man Körperkunst online erstellt. Wie wird meine also anders sein? Erstens werden sie normalerweise nicht gemäß einer technischen Aufgabe hergestellt, was bedeutet, dass die Autoren "Ecken abschneiden" und sich im Allgemeinen nicht auf irgendetwas beschränken. Zweitens ist es selten zu sehen, warum der eine oder andere Weg zur Lösung des Problems gewählt wurde. Drittens ist meine Bewerbung um eine Größenordnung komplizierter als die Standard-To-Do-Liste, dazu später mehr.
Um mich mit der Aufgabe vertraut zu machen, die ich erhalten habe, frage ich unter dem Spoiler:
Technische Aufgabe:
Verwenden Sie Vue.js, um eine kleine SPA-Notizanwendung zu implementieren.
Jede Notiz hat einen Titel und eine Aufgabenliste, dann Todo. Jedes Todo-Element besteht aus einem Kontrollkästchen und der zugehörigen Textsignatur.
Die Anwendung besteht aus nur 2 Seiten.
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
, . . , , , , ( ) , , .. , .
:
Vue.js SPA . : Vue CLI .
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}, .