Verwenden Sie CoffeeScrip, um Javascript-Code auf schöne Weise zu schreiben_Javascript-Tipps

JavaScript ist zweifellos eine der größten Erfindungen im Web. Fast alle dynamischen Effekte auf Webseiten basieren auf seiner reichen Rechenleistung. Und seine Fähigkeiten werden unter verschiedenen neuen JavaScript-Engines, wie beispielsweise der von Google Chrome verwendeten V8-Engine, immer leistungsfähiger.

Da es jedoch zu früh geboren wurde, sind viele grammatikalische Definitionen heute etwas ineffizient. Aus historischen Gründen können einige fortgeschrittenere grammatikalische Formen nicht zur aktuellen JavaScript-Sprache hinzugefügt werden.

Viele Genies auf der ganzen Welt arbeiten hart daran, besseres JavaScript zu entwickeln. Es gab viele Versuche, die vielversprechendsten davon sind CoffeeScript und TypeScript. Als ich CoffeeScript sah, fühlte ich mich auf den ersten Blick wie ein alter Freund; auch TypeScript weckte mein großes Interesse. CoffeeScript ist wie TypeScript eine in JavaScript kompilierte Sprache, und beide verbessern die Ausdrucksfähigkeiten von JavaScript. In diesem Artikel geht es um CoffeeScript. TypeScript wird im nächsten Artikel besprochen.

Die sogenannte Kompilierung in JavaScript bedeutet, dass CoffeeScript und TypeScript keine eigene Laufzeit implementieren. Sie werden in äquivalenten JavaScript-Code kompiliert und dann auf dem JavaScript-Interpreter ausgeführt.

CoffeeScript

Einfachheit

Der größte Eindruck von CoffeeScript ist sein prägnanter Ausdruck. Der folgende Code ist ein Auszug aus CoffeeScript Chinese:

# 赋值:
number  = 42
opposite = true
# 条件:
number = -42 if opposite
# 函数:
square = (x) -> x * x
# 数组:
list = [1, 2, 3, 4, 5]
# 对象:
math =
 root:  Math.sqrt
 square: square
 cube:  (x) -> x * square x
# Splats:
race = (winner, runners...) ->
 print winner, runners
# 存在性:
alert "I knew it!" if elvis?
# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)

Der obige Code wird zum entsprechenden JavaScript-Code kompiliert:

var cubes, list, math, num, number, opposite, race, square,
 __slice = [].slice;
number = 42;
opposite = true;
if (opposite) {
 number = -42;
}
square = function(x) {
 return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
 root: Math.sqrt,
 square: square,
 cube: function(x) {
  return x * square(x);
 }
};
race = function() {
 var runners, winner;
 winner = arguments[0], runners = 2 <= arguments.length &#63; __slice.call(arguments, 1) : [];
 return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
 alert("I knew it!");
}
cubes = (function() {
 var _i, _len, _results;
 _results = [];
 for (_i = 0, _len = list.length; _i < _len; _i++) {
  num = list[_i];
  _results.push(math.cube(num));
 }
 return _results;
})();
run: cubes

CoffeeScript strebt nach Einfachheit. Seine Einfachheit spiegelt sich zunächst in der Entfernung einiger Symbole wider, die nur der Syntaxkontrolle dienen. Dazu gehören:

Semikolon abbrechen

Var-Deklaration abbrechen

Entfernen Sie die Klammern um den inneren Code und verwenden Sie stattdessen Einrückungen

Funktionsaufrufe können Klammern weglassen, wenn keine Mehrdeutigkeit besteht

Die var-Deklaration beinhaltet den komplizierten und nutzlosen JavaScript-Variablenbereichsmechanismus. Lassen Sie uns vorerst nicht über diesen Teil sprechen. CoffeeScript vereinfacht das Problem, indem es den var-Deklarationsmechanismus vollständig eliminiert. Kurz gesagt: In der CoffeeScript-Welt müssen Variablen nicht im Voraus deklariert werden, sondern können einfach direkt verwendet werden. Und grundsätzlich besteht bei dieser Verwendung keine Gefahr.

Einrückungen werden in CoffeeScript nicht nur zur Verschönerung des Codes verwendet, sondern stellen auch die Organisation der Codeebene dar, was eine besondere Bedeutung hat. Vereinfacht ausgedrückt sollte der innere Code nicht in geschweiften Klammern stehen, sondern eingerückt werden. Unterschiedliche Einrückungen repräsentieren unterschiedliche Codeebenen. Form und Inhalt stimmen überein.

Beispiel für Einrückung:

#if缩进
if true
 'true'
else
 'false'
#while缩进
while true
 'true'
#函数缩进
(n) ->
 n * n
#对象字面量缩进
kids =
 brother:
  name: "Max"
  age: 11
 sister:
  name: "Ida"
  age: 9 

