Jusqu'à présent, nous avons fait du bon travail pour nous organiser. La décomposition de notre HTML dans un modèle a été un grand pas en avant. Nous sommes plus brouiller les eaux pour ainsi dire. Nos différents éléments fonctionnels de JavaScript sont divisés en sections discrètes, ce qui facilite la compréhension et la maintenance. Je sais que nous avons travaillé avec une petite démo, mais j'espère que vous pouvez imaginer comment une application devient plus compliquée et plus de lignes de code, cette organisation est incroyablement précieuse.
JavaScript n'a aucune "opinion" pour ainsi dire sur l'organisation. C'est probablement pourquoi certaines personnes l'adorent et certaines personnes se sentent perdues. La façon dont vous choisissez de l'organiser dépend entièrement de vous. C'est aussi probablement la raison pour laquelle certaines personnes s'accrochent vraiment à des cadres qui, avisés ou non, fournissent une structure organisationnelle. Par exemple, Backbone. Mais c'est une autre série!
Pour notre démo, nous allons simplement nous organiser autour d'un objet que nous créons simplement.
var Movies = ( )Tout ce que nous faisons ici est lié à l'ajout de films sur la page, nous allons donc les contenir dans une seule «chose» appelée Films. N'oubliez pas que nous faisons tout ce qui a du sens pour nous au niveau de l'organisation. Cela a l'avantage de ne placer qu'une seule variable dans la «portée globale» également. Si nous faisions tout à la portée globale, ce serait un désordre de variables (et de fonctions et autres) qui se substituent accidentellement ailleurs.
Cependant, un objet comme celui-là ne «fait» rien. Nous devrons «lancer».
var Movies = ( init: function() ( ) ) Movies.init();Avoir une fonction nommée init est un peu un standard qui permet à quiconque lit ce code de savoir que le code qu'il contient est ce qui s'exécute lorsque ce groupe de code est exécuté. Cela devrait se lire un peu comme une table des matières de ce qui se passe avec ce groupe de code. Nous créons ensuite d'autres fonctions (plus de propriétés de l'objet Movies) qui font les choses que nous devons faire, par blocs discrets. Rappelez-vous que nous pouvons appeler des choses comme nous voulons, tout ce qui nous semble logique.
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();Assez clair hein? Vous remarquerez peut-être qu'il appendMovesToPagen'est pas appelé dans le init. C'est parce que nous ne pouvons pas appeler cela tant que nous n'avons pas de données pour l'envoyer. Ces données proviendront d'un appel Ajax, ce qui signifie que nous avons besoin d'un rappel. Alors getDatafinira par appeler celui-là.
Tout le reste qui remplira ici est juste de déplacer des morceaux de code que nous avons déjà écrits au bon endroit.
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();
Et.. Voila.
Examinons les quatre préoccupations que nous avons évoquées plus tôt et voyons ce que nous avons fait à leur sujet.
- Obtenir les données. Nous avons déplacé le JSON dans un fichier avec lequel nous pourrions frapper
$.getJSON, car il est probable que nous aurions besoin de le faire dans une situation réelle. En dehors de la simple pratique, cela nous permettra d'écrire des tests autour de cela. - Afficher la logique. Nous avons maintenant une fonction très spécifique appendMoviesToPage qui est appelée lorsque nous sommes prêts à ajouter nos films à la page. Les fonctions à usage unique sont excellentes pour (encore) l'organisation, la compréhensibilité et la maintenabilité.
- Gestion des événements. En utilisant la délégation d'événements, nous ne mélangons plus cette «logique métier» avec la logique d'affichage ou le modèle. Nous n'avons même pas à nous soucier de l'exécution de l'ordre source, car nous attachons finalement les événements au
document. Notre fonctionnalité fonctionnera peu importe quand et comment le modèle est ajouté à la page. - Templating. Totalement déplacé pour utiliser des bibliothèques destinées spécifiquement à la création de modèles.
J'appellerais ça une victoire. Voici où nous nous sommes retrouvés:
Voir le Pen BwbhI de Chris Coyier (@chriscoyier) sur CodePen