Get best of the week

Wir schreiben ein Frontend, das funktioniert. Oder wie man Ingenieur von einem Entwickler wird. Teil 1

Ein Entwickler ist ein Konzept, das stark an eine bestimmte Technologie gebunden ist und das bestimmt, was Sie entwickeln werden. Ein Ingenieur ist ein viel umfassenderes Konzept, das anfangs an kein Gebiet gebunden ist. Zunächst erhalten Sie die sogenannte Engineering-Basis, auf deren Grundlage Sie eine Nische auswählen, in der Sie arbeiten, beispielsweise einen Software-Ingenieur. Und erst danach beginnt der Ingenieur, sich auf eine der Technologien zu spezialisieren.

Bei der technischen Grundlage geht es mehr um die Denkweise, die Fähigkeit zur Analyse und Systematisierung als um die Kruste der Universität. Wenn Sie sowohl die getroffenen als auch die verworfenen Entscheidungen angemessen begründen können.

Es ist kein Geheimnis, dass das Frontend eine dieser Müllhalden ist, auf denen es besser ist, wenn etwas funktioniert, es nicht zu berühren und wenn nicht, es komplett neu zu schreiben.

Lieber einmal sehen als hundertmal hören


Jetzt ist es Mode geworden, eine Schnittstelle basierend auf Karten zu erstellen. Schauen wir uns also den Fall an, in dem wir eine Karte entwickeln müssen, die aufgrund dieser Verzögerungen gezogen und zum Halten bestimmter Positionen genommen werden kann.

Einleitend


  1. Die Karte muss eine von drei Positionen einnehmen können. 1 - die Karte wurde initialisiert, 2 - der Benutzer hat die Karte hochgezogen (geöffnet), 3 - der Benutzer hat die Karte nach unten gewischt, um sie zu löschen.


  2. Die minimale Kartengröße beträgt 50vh, die maximale ist nicht begrenzt (dies bedeutet die Möglichkeit, in Position 2 zu scrollen).

Nach Erhalt der Anforderungen versucht der Entwickler höchstwahrscheinlich bereits zu entscheiden, welches Framework verwendet werden soll. Der Techniker wird versuchen, den Prozess detaillierter zu beschreiben und die wichtigsten Merkmale aus dieser Beschreibung zu ermitteln

. Beispiel:



Ein Aktionsdiagramm der obersten Ebene sieht



ungefähr so aus, es ist nicht sehr kompliziert: Betrachten Sie die DragUp-Aktion:



Hier können Sie sofort erkennen, dass eine DragUp-Aktion nur an der Position unmöglich ist, an der die Karte gescrollt wird Von allen anderen Positionen aus müssen wir unabhängig von der Größe der Karte die DragUp-Aktion ausführen.

Die Schwierigkeit besteht nur in der Klassifizierung der Karten in der Größe. Wir müssen die Karte als klein einstufen, um zu verhindern, dass sie höher als 50 Vh gezogen wird. Eine mittelgroße Karte sollte nicht über ihre Höhe steigen (ansonsten hängt sie nur in der Luft), aber eine große Karte sollte nicht höher als Y = 0 gezogen werden (oben) Bildschirm).

Ein guter Mathematiker ist ein fauler Mathematiker. Es ist schwierig, Karten nach Größe zu klassifizieren und die maximale Widerstandshöhe zu bestimmen. Es lohnt sich, darüber nachzudenken, wie diese Karten bequemer präsentiert werden können, und nicht alles direkt zu lösen (dies ist wie in der Mathematik, wenn Sie alles auf einen gemeinsamen Nenner bringen).

Zu diesem Zeitpunkt können wir uns vorstellen, dass die Karte in einem virtuellen Ansichtsfenster gezogen wird, das sich relativ zum realen Ansichtsfenster auf und ab bewegen kann. Die minimale Höhe dieses virtuellen Ansichtsfensters beträgt 50 Vh, die maximale 100 Vh.



Der allgemeine Parameter für Karten aller Größen in beliebigen Positionen (inited, open) ist nun die Gangreserve.

Das Verarbeitungsdiagramm der DragUp-Aktion kann wie folgt beschrieben werden:



Für die DragDown-Aktion ist es noch einfacher (Sie können natürlich erneut mit Eulerkreisen beginnen, aber es ist nur allzu offensichtlich). Die einzige Bedingung, die DragDown blockiert, ist, dass die Karte gescrollt wurde und die ScrollDown-Aktion ausgeführt wird nicht herunterziehen.



Und der Führer in der Unprätentiösität gegenüber restriktiven Bedingungen ist die Schriftrolle. Das einzige, was zu beachten ist, ist, dass das Scrollen nur in der geöffneten Position möglich wird, wenn sich die virtuellen und realen Ansichtsfenster vollständig überschneiden. (und wir implementieren diese Bedingung über CSS und geben einen offenen Überlauf für die Position an.)



Und natürlich haben wir etwas „verpasst“ und dieses DragEnd-Ereignis, das unsere Interaktion mit den Karten (und tatsächlich mit dem virtuellen Ansichtsfenster) und am Ausgang schließt bestimmt, in welcher Position wir sein sollen.



Gesamt


Als Ergebnis des ersten Teils, in dem wir Ingenieurschulungen durchgeführt, die Schlüsselparameter und den Aktionsplan beschrieben haben, näherten wir uns reibungslos Teil 2, in dem wir von der Position des Entwicklers aus all dies implementieren werden (z. B. DragUp-, DragDown-Aktionen, Bestimmen der Gangreserve, Beschreibung der Endpositionen). Im Allgemeinen verwandeln Sie Schaltkreise in Code.

More articles:


All Articles