#25: Ordnung schaffen!

Wir haben bisher ziemlich gute Arbeit geleistet, um Ordnung zu schaffen. Die Aufteilung unseres HTML in eine Vorlage war ein großer Schritt. Wir verwässern die Dinge nicht mehr, um es so auszudrücken. Unsere verschiedenen Funktionalitäten in JavaScript sind in diskrete Abschnitte unterteilt, was die Dinge leichter verständlich und wartbar macht. Ich weiß, dass wir mit einer ziemlich kleinen Demo gearbeitet haben, aber ich hoffe, Sie können sich vorstellen, wie wertvoll diese Organisation ist, wenn eine App komplizierter wird und mehr Codezeilen hat.

JavaScript hat im Grunde keine „Meinung“ zur Organisation. Das ist wahrscheinlich der Grund, warum manche Leute es lieben und manche sich darin verloren fühlen. Wie Sie es organisieren, liegt ganz bei Ihnen. Das ist wahrscheinlich auch der Grund, warum sich manche Leute wirklich an Frameworks halten, die, ob meinungsbildend oder nicht, eine Organisationsstruktur bieten. Zum Beispiel Backbone. Aber das ist eine andere Serie!

Für unsere Demo werden wir uns einfach um ein Objekt organisieren, das wir einfach erstellen.

var Movies = {

}

Alles, was wir hier tun, hängt damit zusammen, einige Filme auf der Seite anzuzeigen, also werden wir es in einer „Sache“ namens Movies zusammenfassen. Denken Sie daran, wir tun einfach, was uns organisatorisch sinnvoll erscheint. Dies hat auch den Vorteil, dass nur eine Variable in den „globalen Gültigkeitsbereich“ eingefügt wird. Wenn wir alles im globalen Gültigkeitsbereich tun würden, wäre es ein Durcheinander aus versehentlich überschriebenen Variablen (und Funktionen und was auch immer) an anderer Stelle deklariert.

Ein solches Objekt „tut“ jedoch nichts. Wir müssen es „starten“.

var Movies = {

  init: function() {

  }

}

Movies.init();

Eine Funktion namens init zu haben, ist eine Art Standard, der es jedem, der diesen Code liest, ermöglicht zu wissen, dass der darin enthaltene Code ausgeführt wird, wenn diese Code-Gruppe ausgeführt wird. Das sollte sich ein wenig wie ein Inhaltsverzeichnis lesen, was mit dieser Code-Gruppe passiert. Dann erstellen wir andere Funktionen (weitere Eigenschaften des Movies-Objekts), die Dinge tun, die wir tun müssen, in diskreten Blöcken. Denken Sie daran, wir können die Dinge nennen, wie wir wollen, was auch immer für uns Sinn macht.

var Movies = {
 
  init: function() {
    this.setUpTemplate();
    this.getData();
    this.bindUIActions();
  },
  
  setUpTemplate: function() {
    // Templating here
  },
  
  getData: function() {
    // Data getting here 
  },
  
  appendMoviesToPage: function(data) {
    // Display logic here
  },
  
  bindUIActions: function() {
    // Event delegating binding here.
  }
  
}

Movies.init();

Ziemlich klar, oder? Sie bemerken vielleicht, dass appendMovesToPage nicht in init aufgerufen wird. Das liegt daran, dass wir diese erst aufrufen können, wenn wir Daten zum Senden haben. Diese Daten stammen aus einem Ajax-Aufruf, was bedeutet, dass wir einen Callback benötigen. getData wird also letztendlich diesen aufrufen.

Alles andere, was hier eingefügt wird, ist nur das Verschieben von Codeteilen, die wir bereits geschrieben haben, an die richtige Stelle.

var Movies = {
 
  init: function() {
    this.setUpTemplate();
    this.getData();
    this.bindUIActions();
  },
  
  setUpTemplate: function() {
    Movies.compiled = _.template(
      "<div class='module module-movie' style='background-image: url(<%= movieImage %>)'>" + 
        "<div class='movie-info'>" +
          "<h3 class='movie-title'>" +
             "<%= movieTitle %>" + 
          "</h3>" +
          "<p class='movie-director'>" + 
             "<%= movieDirector %>" + 
          "</p>" + 
        "</div>" + 
      "</div>"
    );
  },
  
  getData: function() {
    $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) {
       Movies.appendMoviesToPage(data);
    }); 
  },
  
  appendMoviesToPage: function(data) {
    var i, html = "";
    for (i = 0; i < data.movies.length; i++) {
      html += Movies.compiled(data.movies[i]);
    }  
    $("#movies").append(html);
  },
  
  bindUIActions: function() {
    $(document).on("click", ".module-movie", function() {
      alert("movie added");
    });
  }
  
}

Movies.init();

Und fertig.

Schauen wir uns die vier Bedenken an, die wir zuvor aufgeführt haben, und sehen wir, was wir damit gemacht haben.

1. Daten abrufen. Wir haben das JSON in eine Datei verschoben, auf die wir mit $.getJSON zugreifen konnten, da dies wahrscheinlich in einer realen Situation erforderlich wäre. Abgesehen von der Übung wird uns dies ermöglichen, Tests dafür zu schreiben.
2. Anzeigelogik. Wir haben jetzt eine sehr spezifische Funktion appendMoviesToPage, die aufgerufen wird, wenn wir bereit sind, unsere Filme auf der Seite anzuzeigen. Funktionen mit einem einzigen Zweck sind großartig für (wieder) Organisation, Verständlichkeit und Wartbarkeit.
3. Ereignisbehandlung. Durch die Verwendung von Delegationsereignissen mischen wir diese „Geschäftslogik“ nicht mehr mit der Anzeigelogik oder der Vorlage. Wir müssen uns nicht einmal um die Ausführungsreihenfolge kümmern, da wir die Ereignisse letztendlich an das document anhängen. Unsere Funktionalität funktioniert, egal wann/wie die Vorlage an die Seite angehängt wird.
4. Templating. Komplett auf Bibliotheken umgestellt, die speziell für Templating gedacht sind.

Ich nenne das einen Gewinn. Hier sind wir gelandet

Siehe den Pen BwbhI von Chris Coyier (@chriscoyier) auf CodePen