Résumé des façons d'utiliser les compétences coffeescript_javascript

En tant que frère cadet discret de Javascript, Coffeescript est vraiment exceptionnel. Son utilisation peut améliorer l'efficacité du développement, réduire les erreurs de code et la clé est d'améliorer considérablement le plaisir du développement. De plus en plus, je pense que je devrais utiliser le café dans mes projets autant que possible.

Cependant, peut-être êtes-vous comme moi. Après avoir compris la syntaxe de coffeescript et vous être préparé à l'essayer, vous vous demandez comment l'introduire dans le projet.

Maîtrisez votre code comme un patron

CoffeeScript fournit un tas de méthodes d'itération de tableau intéressantes. La meilleure chose est que cela fonctionne non seulement avec les tableaux, mais aussi avec les objets jQuery. Écrivons du code poétique :

formValues = (elem.value for elem in $('.input')) 

Cette ligne de code sera traduite dans le Javascript suivant :

var elem, formValues; 
formValues = (function() { 
 var _i, _len, _ref, _results; 
 _ref = $('.input'); 
 _results = []; 
 for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
  elem = _ref[_i]; 
  _results.push(elem.value); 
 } 
 return _results; 
})(); 

Pour être honnête, écrire du code comme celui-ci est vraiment effrayant au début, mais une fois que vous aurez commencé à profiter de la magie de CoffeeScript, vous en tomberez amoureux.

Reliure selon les méthodes normales

L'utilisation de "="" dans le rappel de jQuery vous évitera grandement d'avoir à lier manuellement les méthodes aux objets. Jetons un coup d'œil à du code :

object = 
 func: -> $('#div').click => @element.css color: 'red' 

Ce qui suit est la sortie Javascript compilée :

var object; 
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 
object = { 
 func: function() { 
  return $('#div').click(__bind(function() { 
   return this.element.css({ 
    color: 'red' 
   }); 
  }, this)); 
 } 
}; 

Le @element dans le code pointe vers un objet jQuery spécifié ailleurs, tel que object.element = $('#some_div').

Toute fonction de rappel spécifiée à l'aide de "=>" sera automatiquement liée à l'objet d'origine, et oui, c'est cool.

C'est ainsi que la fonction était appelée en 2011

Jetez un œil à ceci :

$.post( 
 "/posts/update_title" 
 new_title: input.val() 
 id: something 
 -> alert('done') 
 'json' 
) 

En utilisant CoffeeScript, plusieurs paramètres peuvent être écrits sur plusieurs lignes à appeler. Les virgules et les accolades sont facultatives, ce qui rend certaines méthodes avec des signatures plus longues dans jQuery telles que $.post() et $.animate() plus faciles à lire. Voici un autre exemple :

$('#thing').animate 
 width: '+20px' 
 opacity: '0.5' 
 2000 
 'easeOutQuad' 

Un délicieux café, n'est-ce pas ? Notez que le premier paramètre est un objet anonyme, vous pouvez même omettre les méta-crochets dans l'appel de fonction.

Rendre l'initialisation plus sexy

Quand j'ai commencé à utiliser jQuery, j'ai initialisé la page comme ceci :

$(document).ready(function() { 
 some(); 
 init(); 
 calls(); 
}) 

CoffeeScript et la nouvelle version de jQuery font évoluer le code ci-dessus de manière si sexy :

$-> 
 some() 
 init() 
 calls() 

La syntaxe de définition de fonction dans CoffeeScript est déjà très cool, et pouvoir l'utiliser dans ces situations la rend encore plus cool. Vous constaterez que tous les appels de fonction nécessitant des rappels sont si simples dans CoffeeScript.

En fait, coffeescript est un langage très flexible à utiliser car il peut être traduit en JavaScript individuellement. Il existe également plusieurs façons de l’introduire dans un projet. Ici, je vais d'abord résumer les façons d'introduire coffeescript dans les projets de nœuds et comparer les avantages et les inconvénients de chaque méthode.

Utilisez directement la commande coffee pour exécuter des projets purement coffeescript

De manière générale, lorsqu'on évoque coffeescript, on le considérera naturellement comme le petit frère du javascript, qui ne pourra jamais échapper à l'ombre de js. En fait, vous pouvez le considérer comme un langage indépendant. Nous savons tous qu'après avoir installé le package coffee-script globalement sur la plate-forme de nœuds, vous pouvez accéder à l'interface interactive coffeescript via la commande coffee. Vous pouvez également l'appeler repl. Si votre projet est entièrement écrit en coffee, c'est simple. Utilisez simplement la commande coffee directement sur votre script d'entrée. Par exemple, si votre script d'entrée s'appelle "app.coffee", alors exécutez :

.

coffee app.coffee

注意，这里的扩展名coffee是不能省略的。

这个方式应该说是使用coffeescript最“官方”的方式。简单，直接！而且，一旦你以一个coffee文件作为项目的入口， 那整个项目就同时兼容coffee和js了。你在项目里可以任意require js或coffee文件及模块， 甚至可以在项目中的js文件中随便require coffee文件。并且在你引用无论是coffee还是js文件的时候都无需扩展名， 只要前面部分名称不冲突就行。

这个方式有个最大的问题就是，如果它作为一个模块，只能被用于coffee项目；如果他作为一个应用， 运行环境必须安装coffee-script。毕竟coffeescript现在还是一个小众语言，它作为模块时丧失了js用户实在可惜。

