Zusammenfassung der Möglichkeiten zur Verwendung von Coffeescript_Javascript-Fähigkeiten-js-Tutorial-php.cn

Coffeescript ist der zurückhaltende jüngere Bruder von Javascript und kann durch seine Verwendung die Entwicklungseffizienz verbessern, Codefehler reduzieren und den Spaß an der Entwicklung erheblich steigern. Ich habe immer mehr das Gefühl, dass ich in meinen Projekten wann immer möglich Kaffee verwenden sollte.

Aber vielleicht geht es Ihnen wie mir, nachdem Sie die Syntax von Coffeescript verstanden und sich darauf vorbereitet haben, es auszuprobieren, machen Sie sich Sorgen darüber, wie Sie es in das Projekt einführen können.

Beherrsche deinen Code wie ein Boss

CoffeeScript bietet eine Reihe cooler Array-Iterationsmethoden. Das Beste daran ist, dass dies nicht nur mit Arrays funktioniert, sondern auch mit jQuery-Objekten. Schreiben wir einen poetischen Code:

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

Nach dem Login kopieren

Diese Codezeile wird in das folgende Javascript übersetzt:

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; 
})();

Nach dem Login kopieren

Um ehrlich zu sein, ist das Schreiben von Code wie diesem zunächst wirklich beängstigend, aber wenn Sie erst einmal anfangen, die Magie von CoffeeScript zu nutzen, werden Sie sich darin verlieben.

Bindung mit normalen Methoden

Die Verwendung von „="“ im jQuery-Rückruf erspart Ihnen die Mühe, Methoden manuell an Objekte zu binden, erheblich. Werfen wir einen Blick auf den Code:

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

Nach dem Login kopieren

Das Folgende ist die kompilierte Javascript-Ausgabe:

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)); 
 } 
};

Nach dem Login kopieren

Das @element im Code verweist auf ein jQuery-Objekt, das an anderer Stelle angegeben ist – beispielsweise object.element = $('#some_div').

Jede mit „=>“ angegebene Rückruffunktion wird automatisch an das Originalobjekt gebunden, und ja, das ist cool.

So wurde die Funktion 2011 aufgerufen

Schauen Sie sich das an:

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

Nach dem Login kopieren

Mit CoffeeScript können mehrere Parameter zum Aufrufen in mehrere Zeilen geschrieben werden. Kommas und geschweifte Klammern sind optional, was die Lesbarkeit einiger Methoden mit längeren Signaturen in jQuery wie $.post() und $.animate() erleichtert. Hier ist ein weiteres Beispiel:

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

Nach dem Login kopieren

Köstlicher Kaffee, nicht wahr? Beachten Sie, dass der erste Parameter ein anonymes Objekt ist. Sie können die Metaklammern im Funktionsaufruf sogar weglassen.

Machen Sie die Initialisierung attraktiver

Als ich jQuery zum ersten Mal verwendete, habe ich die Seite wie folgt initialisiert:

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

Nach dem Login kopieren

CoffeeScript und die neue Version von jQuery machen den obigen Code so sexy:

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

Nach dem Login kopieren

Die Funktionsdefinitionssyntax in CoffeeScript ist bereits sehr cool und die Möglichkeit, sie in diesen Situationen verwenden zu können, macht sie noch cooler. Sie werden feststellen, dass alle Funktionsaufrufe, die Rückrufe erfordern, in CoffeeScript so einfach sind.

Tatsächlich ist Coffeescript eine Sprache, die sehr flexibel einsetzbar ist, da sie eins zu eins in JavaScript übersetzt werden kann. Es gibt auch mehr als eine Möglichkeit, es in ein Projekt einzuführen. Hier werde ich zunächst die Möglichkeiten zur Einführung von Coffeescript in Knotenprojekte zusammenfassen und die Vor- und Nachteile jeder Methode vergleichen.

Verwenden Sie direkt den Befehl „coffee“, um reine Coffeescript-Projekte auszuführen

