Wir haben bisher ziemlich gute Arbeit geleistet, um uns zu organisieren. Es war ein großer Schritt, unseren HTML-Code in eine Vorlage zu integrieren. Wir trüben sozusagen länger das Wasser. Unsere verschiedenen Funktionen in JavaScript sind in diskrete Abschnitte unterteilt, um das Verständnis und die Wartung zu vereinfachen. Ich weiß, dass wir mit einer ziemlich kleinen Demo gearbeitet haben, aber ich hoffe, Sie können sich vorstellen, wie diese Organisation unglaublich wertvoll ist, wenn eine App komplizierter und mehr Codezeilen wird.
JavaScript hat sozusagen 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 auch wahrscheinlich der Grund, warum manche Leute sich wirklich an Frameworks klammern, die, ob sie eine Meinung haben oder nicht, eine Organisationsstruktur bieten. Zum Beispiel Backbone. Aber das ist eine andere Serie!
Für unsere Demo organisieren wir einfach ein Objekt, das wir einfach erstellen.
var Movies = ( )Alles, was wir hier tun, hängt damit zusammen, dass einige Filme auf die Seite gebracht werden. Wir werden sie also in einem „Ding“ namens Filme enthalten. Denken Sie daran, dass wir nur das tun, was für uns organisatorisch sinnvoll ist. Dies hat den Vorteil, dass nur eine Variable ebenfalls in den „globalen Bereich“ aufgenommen wird. Wenn wir alles auf globaler Ebene tun würden, wäre dies ein Durcheinander versehentlich überschriebener Variablen (und Funktionen und was auch immer), die an anderer Stelle deklariert wurden.
Ein solches Objekt „tut“ jedoch eigentlich nichts. Wir müssen „loslegen“.
var Movies = ( init: function() ( ) ) Movies.init();Eine Funktion namens init ist ein Standard, der es jedem, der diesen Code liest, ermöglicht zu wissen, dass der darin enthaltene Code genau das ist, was ausgeführt wird, wenn diese Codegruppe ausgeführt wird. Das sollte ein bisschen wie ein Inhaltsverzeichnis darüber lesen, was mit dieser Codegruppe passiert. Wir machen dann andere Funktionen (mehr Eigenschaften des Movies-Objekts), die Dinge tun, die wir tun müssen, in diskreten Blöcken. Denken Sie daran, wir können Dinge nennen, wie wir wollen, was 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 werden vielleicht bemerken appendMovesToPage, dass in der nicht aufgerufen wird init. Das liegt daran, dass wir das erst aufrufen können, wenn wir Daten zum Senden haben. Diese Daten stammen aus einem Ajax-Anruf, was bedeutet, dass wir einen Rückruf benötigen. Also getDatawerde ich das am Ende nennen.
Alles andere, was hier ausgefüllt wird, ist nur das Verschieben von Codebits, die wir bereits geschrieben haben, an die richtige Stelle.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), 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 skizziert haben, und sehen wir, was wir dagegen unternommen haben.
- Daten abrufen. Wir haben den JSON in eine Datei verschoben, mit der wir arbeiten könnten
$.getJSON, da dies in einer realen Situation wahrscheinlich erforderlich ist. Abgesehen davon, dass wir das nur üben, können wir damit Tests schreiben. - Logik anzeigen. Wir haben jetzt eine sehr spezielle Funktion appendMoviesToPage, die aufgerufen wird, wenn wir bereit sind, unsere Filme an die Seite anzuhängen. Einzweckfunktionen eignen sich hervorragend für (wieder) Organisation, Verständlichkeit und Wartbarkeit.
- Handhabung des Events. Mit der Ereignisdelegierung mischen wir diese „Geschäftslogik“ nicht mehr mit der Anzeigelogik oder Vorlage. Wir müssen uns nicht einmal um die Ausführung der Quellreihenfolge kümmern, da wir die Ereignisse letztendlich an die anhängen
document. Unsere Funktionalität funktioniert unabhängig davon, wann / wie die Vorlage an die Seite angehängt wird. - Vorlagen. Völlig bewegt, um Bibliotheken zu verwenden, die speziell für Vorlagen gedacht sind.
Ich würde das Sieg nennen. Hier sind wir gelandet:
Siehe den Pen BwbhI von Chris Coyier (@chriscoyier) auf CodePen