Gunakan CoffeeScrip untuk menulis kod javascript dengan cara yang cantik_petua javascript

JavaScript sudah pasti salah satu ciptaan terhebat di web Hampir semua kesan dinamik pada halaman web adalah berdasarkan kuasa pengkomputeran yang kaya. Dan keupayaannya menjadi lebih dan lebih berkuasa di bawah pelbagai enjin JavaScript baharu, seperti Enjin V8 yang digunakan oleh Google Chrome.

Walau bagaimanapun, kerana ia dilahirkan terlalu awal, banyak definisi tatabahasa yang agak tidak cekap hari ini Beberapa bentuk tatabahasa yang lebih maju tidak boleh ditambahkan pada bahasa JavaScript semasa kerana sebab sejarah, yang boleh dikatakan sayang.

Ramai jenius di seluruh dunia bekerja keras untuk membina JavaScript yang lebih baik. Terdapat banyak percubaan, yang paling menjanjikan ialah CoffeeScript dan TypeScript. Menghadapi CoffeeScript, saya berasa seperti kawan lama pada pandangan pertama juga membangkitkan minat saya yang besar. CoffeeScript, seperti TypeScript, ialah bahasa yang disusun ke dalam JavaScript, dan kedua-duanya meningkatkan keupayaan ekspresif JavaScript. Artikel ini adalah mengenai CoffeeScript, TypeScript akan dibincangkan dalam artikel seterusnya.

Apa yang dipanggil kompilasi kepada JavaScript bermakna CoffeeScript dan TypeScript tidak melaksanakan masa jalan mereka sendiri dikompilasi ke dalam kod JavaScript yang setara dan kemudian dijalankan pada penterjemah JavaScript.

CoffeeScript

Kesederhanaan

Kesan terbesar CoffeeScript ialah ungkapannya yang ringkas. Kod berikut dipetik daripada 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)

Kod di atas akan dikompilkan kepada kod JavaScript yang setara:

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 berusaha untuk kesederhanaan. Kesederhanaannya mula-mula ditunjukkan dalam penyingkiran beberapa simbol yang hanya digunakan untuk kawalan sintaks. Ini termasuk:

Batalkan koma bertitik

Batalkan pengisytiharan var

Batalkan pendakap yang mengelilingi kod dalam dan gunakan lekukan sebaliknya

Panggilan fungsi boleh menghilangkan tanda kurung jika tiada kesamaran

Pengisytiharan var melibatkan mekanisme skop pembolehubah JavaScript yang rumit dan tidak berguna. Mari kita tidak bercakap tentang bahagian ini buat masa ini. CoffeeScript memudahkan masalah dengan menghapuskan sepenuhnya mekanisme perisytiharan var. Ringkasnya, dalam dunia CoffeeScript, pembolehubah tidak perlu diisytiharkan terlebih dahulu, hanya menggunakannya secara langsung. Dan pada dasarnya tidak ada bahaya dalam penggunaan ini.

Lekukan dalam CoffeeScript bukan sahaja digunakan untuk mencantikkan kod, tetapi juga mewakili organisasi tahap kod, yang mempunyai makna istimewa. Ringkasnya, kod dalam tidak boleh dikelilingi oleh pendakap, tetapi kod dalam harus diinden. Lekukan yang berbeza mewakili tahap kod yang berbeza. Bentuk dan kandungan adalah konsisten.

Contoh lekukan:

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

Panggilan fungsi CoffeeScript boleh menghilangkan kurungan tanpa menyebabkan kekaburan. Contohnya, console.log(objek) boleh dipermudahkan kepada console.log object. Contoh kekaburan yang dipanggil ialah dalam kes tiada parameter, console.log tidak tahu sama ada hendak mengeluarkan log atribut berfungsi atau memanggil log fungsi.

Ekspresi fungsi CoffeeScript juga sangat diperkemas dan diperkemas. Takrif fungsi satu baris boleh kelihatan seperti ini:

square = (x) -> x * x

Fungsi berbilang talian juga diatur melalui lekukan. Fungsi kosong adalah yang paling ringkas, seperti ini: ->.

Ungkapan fungsi ringkas ini menjadikan fungsi panggilan balik hantaran sangat mudah. Peta tatasusunan mungkin memadai seperti ini:

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

Kod JavaScript yang setara tidak boleh terlalu ceroboh:

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

Ekspresi Dipertingkat

CoffeeScript menyediakan beberapa sintaks ekspresi berkuasa yang tidak dimiliki JavaScript, yang juga dipanggil gula sintaksis. Dalam fikiran saya, terdapat banyak peningkatan seperti itu, saya akan memberikan anda dua contoh yang mewakili:

Interpolasi Rentetan

Penghuraian senarai

Kaedah interpolasi rentetan ialah pengembangan dan penyederhanaan tatabahasa bagi keupayaan rentetan sedia ada manakala penghuraian senarai melibatkan perubahan dalam konsep. Yang pertama adalah peningkatan, yang kedua adalah perubahan.

Interpolasi Rentetan

Dalam rentetan CoffeeScript, anda boleh menggunakan #{…} untuk membenamkan ungkapan. Contohnya:

"#{ 22 / 7 } ialah anggaran yang baik bagi π"

bersamaan dengan:

