⛹🏾 🐺 🥫 Coffeescript。そして再び彼について。アメニティの概要 🙆🏻 🎓 🎉

CoffeeScriptは、いわば、JavaScriptに変換できる高レベル言語です。

githubで言及されている彼の相棒のサポートでJeremy Ashkenasという名前の単純な男によって設立されました。 Rubyに触発されて、男は私たちの生活を簡素化することを決定し、彼を作成しました！ CoffeeScript！

目標

この言語の目的と目的は、JavaScriptを使用する開発者の頭痛を解消することです。 JavaScriptに精通している人なら誰でも、継承のような魔法のような急成長中のコードを維持すること、オブジェクトのコンテキストをコールバックメソッドに渡すことなどがどれほど難しいかを知っています。そして、JavaScriptに自然なプロトタイプ継承を使用してクラスに分割された複数ページのネイティブコードを書く神経を持っている人たちは、自分たちが喜んで自分自身を撃つことができます。おいおい、CoffeeScriptはそれを簡単でシンプルにします：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

どのCoffeeScriptが最低価格で契約に署名したかについて心配する必要はありません（取引を行う瞬間まで）が、出力でネイティブの高速実行コードを取得することを確認してください：

（関数（）{
var Animal、Horse、Snake、Sam、Tom;
var __extends = function （child、parent）{
var ctor = function （）{};
ctor.prototype = parent.prototype;
子.__ superClass__ = parent.prototype;
child.prototype = new ctor（）;
child.prototype.constructor = child;
};
動物= 関数（）{};
Animal.prototype.move = function （meters）{
警告を返す（この .name + "moved" + meter + "m。" ）;
};
スネーク= 関数（名前）{
this .name = name;
これを返す ;
};
__extends（ヘビ、動物）;
Snake.prototype.move = function （）{
アラート（「スリザリング...」）;
return Snake .__ superClass __。move.call（ this 、 5 ）;
};
Horse = function （name）{
this .name = name;
これを返す ;
};
__extends（馬、動物）;
Horse.prototype.move = function （）{
alert（ "ギャロッピング..." ）;
return Horse .__ superClass __。move.call（ this 、 45 ）;
};
sam = new Snake（ "Sammy the Python" ）;
tom = new Horse（ "パロミノトミー" ）;
sam.move（）;
tom.move（）;
}）（）;

すべてがその環境で実行されるため、名前の競合を心配しないでください。しかし、そのような「パッケージ」からクラスまたは変数を「共有」する必要がある場合、それらへの参照をグローバル名前空間の変数に割り当てることは費用がかかりません。

ドキュメントについて。

ここで CoffeeScriptの使用方法について英語で読んでください。私の意見では、すべてが例とともに明確に説明されています。

特徴

すべてのコーヒースクリプトは、他のコーヒースクリプトを「損なわない」ように、コーヒーメーカーで「作成」されます。個人的には、これは正しいと思います。

短いラムダはスーパーです。そして、私が本当に気に入ったのは、コールバックハンドラーへのコンテキストの転送です。

クラスデータ
manyData：null
コンストラクター：->
遅延：新しい遅延（）
@initData（遅延）
SomeClass.fillData（遅延）
initData：（遅延）->
deferred.addCallback：（データ）=>
@manyData：データ
deferred.addCallback：（エラー）->
アラート （error.name + "：" + error.message）
新しいデータ（）

出力：

var Data;
データ= 関数（）{
var deferred;
deferred = new Deferred（）;
this .initData（遅延）;
SomeClass.fillData（遅延）;
これを返す ;
};
Data.prototype.manyData = null ;
Data.prototype.initData = function （deferred）{
deferred.addCallback =（ function （__this）{
var __func = function （data）{
this .manyData = data;
この .manyDataを返します。
};
return （ function （）{
return __func.apply（__ this、arguments）;
}）;
}）（ this ）;
deferred.addCallback = function （error）{
警告を返す（error.name + "：" + error.message）;
};
return deferred.addCallback;
};
新しいデータ（）;

コーヒーのコードがより適切に見えることに同意します。

var

を介して変数を宣言することを心配する必要がvar

、 function