Wenn man von Coffeescript spricht, denkt man im Allgemeinen natürlich an den jüngeren Bruder von Javascript, der dem Schatten von js niemals entkommen kann. Tatsächlich kann man es sich als eine eigenständige Sprache vorstellen. Wir alle wissen, dass Sie nach der globalen Installation des Coffee-Script-Pakets auf der Knotenplattform die interaktive Schnittstelle von Coffeescript über den Befehl „coffee“ aufrufen können. Sie können es auch „repl“ nennen. Wenn Ihr Projekt vollständig in Kaffee geschrieben ist, verwenden Sie einfach den Kaffeebefehl direkt in Ihrem Eingabeskript. Wenn Ihr Eingabeskript beispielsweise „app.coffee“ heißt, führen Sie Folgendes aus:

coffee app.coffee

Nach dem Login kopieren

注意，这里的扩展名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');

Nach dem Login kopieren

然后你就可以在项目中随便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

Nach dem Login kopieren

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

coffee -c src

Nach dem Login kopieren

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

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

coffee -c -o outputs src

Nach dem Login kopieren

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

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

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

coffee -o outputs -c src

Nach dem Login kopieren

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

coffee -o outputs -c -b src

Nach dem Login kopieren

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

coffee -o outputs -c -j out src

Nach dem Login kopieren

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

coffee -o outputs -c -w src

Nach dem Login kopieren

Bei Großprojekten ist es am besten, die Kompilierungsmethode im Voraus festzulegen, damit alle Entwickler alle Kompilierungsangelegenheiten mit nur einer Anweisung abschließen können. Dies erfordert eine automatisierte Konstruktion.

Offee bietet ein automatisiertes Build-Tool, Cake, das wie Make in the C-Welt ist. Aber wie auf der offiziellen Website angegeben, handelt es sich bei Cake um ein sehr einfaches Build-System. Tatsächlich besteht die Funktion von Cake darin, ein Skript namens Cakefile auszuführen, und das Cakefile-Skript ist in Coffeescript geschrieben. Dieses Skript bietet nur sehr begrenzte integrierte Funktionen, wie z. B. Tasks, die zum Deklarieren einer Anweisung und der entsprechenden Beschreibungs- und Ausführungsfunktionen verwendet werden. Die andere Sache besteht darin, ein reines Knotenprojekt zu schreiben. Um die Kompilierung abzuschließen, müssen Sie entweder das fs-Modul des Knotens verwenden, um die vom Kaffeemodul kompilierte Zeichenfolge auszugeben, oder das child_process-Modul verwenden, um Shell-Anweisungen auszuführen. Tatsächlich muss das Ziel der Kuchenkonstruktion nicht unbedingt Kaffee sein, da es tatsächlich ein Knotenskript ausführt und beliebige automatisierte Dinge verarbeiten kann.

Darüber hinaus gibt es einige bessere automatisierte Konstruktionswerkzeuge von Drittanbietern, die auch die automatische Zusammenstellung von Kaffee durchführen können, wie das berühmte Grunt und das heimische Fekit usw.

Diese orthodoxe Kompilierungsmethode ist möglicherweise die zuverlässigste und sollte von erfahrenen Programmierern geliebt werden. Es ermöglicht dem Team, ein festes Entwicklungsmodell zu erstellen. Darüber hinaus wird das kompilierte Projekt zu einem reinen JS-Projekt, und es sind keine zusätzlichen Abhängigkeiten erforderlich, unabhängig davon, ob es direkt als Anwendung ausgeführt oder von anderen Projekten als Modul referenziert wird. Und es ist nicht erforderlich, zur Laufzeit zu kompilieren, sodass durch die Kompilierung keine Leistungsprobleme verursacht werden.

Der Nachteil ist, dass es zu mühsam ist. Wenn Sie ein kleines Projekt durchführen, dauert es einen halben Tag, nur um die Kuchendatei zu erstellen oder Grunzen zu konfigurieren, was sich nicht lohnt.

Haben Sie durch die Einführung von Coffeescript in jQuery, node.js und Javascript ein neues Verständnis von Coffeescript gewonnen?