Sie sind hier � 331
Die Einzelteile zusammenfügen
var view = {
displayMessage: function(msg) {
},
displayHit: function(location) {
},
displayMiss: function(location) {
}
};
Den View implementieren
Wenn Sie vorhin Ihre Antworten überprüft haben, konnten Sie feststellen, dass
wir den View in drei Methoden aufgeteilt haben: displayMessage (Nachricht
ausgeben), displayHit (Treffer anzeigen) und displayMiss (Fehlversuch
anzeigen). Tatsächlich sind hier mehrere Antworten möglich. Vielleicht haben
Sie aber nur die Methoden displayMessage und displayPlayerGuess
(Rateversuch anzeigen). Der zweiten Methode übergeben Sie ein Argument, das
angibt, ob der Versuch ein Treffer oder ein Fehlversuch war. Auch das ist ein
völlig legitimes Design. Wir wollen zunächst aber bei unserer Version bleiben
und überlegen, wie die erste Methode, displayMessage, implementiert
werden kann:
Hier ist unser View-Objekt.
Hier fangen wir an.
Die Funktionsweise von displayMessage
Für die Umsetzung von displayMessage müssen wir uns den
HTML-Code noch einmal ansehen. Dort gibt es das <div>-Element
mit der ID »messageArea«, das die Meldungen enthalten soll:
<div id="board">
<div id="messageArea"></div>
...
</div>
Mithilfe des DOM können wir auf das <div>-Element
zugreifen und es per innerHTML mit Text füllen. Nicht
vergessen: Änderungen am DOM werden sofort im Browser
ausgegeben. Das Ergebnis sollte etwa so aussehen:
Wenn nicht, holen Sie das jetzt nach!
332 Kapitel 8
Überlegungen zum Objektdesign
Moment mal … Wie können wir
denn das View-Objekt ohne
Benutzereingaben und den
ganzen Rest implementieren?
Das ist ja das Schöne an Objekten. Wir
können Objekte so gestalten, dass sie ihre Aufgabe
erfüllen, ohne dass wir uns über jedes Programmdetail
Sorgen machen müssen. In unserem Fall muss der View
nur wissen, wie der Nachrichtenbereich aktualisiert wird
und wie die Markierungen für Treffer und Fehlversuche
eingefügt werden. Wenn wir das Verhalten richtig
umgesetzt haben, ist das View-Objekt fertig, und wir
können uns dem übrigen Code zuwenden.
Dieser Ansatz hat noch einen weiteren Vorteil: Wir
können den View isoliert testen und sicherstellen, dass
er funktioniert. Wenn wir versuchen, alle Teile des
Programms auf einmal zu testen, steigen die Chancen,
dass irgendwo etwas schiefgeht und die Fehlersuche
deutlich schwerer ausfällt (da Sie viele Teil des Codes
untersuchen müssten, um das Problem zu finden).
Um ein einzelnes Objekt zu überprüfen, brauchen wir
etwas Testcode (weil das übrige Programm noch nicht
fertig ist), den wir später wieder verwerfen. Aber das ist
in Ordnung …
Lassen Sie uns den View fertigstellen, testen, und dann
mit dem Rest des Programms weitermachen!
Anhand des DOM das Element mit der ID »messageArea« finden.
Die
innerHTML-Eigenschaft des Elements mit der Nachricht füllen,
die der Methode displayMessage übergeben wurde.
displayMessage implementieren
Als Nächstes schreiben wir den Code für displayMessage. Er muss Folgendes können:
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