という言葉を完全に忘れる必要がなくなりました-CoffeeScriptでは禁止されています。ただし、CoffeeScriptコーデックに通常のJavaScriptを挿入する必要がある場合は、文字` `

でラップするだけです：

hi： `関数（）{
return [document.title、 "Hello JavaScript" ] .join（ "：" ）;
} `
`var getSomeValue = function（）{...}`

その結果：

var hi;
hi = 関数（）{
return [document.title、 "Hello JavaScript" ] .join（ "：" ）;
};
var getSomeValue = function （）{...};

しかし、これは、絶望の極端な場合にのみ必要になると思います。

チップス

CoffeeScriptはさまざまな種類の言語構成要素にアクセスできますが、残念ながらネイティブJavaScriptでは使用できません。プロジェクトのWebサイトからいくつかの例を紹介します。

CoffeeScript

コレステロール： 127
健康： 200 >コレステロール> 60

Javascript

コレステロールの健康、健康;
コレステロール= 127 ;
健康=（ 200 >コレステロール）&&（コレステロール> 60 ）;

CoffeeScript

theBait： 1000
theSwitch： 0
[theBait、theBait]：[theSwitch、theBait]

Javascript

var _a、theBait、theSwitch;
theBait = 1000 ;
theSwitch = 0 ;
_a = [theSwitch、theBait];
theBait = _a [ 0 ];
theSwitch = _a [ 1 ];

CoffeeScript

番号：[ 0 .. 9 ]
threeToSix：数字[ 3 .. 6 ]
コピー：数字[ 0 ... numbers.length]

Javascript

var copy、numbers、threeToSix;
数字=（関数（）{
a = []; for （ var i = 0 ;（ 0 <= 9 ？i <= 9 ：i> = 9 ）;（ 0 <= 9 ？i + = 1 ：i-= 1 ））a.push（i）;
を返します;
}）。call（ this ）;
threeToSix = numbers.slice（3、6 + 1 ）;
copy = numbers.slice（ 0 、numbers.length）;

CoffeeScript

yearsOld：{max： 10 、ida： 9 、tim： 11 }
年齢：子供の場合、年齢
子+ "is" +年齢

Javascript

var _a、_b、年齢、年齢、子供、yearsOld;
var __hasProp = Object.prototype.hasOwnProperty;
yearsOld = {
最大： 10 、
ida： 9 、
tim： 11
};
年齢=（関数（）{
_a = []; _b = yearsOld;
for （_bの子）{ if （__hasProp.call（_b、child））{
年齢= _b [子];
_a.push（子+ "is" +年齢）;
}}
return _a;
}）（）;

CoffeeScript

年：[ 2000 .. 2010 ]
何年も
「年」 +年

Javascript

var _a、_b、_c、年、年;
年=（関数（）{
a = []; for （ var i = 2000 ;（ 2000 <= 2010 ？i <= 2010 ：i> = 2010 ）;（ 2000 <= 2010 ？i + = 1 ：i-= 1 ））a.push（i）;
を返します;
}）。call（ this ）;
_b =年;
for （_a = 0 、_c = _b.length; _a <_c; _a ++）{
年= _b [_a];
「年は」 +年。
}

まとめ

もちろん、本格的な開発には、強調表示や自動補完に十分な人気のあるプラグインはありませんが、これらの一時的な問題を無視すると、CoffeeScriptは本質的に複雑なJavaScriptアプリケーションの作成を簡素化します。

CoffeeScriptの大きな利点は、簡単に複雑なコードを作成できることです。これにより、実行時に、クラシッククラスをエミュレートするさまざまなライブラリと、誰もが同意できるECMA標準の特定の実装を接続する必要がなくなり、スクリプトの速度が大幅に向上します。

そして、誰もが好みに応じて開発および展開モードの組織を選択しますが、これはこのトピックのタスクではありません。

ご清聴ありがとうございました。

Coffeescript。 そして再び彼について。 アメニティの概要

目標

ドキュメントについて。

特徴

出力：

その結果：

チップス

CoffeeScript

Javascript

CoffeeScript

Javascript

CoffeeScript

Javascript

CoffeeScript

Javascript

CoffeeScript

Javascript

まとめ

More articles:

Coffeescript。そして再び彼について。アメニティの概要