JavaScript: Fluent API の技術を習得する-jsチュートリアル-php.cn

Babylon.js v2.0 を設計する場合(a Web 上で 3D を構築するためのライブラリ)、最近、もっと欲しいと思っていることに気づきました。 APIfluent- そうは言っても、コミュニティが読みやすくしたいのですが、技術文書に費やす時間を短縮しながら、自分の仕事を理解し、発展させていきます。

このチュートリアルでは、流暢な API について説明します。考慮すべき点とその方法について説明します。それらの書き込みと、クロスブラウザーのパフォーマンスへの影響。

Fluent API とは何ですか?

JavaScript：掌握流畅 API 的艺术

この Wikipedia の記事で説明されている流暢な API は、より読みやすいコードを提供するように設計されたオブジェクト指向 API。 JQuery は、流暢な API によって何ができるかを示す好例です:

リーリー

Smooth API を使用するとリンクできますこのオブジェクトを返すことで関数が呼び出されます。

簡単に作成できますこのような流暢な API:

リーリー

ご覧のとおり、トリックはthisオブジェクトを返すだけです (現在のインスタンスを参照します) この場合）チェーンを継続できるようにします。

知らない場合は JavaScript で「this」キーワードがどのように機能するかについては、この素晴らしい記事を読むことをお勧めします記事の著者:マイク・ウェスト。

これで呼び出しをチェーンできます:

リーリー

次の作業を行う前に Babylon.js と同様に、これによって何らかの問題が生成されないようにしたいと考えています。パフォーマンスの問題。

パフォーマンスはどうですか?

ということでベンチマークテストをしてみました！

リーリー＃＃＃として

fooとfoo2がまったく同じことを行うことがわかります。のみ違いは、fooはリンクできるが、foo2はリンクできないことです。

明らかにコールチェーン違いは次のとおりです:

リーリー＃＃＃そして＃＃＃リーリー

このコードを与えられて実行しました Chrome、Firefox、IE に興味があるかどうかを確認するパフォーマンス。

これが結果ですわかりました: JavaScript：掌握流畅 API 的艺术

Chrome

では、通常の API は Fluent API よりも

遅くなります。Firefoxでは、どちらの API もほぼ同じように実行されます (Fluent API は
より遅くなります)。IEでは、どちらの API もほぼ同じように実行されます (Fluent API は
より遅くなります)。問題は、関数 (Math.cos

すべて削除したらreturnステートメントはそのままにしておいてください。すべてのブラウザで機能するわけではありません。その違い (実際には、10,000,000 回の試行でわずか 1 ～ 2 ミリ秒)。あなたさまざまなブラウザーで自分でテストできます。持っていない場合このデバイスは便利で、dev.modern.IE には無料のツールが多数あります。仮想マシン上でパフォーマンステストを実行しないでください。実際のデバイスの場合。

したがって、私の結論は次のとおりです。来て！

Fluent API は優れています。より読みやすいコードが生成され、問題やパフォーマンスの低下なしに使用できます。

その他の実践方法 JavaScript