Utilisez CoffeeScrip pour écrire du code javascript d'une belle manière_javascript tips

JavaScript est sans aucun doute l'une des plus grandes inventions du Web. Presque tous les effets dynamiques sur les pages Web reposent sur sa riche puissance de calcul. Et ses capacités deviennent de plus en plus puissantes sous divers nouveaux moteurs JavaScript, tels que le moteur V8 utilisé par Google Chrome.

Cependant, parce qu'il est né trop tôt, de nombreuses définitions grammaticales sont aujourd'hui quelque peu inefficaces. Certaines formes grammaticales plus avancées ne peuvent pas être ajoutées au langage JavaScript actuel pour des raisons historiques, ce qui peut être dommage.

De nombreux génies à travers le monde travaillent dur pour créer un meilleur JavaScript. Il y a eu de nombreuses tentatives, dont les plus prometteuses sont CoffeeScript et TypeScript. Face à CoffeeScript, je me suis senti à première vue comme de vieux amis ; TypeScript a également suscité mon grand intérêt. CoffeeScript, comme TypeScript, est un langage compilé en JavaScript, et les deux améliorent les capacités d'expression de JavaScript. Cet article concerne CoffeeScript, TypeScript sera abordé dans le prochain article.

La soi-disant compilation en JavaScript signifie que CoffeeScript et TypeScript n'implémentent pas leur propre moteur d'exécution. Ils sont compilés en code JavaScript équivalent puis exécutés sur l'interpréteur JavaScript.

CoffeeScript

Simplicité

La plus grande impression de CoffeeScript est son expression concise. Le code suivant est extrait de 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)

Le code ci-dessus sera compilé en code JavaScript équivalent :

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 s'efforce d'être simple. Sa simplicité se traduit d’abord par la suppression de certains symboles qui ne servent qu’au contrôle syntaxique. Ceux-ci incluent :

Annuler le point-virgule

Annuler la déclaration var

Annulez les accolades entourant le code interne et utilisez plutôt l'indentation

Les appels de fonction peuvent omettre les parenthèses s'il n'y a pas d'ambiguïté

La déclaration var implique le mécanisme de portée des variables JavaScript compliqué et inutile. Ne parlons pas de cette partie pour l’instant. CoffeeScript simplifie le problème en éliminant complètement le mécanisme de déclaration var. Bref, dans le monde CoffeeScript, les variables n'ont pas besoin d'être déclarées à l'avance, il suffit de les utiliser directement. Et il n’y a fondamentalement aucun danger dans cette utilisation.

L'indentation dans CoffeeScript n'est pas seulement utilisée pour embellir le code, mais représente également l'organisation du niveau de code, qui a une signification particulière. Pour faire simple, le code interne ne doit pas être entouré d’accolades, mais le code interne doit être en retrait. Différentes indentations représentent différents niveaux de code. La forme et le contenu sont cohérents.

Exemple d'indentation :

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

Les appels de fonction CoffeeScript peuvent omettre les parenthèses sans provoquer d'ambiguïté. Par exemple, console.log(object) peut être simplifié en objet console.log. Un exemple de ce qu'on appelle l'ambiguïté est qu'en l'absence de paramètres, console.log ne sait pas s'il doit supprimer le journal des attributs fonctionnels ou appeler le journal des fonctions.

Les expressions de fonction de CoffeeScript ont également été extrêmement rationalisées et rationalisées. Une définition de fonction sur une ligne peut ressembler à ceci :

square = (x) -> x * x

Les fonctions multilignes sont également organisées par indentation. Une fonction vide est la plus concise, comme ceci : ->.

Cette expression concise des fonctions rend le passage des fonctions de rappel très pratique. Une carte du tableau pourrait suffire comme ceci :

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

Le code JavaScript équivalent ne peut pas être aussi bâclé :

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

Expression améliorée

CoffeeScript fournit une syntaxe d'expression puissante que JavaScript n'a pas, également appelée sucre syntaxique. Dans mon esprit, il existe de nombreuses améliorations de ce type. Je vais vous donner deux exemples représentatifs :

Interpolation de chaînes

Analyse de liste

La méthode d'interpolation de chaînes est une expansion et une simplification grammaticale des capacités de chaînes existantes tandis que l'analyse de liste implique un changement de concept ; Le premier est une amélioration, le second est un changement.