CoffeeScript-Funktionsaufrufe können Klammern weglassen, ohne dass es zu Mehrdeutigkeiten kommt. Beispielsweise kann console.log(object) zu console.log-Objekt vereinfacht werden. Ein Beispiel für die sogenannte Mehrdeutigkeit ist, dass console.log ohne Parameter nicht weiß, ob das Funktionsattributprotokoll herausgenommen oder das Funktionsprotokoll aufgerufen werden soll.

Die Funktionsausdrücke von CoffeeScript wurden ebenfalls äußerst optimiert und optimiert. Eine einzeilige Funktionsdefinition kann wie folgt aussehen:

square = (x) -> x * x

Mehrzeilige Funktionen werden auch durch Einrückung organisiert. Eine leere Funktion ist am prägnantesten, etwa so: ->.

Dieser prägnante Funktionsausdruck macht die Übergabe von Rückruffunktionen sehr praktisch. Eine Karte des Arrays könnte wie folgt ausreichen:

list = [1, 2, 3]
list.map (e) -> e+1

Der entsprechende JavaScript-Code kann nicht so schlampig sein:

list = [1, 2, 3];
list.map(function(e) { return e + 1; });

Verbesserter Ausdruck

CoffeeScript bietet eine leistungsstarke Ausdruckssyntax, die JavaScript nicht hat und die auch als syntaktischer Zucker bezeichnet wird. Meiner Meinung nach gibt es viele solcher Verbesserungen. Ich nenne Ihnen zwei repräsentative Beispiele:

String-Interpolation

Listenanalyse

Die String-Interpolationsmethode ist eine Erweiterung und grammatikalische Vereinfachung der vorhandenen String-Funktionen, während das Parsen von Listen eine Änderung des Konzepts mit sich bringt. Ersteres ist eine Verbesserung, letzteres eine Veränderung.

String-Interpolation

In CoffeeScript-Strings können Sie #{…} verwenden, um einen Ausdruck einzubetten. Zum Beispiel:

"#{ 22 / 7 } ist eine gute Näherung für π"

entspricht:

"" (22 / 7) " ist eine gute Näherung für π";

Interpolation spielt hier eine Platzhalterrolle und erleichtert die Erstellung von Zeichenfolgen für dynamische Inhalte. Ich denke, jeder kann diesen Ausdruck akzeptieren.

Listenanalyse

Listenverständnisse sind ein wichtiger Akteur in der Welt von CoffeeScript. Es verändert die Art und Weise, wie über den Zyklus gedacht wird. CoffeeScript bietet keine For-Schleifenstruktur wie JavaScript, sondern alles wird in eine Listenanalyse umgewandelt. Eine reguläre JavaScript-for-Schleife, etwa so:

food_list = ['toast', 'cheese', 'wine'];
for (i = 0, len = food_list.length; i < len; i++) {
 food = food_list[i];
 eat(food);
}

用CoffeeScript实现就是：

food_list = ['toast', 'cheese', 'wine']
eat food for food in food_list #做个小补充，for循环的单条语句的写法

单单是上面的例子不足以显示列表解析的强大（却看到它的简洁了）。在继续这个话题之前，我觉得我有必要补充一下另一个涉及到CoffeeScript理念的东西了：一切皆是表达式。

在CoffeeScript世界里，一切语句都是表达式语句，都会返回一个值。函数调用默认会返回最后一条语句的值。if条件结构也会返回值，其返回的是执行的最后一条语句的值。循环结构有些不同，其会将每次循环的结果都保存在一个数组里，作为此循环结构的值。例如下面代码的list结果就是[5, 4, 3, 2, 1]。

num = 6
list = while num -= 1
 num

回到列表解析的主题。与while一样，for结构也是一种循环的表达，其结果也是一个数组。回到先前的例子，下面的小代码的list结果就是['t', 'c', 'w']。

food_list = ['toast', 'cheese', 'wine']
list = (food[0] for food in food_list)

我们已经看到for循环的each形式

eat food for food in food_list

以及它的map形式

(food[0] for food in food_list)

下面给出它的filter形式

(food for food in food_list when food is 'wine')

列表解析的特色的地方在于它改变了我们组织循环的方式和解析数组的模式。这是一种声明式的编程方法，告诉程序你想要什么而不去关心构建的过程。

类的支持

类是CoffeeScript对JavaScript的一个很重要的补充。JavaScript的原型功能很强大，写法上又恨别扭。正确地设置原型链以实现继承关系也是个很大的挑战。CoffeeScript从语法上直接支持类的定义，自然且隐藏细节。

class Animal
 constructor: (@name) ->
 move: (meters) ->
  alert @name + " moved #{meters}m."
class Snake extends Animal
 move: ->
  alert "Slithering..."
  super 5
class Horse extends Animal
 move: ->
  alert "Galloping..."
  super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()

