ボスのようなJavaScript：流fluent APIを理解します

キーテイクアウト

JavaScriptの
• Fluent APIは、各関数で「この」オブジェクトを返すことで達成される関数呼び出しのチェーンを有効にすることにより、より読みやすく理解できるコードを可能にします。これにより、特に複雑な関数呼び出しシーケンスを扱う場合、コードのデバッグがより直感的で簡単になります。 さまざまなブラウザー（Chrome、Firefox、IE）でのパフォーマンステストは、流fluent APIを使用してもパフォーマンスに大きな影響を与えないことを示しました。場合によっては、Fluent APIは通常のAPIよりもさらに高速であり、パフォーマンスの損失について懸念なく使用できることを示しています。
Fluent APIはJavaScriptに適用できるだけでなく、JavaScriptライブラリまたはフレームワークで使用できます。 JQueryのような多くの人気のあるライブラリとフレームワークは、すでに流fluent APIを使用して、その方法をより読みやすく表現力豊かにしています。ただし、プロジェクトのニーズとフルエントAPIパターンにチームの慣れ性を考慮して、慎重に使用する必要があります。
• この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。
babylon.js v2.0（ウェブ上に3Dを構築するためのライブラリ）を設計している間、私は最近、より多くのAPIが流fluentであることを望んでいることに気付きました。つまり、コミュニティがより簡単に読み、理解し、構築できることを望みます。ハイテクドキュメントでの時間を短縮しながら作業。このチュートリアルでは、流fluent APIを通ります。考慮すべきこと、それらの書き方、クロスブラウザーのパフォーマンスへの影響。

何がAPIの流fluentを作るのですか？ このウィキペディアの記事で述べているように、流fluent APIは、より読みやすいコードを提供することを目的とするオブジェクト指向APIの実装です。たとえば、jQueryは、流fluent APIでできることの素晴らしい例です。

Fluent APIを使用すると、このオブジェクトを返すことで機能呼び出しをチェーンできます。このキーワードがJavaScriptでどのように機能するかを知らない場合は、この素晴らしい記事を読むことをお勧めします。

このような流fluentAPIを簡単に作成できます：

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

コールをチェーンできます：

<span>$('<div></div>')
</span>     <span>.html("Fluent API are cool!")
</span>     <span>.addClass("header")
</span>     <span>.appendTo("body");</span>

babylon.jsで同じことをしようとする前に、これがいくつかのパフォーマンスの問題を生成しないことを確認したかった。

だから私はベンチマークをしました！

FooとFoo2がまったく同じことをするのを見ることができます。唯一の違いは、foo2が連鎖できないのに対し、foo2は

<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}</span>

できないことです。

明らかにコールチェーンは次のように異なります

および：

<span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);</span>

このコードを考慮して、私はそれをChrome、Firefox、IEで実行して、パフォーマンスを心配する必要があるかどうかを判断しました。

そして、ここに私が得た結果があります：

• Chromeでは、通常のAPIはFluent APIよりも6％遅いです
Firefoxでは、両方のAPIがほぼ同じ速度で実行されています（Fluent APIは1％遅いです）
IEでは、両方のAPIがほぼ同じ速度で実行されています（Fluent APIは2％遅いです）

関数（Math.COS）に操作を追加して、関数によって行われた何らかの処理をシミュレートします。

すべてを削除して返されるステートメントを保持する場合、すべてのブラウザで違いはありません（実際、10,000,000トライで1ミリ秒または2ミリ秒だけ）。ブラウザ全体でこれをテストできます。また、デバイスが手元にある場合は、Modern.ieにはたくさんの無料ツールがあります。 仮想マシンを実際のデバイスに対してテストしないでください。

私の結論は次のとおりです

Fluent APIは素晴らしく、より読みやすいコードを作成し、問題やパフォーマンスの損失なしでそれらを使用できます！

JavaScriptを使用したより実践的な

少し驚くかもしれませんが、Microsoftは多くのオープンソースJavaScriptのトピックについてたくさんの自由な学習を持っています。プロジェクトSpartanが来ることでさらに多くのことを創造することを使命としています。自分のものをチェックしてください：

webgl 3dおよびhtml5およびbabylon.jsの紹介

ASP.NETおよびAngularJS
• を使用した単一ページアプリケーションの構築
HTMLの最先端のグラフィックス
または私たちのチームの学習シリーズ：

HTML/JavaScriptをより高速にするための実用的なパフォーマンスのヒント（レスポンシブデザインからカジュアルゲーム、パフォーマンスの最適化まで7部構成のシリーズ）

最新のWebプラットフォームJumpstart（HTML、CSS、およびJSの基礎）