Interpolation de chaînes

Dans les chaînes CoffeeScript, vous pouvez utiliser #{…} pour intégrer une expression. Par exemple :

"#{ 22 / 7 } est une approximation décente de π"

équivaut à :

"" (22 / 7) " est une approximation décente de π" ;

L'interpolation joue ici un rôle d'espace réservé, facilitant la construction de chaînes pour le contenu dynamique. Je pense que tout le monde peut accepter cette expression.

Analyse de liste

Les compréhensions de listes sont un acteur important dans le monde de CoffeeScript. Cela change la façon dont le cycle est pensé. CoffeeScript ne fournit pas de structure de boucle for comme JavaScript, mais tout est converti en analyse de liste. Une boucle for JavaScript classique, comme ceci :

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

ウィンドウにバインドされた属性

window.name = '名前';

1 番目と 2 番目の方法は、最も一般的な間違った使用法です。まず、グローバル環境で直接コーディングすることはお勧めできません。代わりに、プログラムの範囲をこの匿名関数に制限するために匿名関数でラップする必要があります。 2 番目の使用法は、var 宣言を完全に忘れることです。実際の JavaScript コーディングでは、var 宣言を忘れることがよくあります (行末にセミコロンを追加し忘れることがよくあるのと同じです)。

CoffeeScript では、そのような心配はまったくありません。まず、コンパイルされた JavaScript コードはグローバル環境には公開されません。すべてのコードは自動的に匿名関数 (function(){ ... })(); でラップされます。その後、すべての変数が var で自動的に宣言されます。これにより、ウィンドウへの割り当てを使用しない限り、誤って世界情勢を汚染することが困難になります。

等価比較

JavaScript には == と === という 2 つの比較演算子があることは誰もが知っています。また、== は使い方が難しいこともわかっているので、通常はもう 1 文字入力して === を使用することを好みます。 CoffeeScript には比較演算子 == が 1 つだけあり、JavaScript の === にコンパイルされるため、この落とし穴は回避されます。

CoffeeScript を使用する必要があります

CoffeeScript は JavaScript の表現能力を簡素化および強化し、JavaScript のいくつかの落とし穴を文法レベルから可能な限り回避します。これを使用してコードを記述すると、人々はより明確かつ快適に感じることができ、間違いを犯しにくくなります。 CoffeeScript の本来の目的は、より優れた JavaScript を提供することです。

ただし、CoffeeScript は JavaScript と互換性がありません。これは JavaScript のサブセットでもスーパーセットでもなく、明らかに JavaScript とは異なる考え方を持つ言語です。 CoffeeScript を使用したプログラミングには概念の変更が必要ですが、この概念はより適切でより自然ですが、これが自分のやり方に行き詰まっている一部の人々の主な理由です。

CoffeeScript はすべての人に適しているわけではありません。コード階層を整理するためにインデントを使用することや、アロー関数式の使用を単純に受け入れられない人もいます。彼らにとって、関数キーワードと中括弧のない構成は、目に心地よいものではありません。

リスト解析は非常に強力ですが、あまりにも簡潔すぎます。複雑な JavaScript プログラムの構築に慣れている人にとって、この表現には慣れていません。

つまり、他の人に CoffeeScript の使い方を強制することはできません。 JavaScript は十分に強力であるため、十分に注意していれば、JavaScript を使用して作業を適切に実行できます。 CoffeeScript を試してみたいと考えている人たちに対しては、私たちも励ましの態度を示す必要があります。彼らは革新と変化を求める戦士です。 CoffeeScript は試してみる価値があります。非常に小さく、完全にマスターするのは難しくありません。

私は個人的に、チーム内での CoffeeScript の実装については保守的な考えを持っています。チームが最初から CoffeeScript を使用した方がよいでしょう。 CoffeeScript から JavaScript に切り替える場合は注意してください。考えられる方法の 1 つは、最初に小さなプロジェクトで CoffeeScrip を使用して、それがどのように機能するかを確認することです。

個人の場合は制限はありません。本当に気に入ったら、どうぞ。 CoffeeScript を使用して、スクリプトを作成したり、独自の Web サイトを構築したり、いくつかのガジェットを作成したりできます。

上記の内容は、エディターが紹介した CoffeeScrip を使用した JavaScript コードの美しい書き方です。気に入っていただければ幸いです。