从实现上来说，CoffeeScript的类与JavaScript的构造函数和原型链那一套并无二致。所以，理解原型机制也是理解CoffeeScript类的基础。

关于JavaScript的糟粕

CoffeeScript的另一个目标是从语法层面上直接消除JavaScript的被人诟病的一些糟粕部分。前面已经说过关于分号的部分。关于var声明的部分。分号的机制暂且不去例会，总之CoffeeScript不用再去写分号了。

在JavaScript当中，最为人诟病的糟粕部分有两处，因为它们使用的情况最多而且容易出错。

全局变量

相等比较

全局变量

JavaScript的作用域规则很复杂，涉及到var声明机制和变量提升。在JavaScript里，构造一个全局变量是很容易的，有三种方式：

在全局的环境里用var声明

var name = 'name';

在函数内用省略var的方式定义

function foo() {
  name = 'name';
}

Attributs liés à la fenêtre

window.name = 'nom';

Les première et deuxième méthodes sont les utilisations incorrectes les plus courantes. Tout d'abord, il n'est pas recommandé de coder directement dans l'environnement global, mais de l'encapsuler dans une fonction anonyme pour limiter la portée du programme à cette fonction anonyme. La deuxième utilisation consiste à oublier complètement la déclaration var. Dans le codage JavaScript actuel, il m'est courant d'oublier la déclaration var (tout comme j'oublie souvent d'ajouter un point-virgule à la fin de la ligne).

Dans CoffeeScript, il n'y a aucun souci de ce type. Tout d'abord, le code JavaScript compilé ne sera pas exposé à l'environnement global. Tout le code est automatiquement encapsulé dans une fonction anonyme (function(){ ... })();. Ensuite, toutes les variables seront automatiquement déclarées avec var. Cela rend difficile la pollution accidentelle de la situation globale, à moins que vous n'utilisiez l'affectation à la fenêtre.

Comparaison égalité

Nous savons tous que JavaScript a deux opérateurs de comparaison : == et ===. Nous savons également que == peut être difficile à utiliser, nous préférons donc généralement saisir un caractère supplémentaire et utiliser ===. CoffeeScript n'a qu'un seul opérateur de comparaison ==, et il sera compilé en === de JavaScript, évitant ainsi cet écueil.

Dois-je utiliser CoffeeScript

CoffeeScript simplifie et améliore la capacité d'expression de JavaScript et évite autant que possible certains pièges de JavaScript au niveau grammatical. L’utiliser pour écrire du code permettra aux gens de se sentir plus clairs et plus à l’aise, et il sera moins facile de commettre des erreurs. L'intention initiale de CoffeeScript est de fournir un meilleur JavaScript.

Cependant, CoffeeScript est incompatible avec JavaScript. Il ne s'agit ni d'un sous-ensemble ni d'un sur-ensemble de JavaScript, mais d'un langage dont les idées sont évidemment différentes de celles de JavaScript. Programmer avec CoffeeScript nécessite un changement de concept Bien que ce concept soit meilleur et plus naturel, c'est la principale raison pour laquelle certaines personnes coincées dans leurs habitudes sont dissuadées.

CoffeeScript ne convient pas à tout le monde. Certaines personnes ne peuvent tout simplement pas accepter l'utilisation de l'indentation pour organiser les hiérarchies de code, ni l'utilisation d'expressions de fonctions fléchées. Pour eux, l’organisation sans le mot-clé de fonction et les accolades n’est pas agréable à l’œil.

L'analyse de liste est très puissante, mais elle est également trop concise. Pour les personnes habituées à construire des programmes JavaScript complexes, elles ne sont pas habituées à cette expression.

En bref, vous ne pouvez pas forcer les autres à apprendre à utiliser CoffeeScript. JavaScript est suffisamment puissant pour que, tant que vous êtes suffisamment prudent, vous puissiez utiliser JavaScript pour bien faire le travail. Pour ceux qui veulent essayer CoffeeScript, il faut aussi adopter une attitude encourageante. Ce sont des guerriers en quête d’innovation et de changement. CoffeeScript vaut vraiment la peine d'être essayé, et il est vraiment petit et il n'est pas difficile de le maîtriser complètement.

J'ai personnellement une vision conservatrice de la mise en œuvre de CoffeeScript dans l'équipe. Ce serait mieux si l'équipe utilisait CoffeeScript dès le début. Si vous passez de CoffeeScript à JavaScript, soyez prudent. Une méthode possible consiste à essayer d’abord d’utiliser CoffeeScrip dans un petit projet pour voir comment cela fonctionne.

Pour les particuliers, il n'y a aucune restriction. Si vous l'aimez vraiment, foncez. Vous pouvez utiliser CoffeeScript pour écrire des scripts, créer vos propres sites Web et créer des gadgets.

Le contenu ci-dessus est la belle façon d'écrire du code javascript à l'aide de CoffeeScrip présentée par l'éditeur. J'espère qu'il vous plaira.