另一个也许存在的缺点是性能方面的，毕竟node里面只有js引擎，coffee代码需要先编译为js再运行， 这个过程是要消耗一点点时间的，尽管coffee到js的编译速度其实挺快的。不过这应该不是什么大问题， 一般来说，require都是写在文件的顶部，也就是应用在启动的时候就一气儿把该require的文件都require了， require的时候coffee就被编译成了js放到了js引擎中，那么编译消耗的那点时间都集中在了应用启动时， 运行时几乎不会遇到require新的coffee的情况了。node最常见的使用场景是web服务器，这就更没问题了。

在javascript项目中引用coffeescript

npm中的coffee-script既可以全局安装，也可以作为项目的一个模块安装。那coffee-script作为项目的一个模块有啥意义呢？ 其实是给项目添加了一个coffeescript的编译器，这个项目就可以在运行时随时编译coffee文件。

你一定希望像第一种方式里那样随便引用coffee文件。没问题，只需要注册一下。假如你的项目入口文件是app.js， 那么只需要在这个文件最前面加上这么一句：

require('coffee-script/register');

然后你就可以在项目中随便require coffee文件了。

这个方式本质上和第一种方式没啥区别，只不过coffee-script没安装在全局，因此你的模块可以独立存在， 作为应用也不需要环境安装好coffee-script了。

缺点嘛，我觉得最大的问题就是容易让代码有些乱，一会儿js，一会儿coffee，当然第一种方式也可能会这样， 不过都用coffee启动了里面应该不会写js了吧……总之我觉得一个项目还是把语言统一起来比较好 （遗憾的是我主要用这种方式，在一个已经用js写出了大体结构的项目里，我就想用coffee肿么办……）

性能问题上跟第一种方式一样，不多说了。

正统的方式——编译

一说编译，就感觉回到了正儿八经的C或Java的时代。的确，作为一个编译型语言，编译后再运行才是正道。 c有gcc，java有javac，cofee有coffee -c。

要编译一个cofee文件很简单，比如要编辑app.coffee这个文件，就在文件的当前目录执行：

coffee -c app.coffee

一个名为app.js的文件就出现在当前目录下了。这个指令也可以应用于目录， 比如你把项目中所有的coffee源文件放到了src目录下，那就执行：

coffee -c src

src目录及其各级子目录下的所有coffee源文件都会编译成js文件，放到和源文件相同的目录中。

不过对于大型项目，把源文件和编译结果文件放到一起可不太好。指定一个输出目录就行了：

coffee -c -o outputs src

这个指令的参数顺序有点奇怪。在coffee的帮助里是这么定义的：

coffee [options] path/to/script.coffee -- [args]

注意，所有的选项（options）都在coffee和文件路径之间。而最后的args是把目标文件作为脚本执行时给传递的参数。 也就是说所有的选项都放在coffee和文件名之间就可以了。 而-c这个选项是单独的，没有自己的参数，它只表示要把指令最后面提供的那个文件给编译了，所以写成这样也行：

coffee -o outputs -c src

假如想再加个选项，让编译结果不被自执行函数体包围，就是：

coffee -o outputs -c -b src

再假如想把所有源文件编译成一个名为out.js的目标文件，就是：

coffee -o outputs -c -j out src

如果每次改点代码都要这么执行指令也挺烦人的。coffee指令有一个选项-w可以监视源文件的变动而自动编译：

coffee -o outputs -c -w src

Pour les projets à grande échelle, il est préférable de déterminer la méthode de compilation à l'avance afin que tous les développeurs puissent terminer toutes les questions de compilation avec une seule instruction. Cela nécessite une construction automatisée.

offee fournit un outil de construction automatisé, cake, qui ressemble à make in the c world. Mais comme indiqué sur le site officiel, Cake est un système de construction très simple. En fait, la fonction de cake est d'exécuter un script nommé cakefile, et le script cakefile est écrit en coffeescript. Ce script ne fournit que des fonctions intégrées très limitées, telles que la tâche, qui sont utilisées pour déclarer une instruction et ses fonctions de description et d'exécution correspondantes. L'autre chose est d'écrire un projet de nœud pur. Pour terminer la compilation, vous devez soit utiliser le module fs de node pour afficher la chaîne compilée par le module coffee, soit utiliser le module child_process pour exécuter les instructions du shell. En fait, la cible de la construction du gâteau ne doit pas nécessairement être le café, car il exécute en fait un script de nœud et peut gérer toutes les tâches automatisées.

De plus, il existe de meilleurs outils de construction automatisés tiers qui peuvent également compléter la compilation automatique du café, comme le célèbre Grunt, le fekit domestique, etc.

Cette méthode de compilation orthodoxe est peut-être la plus fiable et devrait être appréciée par les programmeurs expérimentés. Cela permet à l’équipe de former un modèle de développement fixe. De plus, le projet compilé devient un pur projet js, et aucune dépendance supplémentaire n'est requise, qu'il soit exécuté directement en tant qu'application ou référencé par d'autres projets en tant que module. Et il n'est pas nécessaire de compiler au moment de l'exécution, il n'y a donc aucun problème de performances causé par la compilation.

L'inconvénient est que c'est trop gênant. Si vous faites un petit projet, il faudra une demi-journée rien que pour créer le cakefile ou configurer grognement, ce qui n'en vaut pas la peine.

Grâce à l'introduction de coffeescript dans jQuery, node.js et javascript, avez-vous acquis une nouvelle compréhension de coffeescript ?