• HTMLとJavaScript JumpStartを使用してUniversal Windowsアプリの開発（すでに作成したJSを使用してアプリを構築します）
およびいくつかの無料ツール：Visual Studioコミュニティ、Azureトライアル、およびMac、Linux、またはWindows用のクロスブラウザーテストツール。
• この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 Project Spartanとその新しいレンダリングエンジンを皆さんと共有できることを楽しみにしています。モダンでMac、iOS、Android、またはWindowsデバイスで無料の仮想マシンを入手するか、リモートでテストします。

JavaScriptの流fluent APIに関するよくある質問

javascriptの流fluent APIとは何ですか？

JavaScriptの流fluent APIは、コードを構成して読みやすく理解しやすくする方法です。それには、文や一連の指示のように読み取る方法で方法を結びつけることが含まれます。これは、各メソッドがオブジェクトを返すようにし、以前のメソッドの結果から別のメソッドをすぐに呼び出すようにすることによって達成されます。 Fluent APIは、特に複雑な関数呼び出しシーケンスを扱う場合、コードをきれいにし、より直感的にすることができます。

JavaScriptで流fluent APIを作成するにはどうすればよいですか？

​​

JavaScriptにFluent APIを作成するには、属するオブジェクトを返す方法を設計することが含まれます。これにより、メソッドを連鎖させることができます。たとえば、メソッド「StartEngine」、「Accelerate」、および「Stop」を備えたオブジェクト「車」を検討してください。これらの各メソッドが「このオブジェクト」（車のオブジェクト）を返している場合、car.startengine（）。accelerate（）。 apis？

Fluent APIは、コードをより読みやすく、メンテナンスにしやすくすることができます。方法を一緒にチェーンすることにより、文のように読み取る方法で複雑な操作を表現できます。これにより、コードが理解しやすくなり、デバッグできます。 Fluent APIは、コードをより表現力豊かで柔軟にすることができ、より強力な抽象化を作成できるようにします。

Fluent APIを使用することに欠点はありますか？ 、適切に使用しない場合は、デバッグをより困難にすることもできます。メソッド呼び出しが一緒にチェーンされるため、1つのメソッドの問題は、チェーン内のすべての後続のメソッドに影響を与える可能性があります。さらに、Fluent APIは、パターンに精通していない人にとっては直感的でない場合があります。 、しかし、それはもう少し複雑になる可能性があります。チェーン内の各メソッドが約束を返すようにする必要があります。これにより、「.then（）」を使用してメソッドを一緒に使用できます。または、同期のように見える非同期コードを作成するためにAsync/async/awaitの構文を使用することもできます。これにより、Fluent APIが読みや理解を容易にすることができます。

Fluent APIは、読みやすさと表現力に焦点を当てた設計パターンです。ビルダーパターンのような他のデザインパターンと比較することができます。これは、コードをより読みやすく、作業しやすくすることも目的としています。ただし、ビルダーパターンは複雑なオブジェクトの段階的な構築に焦点を当てていますが、Fluent APIは、より読みやすい操作の流れのためにメソッド呼び出しをチェーン可能にすることに焦点を当てています。 >

はい、Fluent APIはJavaScriptライブラリまたはフレームワークで使用できます。 JQueryやLodashのような多くの人気のあるライブラリやフレームワークは、Fluent APIをすでに使用してメソッドをより読みやすく表現力豊かにしています。FluentAPIをデバッグするにはどうすればよいですか？メソッド呼び出しが一緒にチェーンされるため、トリッキーです。ただし、メソッド内のConsole.logステートメントを使用して、出力を記録できます。さらに、JavaScriptデバッガーを使用すると、コードを介してチェーン内の各ステップでオブジェクトの状態を確認するのに役立ちます。

流fluent APIはパフォーマンスを改善できますか？

Fluent APIは、主にパフォーマンスではなく、コードの読みやすさと保守性を向上させることです。ただし、コードを読みやすく理解しやすくすることで、Fluent APIはパフォーマンスの問題をより簡単に見つけて修正するのに役立ちます。読みやすさと保守性が優先事項であるプロジェクトに最適です。ただし、すべてのプロジェクトに最適ではない場合があります。あなたのチームがFluent APIパターンに精通していない場合、彼らがそれに慣れるまでには時間がかかるかもしれません。さらに、Fluent APIは、適切に使用しないと、デバッグをより困難にすることができます。他のデザインパターンと同様に、Fluent APIを使用することを決定する前に、プロジェクトとチームのニーズを考慮することが重要です。

以上がボスのようなJavaScript：流fluent APIを理解しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。