ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript: Fluent API の技術を習得する

JavaScript: Fluent API の技術を習得する

WBOY
WBOYオリジナル
2023-09-04 08:09:051575ブラウズ

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 と同様に、これによって何らかの問題が生成されないようにしたいと考えています。 パフォーマンスの問題。

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

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

リーリー ###として

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

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

リーリー ###そして### リーリー

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

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

Chrome

では、通常の API は Fluent API よりも
    6%
  • 遅くなります。 Firefox では、 どちらの API もほぼ同じように実行されます (Fluent API は
  • 1%
  • より遅くなります)。 IE では、 どちらの API もほぼ同じように実行されます (Fluent API は
  • 2%
  • より遅くなります)。 問題は、関数 (Math.cos
  • ) に演算を追加したことです。 関数によって実行されるある種の処理をシミュレートします。

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

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

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

その他の実践方法 JavaScript

少し驚かれるかもしれませんが、Microsoft 多くのオープンソース JavaScript トピックに関する無料の学習コンテンツがたくさんあります。 Microsoft Edge の登場により、私たちの使命は、より多くのものを生み出すことです。私自身のものをチェックしてください:

HTML5 と WebGL を使用した 3D の概要 バビロン.JS

次のコマンドを使用して単一ページ アプリケーションを構築します。 ASP.NET と AngularJS
  • HTML による最先端のグラフィックス
  • または私たちのチームの学習シリーズ:
パフォーマンスを向上させる実践的なヒント HTML/JavaScript Faster (レスポンシブデザインから カジュアル ゲームからパフォーマンスの最適化まで)

最新のネットワーク プラットフォームのクイック スタート (基本) HTML、CSS、JavaScript)
  • ユニバーサル Windows アプリケーションを開発する HTML および JavaScript ジャンプ スタート (すでに作成した JS を使用) アプリケーションを構築する)
  • さらにいくつかの無料ツール: Visual Studio Community、Azure Trial、Mac、Linux、または Windows 用のクロスブラウザー テスト ツール ウィンドウズ。
この記事はネットワーク開発テクノロジーの一部です マイクロソフトのシリーズ。

Microsoft Edge

と新しい EdgeHTML レンダリング エンジン を皆さんと共有できることを嬉しく思います。無料 Mac、iOS、Android、または Windows デバイスでの仮想マシンまたはリモート テスト @http://dev.modern.ie/

以上がJavaScript: Fluent API の技術を習得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。