"" (22 / 7) " ialah anggaran yang baik bagi π";

Interpolasi memainkan peranan pemegang tempat di sini, menjadikannya lebih mudah untuk membina rentetan untuk kandungan dinamik. Saya rasa semua orang boleh menerima ungkapan ini.

Penghuraian senarai

Pemahaman senarai ialah pemain penting dalam dunia CoffeeScript. Ia mengubah cara kitaran itu difikirkan. CoffeeScript tidak menyediakan struktur gelung untuk seperti JavaScript, tetapi semuanya ditukar kepada analisis senarai. JavaScript biasa untuk gelung, seperti ini:

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

An Fenster gebundene Attribute

window.name = 'name';

Die erste und zweite Methode sind die häufigsten falschen Verwendungen. Zunächst wird nicht empfohlen, den Code direkt in der globalen Umgebung zu verwenden. Stattdessen sollte er in eine anonyme Funktion eingeschlossen werden, um den Umfang des Programms auf diese anonyme Funktion zu beschränken. Die zweite Verwendung besteht darin, die var-Deklaration vollständig zu vergessen. Bei der eigentlichen JavaScript-Codierung vergesse ich häufig die var-Deklaration (so wie ich oft vergesse, am Ende der Zeile ein Semikolon hinzuzufügen).

In CoffeeScript gibt es diese Sorge überhaupt nicht. Erstens wird der kompilierte JavaScript-Code nicht der globalen Umgebung ausgesetzt. Der gesamte Code wird automatisch in eine anonyme Funktion (function(){ ... })(); eingeschlossen. Dann werden alle Variablen automatisch mit var deklariert. Dies macht es schwierig, die globale Situation versehentlich zu verunreinigen, es sei denn, Sie verwenden die Zuweisung zum Fenster.

Gleichstellungsvergleich

Wir alle wissen, dass JavaScript zwei Vergleichsoperatoren hat: == und ===. Wir wissen auch, dass die Verwendung von == schwierig sein kann, daher geben wir normalerweise lieber ein weiteres Zeichen ein und verwenden ===. CoffeeScript hat nur einen Vergleichsoperator == und wird in JavaScripts === kompiliert, wodurch diese Gefahr vermieden wird.

Sollte ich CoffeeScript verwenden?

CoffeeScript vereinfacht und verbessert die Ausdrucksfähigkeit von JavaScript und vermeidet einige Fallstricke von JavaScript auf grammatikalischer Ebene so weit wie möglich. Wenn Sie damit Code schreiben, fühlen sich die Leute klarer und wohler und es wird weniger leicht, Fehler zu machen. Die ursprüngliche Absicht von CoffeeScript besteht darin, besseres JavaScript bereitzustellen.

CoffeeScript ist jedoch nicht mit JavaScript kompatibel. Es handelt sich weder um eine Teilmenge noch um eine Obermenge von JavaScript, sondern um eine Sprache mit offensichtlich anderen Ideen als JavaScript. Das Programmieren mit CoffeeScript erfordert eine Änderung des Konzepts. Obwohl dieses Konzept besser und natürlicher ist, ist es der Hauptgrund, warum manche Leute, die in ihren Gewohnheiten stecken bleiben, abgeschreckt werden.

CoffeeScript ist nicht für jeden geeignet. Manche Leute können die Verwendung von Einrückungen zum Organisieren von Codehierarchien oder die Verwendung von Pfeilfunktionsausdrücken einfach nicht akzeptieren. Für sie ist die Organisation ohne Funktionsschlüsselwort und geschweifte Klammern optisch nicht erfreulich.

Das Parsen von Listen ist sehr leistungsfähig, aber auch zu prägnant. Wer es gewohnt ist, komplexe JavaScript-Programme zu erstellen, ist mit diesem Ausdruck nicht vertraut.

Kurz gesagt: Sie können andere nicht zwingen, den Umgang mit CoffeeScript zu erlernen. JavaScript ist so leistungsstark, dass Sie Ihre Arbeit mit JavaScript gut erledigen können, solange Sie vorsichtig genug sind. Für diejenigen, die CoffeeScript ausprobieren möchten, müssen wir auch eine ermutigende Haltung vermitteln. Sie sind Krieger, die nach Innovation und Veränderung streben. CoffeeScript ist wirklich einen Versuch wert, es ist wirklich klein und es ist nicht schwer, es vollständig zu beherrschen.

Ich persönlich habe eine konservative Einstellung zur Implementierung von CoffeeScript im Team. Es wäre besser, wenn das Team von Anfang an CoffeeScript verwenden würde. Seien Sie vorsichtig, wenn Sie von CoffeeScript zu JavaScript wechseln. Eine Möglichkeit besteht darin, CoffeeScrip zunächst in einem kleinen Projekt auszuprobieren, um zu sehen, wie es funktioniert.

Für Einzelpersonen gibt es keine Einschränkungen. Wenn es dir wirklich gefällt, dann mach es. Sie können CoffeeScript verwenden, um Skripte zu schreiben, Ihre eigenen Websites zu erstellen und einige Gadgets zu erstellen.

Der obige Inhalt ist die schöne Art, Javascript-Code mit CoffeeScrip zu schreiben, die der Herausgeber vorgestellt hat. Ich hoffe, er gefällt Ihnen.