CoffeeScript est une petite langue qui compile en JavaScript. Il n'y a pas d'interprétation lors de l'exécution depuis que vous écrivez CoffeeScript, le compile à JavaScript et utilisez les fichiers JavaScript résultants pour votre application. Vous pouvez utiliser n'importe quelle bibliothèque JavaScript (par exemple JQuery) à partir de CoffeeScript, simplement en utilisant ses fonctionnalités avec la syntaxe Coffeescript appropriée. CoffeeScript peut être utilisé à la fois pour écrire JavaScript sur le front-end et JavaScript sur le back-end.
Selon le petit livre sur CoffeeScript, la syntaxe de Coffeescript réduit la quantité de caractères que vous devez taper pour faire fonctionner votre JS d'environ 33% à 50%. Je présenterai un jeu Tic-Tac-Toe simple créé à l'aide de CoffeeScript (vous avez probablement déjà deviné cela à partir du titre) qui, dans son format Raw CoffeeScript, contient 4963 caractères, tandis que le code JavaScript compilé contient 7669 caractères. C'est une différence de 2706 caractères ou 36%!
Parce que vous écrivez plus court, moins sujet aux erreurs (par exemple, les variables sont automatiquement encapées, ce qui signifie que vous ne pouvez pas écraser accidentellement les globaux en omettant VAR), vous pouvez terminer vos projets plus rapidement. La syntaxe laconique de Coffeescript rend également un code plus lisible, et finalement le code qui est plus facile à entretenir.
Dans cet article, nous construisons un simple jeu Tic-Tac-Toe avec CoffeeScript et JQuery. Si vous voulez lire la syntaxe avant d'examiner un cas pratique, je suggère à mon accélération votre développement JavaScript avec CoffeeScript ici à SitePoint. Cela détaille également comment installer CoffeeScript via NPM (le gestionnaire de package de nœuds).
Comme jamais, tout le code de ce tutoriel est disponible sur github et une démo est disponible sur codepen ou à la fin du tutoriel.
Les commandes CoffeeScript les plus courantes que vous utiliserez sont:
Café -C Le nom de fichier compilera le fichier CoffeeScript dans un fichier avec le même nom mais avec une extension .js (les fichiers Coffeescript ont généralement une extension .Coffee).
Café -CW Le nom de fichier surveillera les modifications d'un fichier (chaque fois que vous enregistrez le fichier) et le compile.
Café -CW Foldername / Va surveiller les modifications de tous les fichiers .Coffee dans le dossier et les compiler dans le même répertoire lorsqu'il y a des modifications.
Enfin, il est pratique de compiler CoffeeScript à partir d'un dossier avec des fichiers .Coffee à un dossier contenant uniquement des fichiers .js.
Coffee -O JS / -CW / Coffee surveillera les modifications dans tous les fichiers .Coffee situés dans le dossier de café et placeront la sortie (JavaScript) dans le dossier JS.
Si vous n'êtes pas dans les terminaux, vous pouvez utiliser un outil avec une interface graphique pour gérer vos fichiers CoffeeScript. Par exemple, vous pouvez essayer Prepros sur un essai illimité gratuit (bien que vous deviez l'acheter si vous l'aimez). L'image ci-dessous montre certaines des options qu'il propose:
Vous pouvez voir que Prepros fait tout le travail pour vous - il configure les observateurs afin que vos fichiers .Coffee soient compilés en js, il vous permet d'utiliser UGLIFY JS qui divisera / compressera votre code, il peut automatiquement masquer les variables Et il prend en charge le coffrese de CoffeeScrip. Prepros peut également être utilisé pour les préprocesseurs CSS tels que moins et les moteurs Sass et Modèle comme Jade.
Commençons par le balisage:
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
L'interface du jeu comprend les éléments suivants:
conformément aux meilleures pratiques, jQuery et le script qui font cocher notre application sont chargés avant la balise du corps de clôture.
En utilisant CSS, nous pouvons faire apparaître les neuf carrés impliqués dans une grille 3 × 3 en flottant chaque carré et en nettoyant chaque 4ème.
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Nous pouvons également ajouter une couleur différente aux carrés selon qu'ils ont la classe X ou O (qui est ajouté en utilisant JavaScript).
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>Pour référence, vous pouvez trouver le fichier principal CoffeeScript ici.
Vous pouvez voir notre application tic-tac-TOE commence par $ ->, cela équivaut à la fonction de jQuery qui exécute le code lorsque le dom est prêt: $ (function () {...});.
CoffeeScript ne reposait pas sur les demi-colons et les accolades mais sur l'indentation. -> indique à CoffeeScript que vous définissez une fonction afin que vous puissiez démarrer le corps de la fonction sur la ligne suivante et mettre le corps avec deux espaces.
Ensuite, nous créons un objet appelé tic qui contient lui-même un objet appelé données. Vous pouvez voir que les accolades ou les virgules ne sont pas obligatoires lors de la création d'objets, tant que vous induisez correctement les propriétés.
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
La propriété Turns conservera le nombre total de tours pris dans le jeu. Nous pouvons vérifier s'il contient un nombre uniforme ou inégal et de cette manière déterminez s'il s'agit du tour de X ou O.
Les propriétés X et O sont des objets et contiendront des données relatives au nombre de X ou O sur les trois axes qui sont importants pour le jeu: horizontal, vertical et diagonal. Ils seront mis à jour sur chaque mouvement via la méthode Checkend pour représenter la distribution de X et O sur le tableau. La méthode Checkend appellera ensuite CheckWin pour déterminer s'il y a un gagnant.
Après cela, nous avons une méthode à l'intérieur de l'objet tic qui fera tout fonctionner:
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Remarquez l'utilisation de @ qui se compile au mot clé JavaScript. Comme illustré dans la première propriété de l'initialisation, vous pouvez sauter le point après le mot-clé @ lors de la définition ou de l'appel d'une propriété ou d'une méthode.
En donnant aux méthodes des noms raisonnables, nous avons une bonne idée de ce qu'ils font:
Regardons plus de ces méthodes plus en détail.
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>Ici, nous itons neuf fois et ajoutez neuf divs avec une classe de carré à la planche vide afin de le remplir. Cela montre comment CoffeeScript vous permet d'écrire des boucles à une ligne et de déclarer le corps de la boucle avant d'écrire la condition elle-même.
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>CoffeeScript permet une interpolation de chaîne qui augmente la lisibilité et réduit la complexité et la longueur du code. Vous pouvez ajouter un # {} dans n'importe quelle chaîne et insérer n'importe quelle variable ou une valeur de retour à partir d'un appel de fonction dans les accolades.
<span>initialize: -> </span> @data<span>.gameOver = false </span> @<span>.setPlayerNames() </span> @<span>.retrieveStats() </span> @<span>.assignRoles() </span> @<span>.prepareBoard() </span> @<span>.updateNotifications() </span> @<span>.addListeners()</span>
La méthode d'addnotification illustre la façon dont vous définissez les paramètres dans CoffeeScript. Vous les écrivez avant la flèche (->):
Vous pouvez fournir des valeurs par défaut pour les paramètres similaires à PHP:
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
Lorsqu'une fonction avec un paramètre par défaut est compilée, elle est convertie en:
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Enfin, tournons-nous vers la méthode AddListeners:
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>Nous voyons ici que CoffeeScript offre des mots clés supplémentaires pour représenter les valeurs de vérité et de fausseté telles que non, oui, hors de temps en temps. De plus,! ==, ===, && ,! Peut être représenté en utilisant IST, IS, et et non en conséquence.
Vous pouvez faire des conditions lisibles à une seule ligne en utilisant si ... alors ... else ... Syntaxe.
La méthode de Workhorse Checkend vérifie s'il y a un gagnant chaque fois qu'un joueur fait un pas. Il le fait en itérant sur la planche et en comptant les carrés qui appartiennent à X et O. Il vérifie d'abord les axes diagonaux, puis la verticale, puis l'horizontal.
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>Comme vous pouvez le voir, cela utilise une autre fonctionnalité de coffrees à portée de coffre - Ranges.
<span>initialize: -> </span> @data<span>.gameOver = false </span> @<span>.setPlayerNames() </span> @<span>.retrieveStats() </span> @<span>.assignRoles() </span> @<span>.prepareBoard() </span> @<span>.updateNotifications() </span> @<span>.addListeners()</span>
Cela bouclera trois fois, réglant la ligne égale à 0, 1 et 2 dans cet ordre. Alternativement, [0 ... 2] (une plage exclusive) entraînerait seulement deux itérations, définissant une ligne égale à 0 et 1.
Dans la vérification horizontale, nous voyons à nouveau comment l'indentation est cruciale pour déterminer ce qui fait partie de la boucle et ce qui est en dehors de la boucle - seulement l'appel de chèque est à l'intérieur de la boucle intérieure.
voici à quoi ressemble Checkfield:
<span>prepareBoard: ->
</span> <span>...
</span> <span>$("<div>", {class: "square"}).appendTo("#board") for square in [0..8]</span>Cette méthode démontre l'utilisation du? Mot-clé, qui lorsqu'il est inséré à côté d'une variable dans un conditionnel, compile à:
<span>updateNotifications: ->
</span> <span>$(".notifications").empty().show()
</span> @<span>.addNotification "#{@data.player1} is playing #{@data.rolep1}"
</span> <span>...</span>qui est évidemment assez pratique.
Ce que fait la méthode CheckField, c'est ajouter un à l'axe approprié de la propriété X ou O en fonction du nom de classe du carré qui a été cliqué. Le nom de classe est ajouté lorsqu'un utilisateur clique sur un carré de carte vide dans la méthode AddListeners.
Cela nous amène à la méthode Checkwin, qui est utilisée pour vérifier si l'un des joueurs a gagné le jeu:
<span>addNotification: (msg) ->
</span> <span>$(".notifications").append($("<p>", text: msg));</span>Dans CoffeeScript, vous pouvez utiliser pour ... dans le tableau pour boucler sur les valeurs du tableau et pour la clé, la valeur de l'objet à boucler sur les propriétés d'un objet. CheckWin utilise ceci pour vérifier toutes les propriétés à l'intérieur des objets X et O. Si l'un d'eux détient un nombre supérieur ou égal à trois, alors nous avons un gagnant et le jeu devrait se terminer. Dans un tel cas, nous appelons la méthode AddToscore qui persiste les résultats des joueurs via LocalStorage.
LocalStorage fait partie des spécifications de stockage Web et a une assez bonne prise en charge du navigateur. Il vous permet de stocker des données (similaires aux cookies) sur la machine de l'utilisateur et d'y accéder quand vous le souhaitez.
Vous pouvez accéder à l'API de plusieurs manières, par exemple comme vous le feriez aux propriétés d'un objet ordinaire:
<span>addNotification: (msg = "I am a message") -></span>
Le stockage local enregistre toujours des chaînes, donc si vous souhaitez stocker un objet ou un tableau, vous auriez à utiliser JSON.Strification lors du stockage du tableau / objet et JSON.Parse lors de la récupération.
Notre méthode AddToscore utilise ce fait:
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
Il montre également comment vous pouvez omettre les parenthèses dans CoffeeScript (JSON.Strifify), bien que cela soit recommandé pour les appels de fonction les plus extérieurs.
Ensuite, nous avons quelques méthodes d'utilité. Nous utilisons videstoragevar pour effacer le contenu d'une ligne ou d'une diagonale horizontale particulière. Ceci est nécessaire car il y a deux diagonales sur le tableau et à l'intérieur de notre méthode Chekend, nous utilisons la même propriété de données pour les deux diagonales. Par conséquent, nous devons effacer la propriété avant de vérifier la deuxième diagonale. Il en va de même pour les rangées horizontales.
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Lorsque le formulaire avec les noms des joueurs est soumis au début d'un jeu, nous pouvons empêcher son action par défaut et gérer la soumission à l'aide de JavaScript. Nous vérifions s'il y a un nom vide ou si les deux noms sont les mêmes et affichent une alerte amicale si c'est le cas. Sinon, nous commençons le jeu en appelant Tic.Initialize ().
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>La ligne finale utilise la délégation d'événements pour avoir n'importe quel élément avec la classe Play-Again répond à un clic. La délégation d'événements est nécessaire, car cet élément n'est ajouté qu'à une page une fois le jeu terminé. Il n'est pas présent lorsque le DOM est rendu pour la première fois.
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>Et c'est tout. Dans moins de 150 lignes de coffreescript, nous avons un jeu de travail. N'oubliez pas, vous pouvez télécharger le code à partir de ce tutoriel à partir de GitHub.
Voir le stylo-tac-toe par SitePoint (@SitePoint) sur Codepen.
J'espère que ce tutoriel a solidifié vos connaissances sur CoffeeScript et vous a montré comment JQuery et CoffeeScript peuvent fonctionner ensemble. Il y a beaucoup de choses que vous pouvez faire pour améliorer le jeu. Par exemple, vous pouvez ajouter une option pour rendre la carte différente de ses dimensions 3 × 3 standard. Vous pouvez implémenter une IA simple afin que les joueurs puissent jouer contre la machine, ou vous pouvez implémenter des bombes dans le jeu, par exemple En ajoutant un X ou O aléatoire sur un mouvement de jeu aléatoire pendant que les joueurs se battent pour la gloire.
Pour commencer par CoffeeScript pour créer un jeu Tic Tac Toe, vous devez d'abord avoir une compréhension de base de CoffeeScript. CoffeeScript est un petit langage qui se compile en JavaScript. Il offre une meilleure syntaxe en évitant les parties originales de JavaScript, conservant toujours la flexibilité et la beauté de la langue. Vous pouvez commencer par apprendre les bases de CoffeeScript à partir du site officiel ou d'autres ressources en ligne. Une fois que vous avez une compréhension de base, vous pouvez commencer à coder votre jeu Tic Tac Toe. Vous pouvez utiliser n'importe quel éditeur de texte pour écrire votre code, puis le compiler dans JavaScript à l'aide du compilateur CoffeeScript.
Les composants de base d'un jeu Tic Tac Toe dans CoffeeScript est similaire à tout autre langage de programmation. Ils incluent le plateau de jeu, les joueurs et la logique du jeu. Le plateau de jeu est une grille 3 × 3 où les joueurs placent leurs marques. Les joueurs sont généralement deux et ils se relaient pour placer leurs notes sur le plateau de jeu. La logique du jeu comprend les règles du jeu, comme la façon dont un joueur gagne, que se passe-t-il lorsque le jeu est un tirage, etc.
Comment puis-je gérer les mouvements des joueurs dans CoffeeScript?
Comment puis-je vérifier si un joueur a gagné le jeu dans CoffeeScript?
Comment puis-je gérer un match nul dans CoffeeScript?
La compilation de votre code CoffeeScript en JavaScript peut être effectuée en utilisant le compilateur CoffeeScript. Vous pouvez installer le compilateur à l'aide de NPM, le gestionnaire de package Node.js. Une fois installé, vous pouvez compiler votre code CoffeeScript dans JavaScript en utilisant la commande de café suivie de l'option -c et du nom de votre fichier CoffeeScript.
Oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui Vous pouvez utiliser jQuery avec CoffeeScript. CoffeeScript se compile en JavaScript, vous pouvez donc utiliser n'importe quelle bibliothèque JavaScript avec, y compris jQuery. Vous pouvez utiliser jQuery pour manipuler le DOM, gérer les événements, créer des animations et plus encore.
Le débogage de votre code CoffeeScript peut être fait en utilisant les mêmes outils que vous que vous Utiliser pour déboguer JavaScript. La plupart des navigateurs modernes sont livrés avec des outils de développeur intégrés qui incluent un débogueur JavaScript. Vous pouvez utiliser ce débogueur pour parcourir votre code, inspecter les variables, etc. Notez que vous déboguerez le code JavaScript compilé, pas le code CoffeeScript original.
Vous pouvez en savoir plus sur CoffeeScript sur le site officiel, qui comprend Un guide détaillé, une référence à la syntaxe linguistique et des exemples. Il existe également de nombreux tutoriels et cours en ligne disponibles sur des sites Web comme CodeCademy, Udemy et Coursera. De plus, vous pouvez trouver de nombreux projets CoffeeScript open source sur GitHub pour apprendre du code du monde réel.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Introduction aux fournisseurs de services proposant des prix de serveur cloud rentables
Le nom du fichier contient du contenu illégal
Antivirus pour téléphone portable Apple
Introduction aux balises standards en php
Quels sont les logiciels de dessin ?
WeChat Moments, deux tirets et un point
Comment modifier par lots les noms de fichiers
Comment définir le chinois dans Eclipse
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
