JavaScript就像老闆：了解流利的API

鑰匙要點

JavaScript中的
• fluent API允許通過在每個函數中返回“此”對象來實現函數調用的鏈接，從而允許更具可讀性和可理解的代碼。這使得代碼更加直觀，更易於調試，尤其是在處理複雜的函數調用序列時。 在不同瀏覽器（Chrome，Firefox，IE）上進行性能測試表明，使用Fluent API不會顯著影響性能。在某些情況下，流利的API甚至比常規API快，表明可以使用它們而不擔心性能損失。 Fluent API不僅適用於JavaScript，而且可以與任何JavaScript庫或框架一起使用。許多流行的庫和框架（例如JQuery）已經使用Fluent API來使其方法更具可讀性和表現力。但是，考慮項目的需求以及團隊對流利的API模式的熟悉程度，應明智地使用它們。
• >
本文是Microsoft的Web開發技術系列的一部分。感謝您支持使SitietPoint成為可能的合作夥伴。 在設計Babylon.js v2.0（網絡上的3D庫）時，我最近發現自己希望更多的API流利- 也就是說，我希望社區能夠更輕鬆地閱讀，理解和建立在技​​術文檔中花費更少的時間的工作。在本教程中，我將瀏覽流利的API-要考慮什麼，如何編寫它們以及跨瀏覽器的性能。
是什麼使API流利？

> 如本Wikipedia文章所述，

>流利的API使您可以通過返回該對象來調用鏈接函數。如果您不知道此關鍵字在JavaScript中的工作方式，我建議閱讀這篇很棒的文章。 我們可以輕鬆地創建一個流利的API：

如您所見，技巧只是返回該對象（在這種情況下對當前實例的引用）以允許鏈條繼續。 然後，我們可以鏈接電話：

在嘗試與Babylon.js做同樣的事情之前，我想確保這不會產生某些性能問題。

所以我做了一個基準！

>

您可以看到foo和foo2做完全相同的事情。唯一的區別是foo可以被束縛，而foo2不能。

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

>

顯然呼叫鏈不同：

和：

<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>

給定此代碼，我將其運行在Chrome，Firefox和IE上，以確定我是否必須關注性能。

，這是我得到的結果：

• 在Chrome中，常規API比Fluent API慢6％ 在Firefox中，兩個API幾乎都以相同的速度運行（Fluent API慢1％）
> 在IE中，兩個API幾乎都以相同的速度運行（流利的API慢2％）
• >
• >我在函數（Math.cos）中添加了一個操作，以模擬該函數完成的某種處理。

如果我刪除了所有內容並保留返回語句，則在所有瀏覽器上都沒有區別（實際上只有一兩個毫秒，只需10,000,000次嘗試）。您可以在瀏覽器中自己對其進行測試。而且，如果您沒有方便的設備，那麼Modern.ie上有很多免費工具。 只是不要對真實設備進行虛擬機測試虛擬機。

所以我的結論是：這是一個！

>

流利的API很棒，它們會產生更可讀的代碼，您可以使用它們而不會出現任何問題或績效損失！

>！

與JavaScript更多動手

>這可能會讓您感到驚訝，但是微軟在許多開源JavaScript主題上擁有大量免費學習，我們的任務是隨著Project Spartan的到來而創造更多的東西。查看我自己的：

WebGL 3D和HTML5和Babylon.js

簡介

>使用ASP.NET和AngularJS
• 構建單頁應用程序 HTML
中的尖端邊緣圖形
或我們團隊的學習系列：

實用的性能提示，使您的HTML/JavaScript更快（從響應式設計到休閒遊戲再到績效優化的七部分系列）

>現代Web平台Jumpstart（HTML，CSS和JS的基本原理）

>
• >使用HTML和JavaScript Jumpstart開發通用Windows應用程序（使用已創建的JS來構建應用程序）
• 和一些免費工具：Visual Studio社區，Azure試用和Mac，Linux或Windows的跨瀏覽器測試工具。
>
• 本文是Microsoft的Web Dev技術系列的一部分。我們很高興與您共享Spartan項目及其新的渲染引擎。在Modern.ie上獲取免費的虛擬機或遠程測試。

經常詢問有關JavaScript中流利API的問題

> JavaScript中的流利API是什麼？它涉及將鏈接方法一起使用的方式，就像句子或一系列說明一樣。這是通過確保每種方法返回對象的，允許從上一個方法的結果立即調用另一種方法來實現的。流利的API可以使您的代碼更清潔，更直觀，尤其是在處理複雜的功能調用序列時。

>如何在JavaScript中創建流利的API？

>在JavaScript中創建流利的API涉及設計您的方法以返回其屬於其對象。這使您可以將方法鏈接在一起。例如，考慮一個用方法“ startEngine”，“ Accelerate”和“ Stop”的對象“汽車”。如果這些方法中的每一種都返回“此”（汽車對象），則可以像這樣將它們鏈接在一起：car.startengine（）。 accelerate（）。 stop（）。 API？

流利的API可以使您的代碼更易讀和更易於維護。通過將方法鏈接在一起，您可以以讀取句子的方式表達複雜的操作。這可以使您的代碼易於理解和調試。流利的API也可以使您的代碼更具表現力和靈活性，從而使您可以創建更強大的抽象。

是否有使用fluent apis的缺點？ ，如果不正確使用，它們也可以使調試變得更加困難。由於方法調用被鏈接在一起，因此一種方法的問題會影響鏈中的所有後續方法。此外，對於不熟悉該模式的人，流利的API有時可能不太直觀。

我可以使用帶有異步代碼的流利API？

是的，您可以使用流利的API，使用異步代碼使用流利的API ，但這可能更複雜。您需要確保鏈中的每種方法都返回承諾，從而使您可以使用“ .then（）”將鏈方法一起使用。另外，您可以使用異步/等待語法來編寫看起來同步的異步代碼，這可以使您的流利的API易於閱讀和理解。

>流利的API與Jav​​aScript中的其他設計模式相比如何？ Fluent API是一種側重於可讀性和表現力的設計模式。它可以與其他設計模式（例如構建器模式）進行比較，該模式還旨在使代碼更易讀和更易於使用。但是，儘管構建器模式著重於逐步構造複雜對象，但Fluent API著重於使方法調用可鏈接，以鏈接用於更可讀的操作流。

是否可以與JavaScript庫和框架一起使用Fluent API？ >

是的，流利的API可以與任何JavaScript庫或框架一起使用。許多流行的庫和框架（例如JQuery和Lodash）已經使用Fluent API來使他們的方法更具可讀性和表現力。

我如何調試流利的API？

可以調試流利的API可以是一點棘手，因為方法調用被鏈在一起。但是，您可以在方法中使用Console.LOG語句來記錄其輸出。此外，使用JavaScript調試器可以幫助您逐步瀏覽代碼，並在鏈條中的每個步驟中查看對象的狀態。

>流利的API可以提高性能嗎？

流利的API主要是關於改善代碼的可讀性和可維護性，而不是性能。但是，通過使您的代碼更易於閱讀和理解，流利的API可以幫助您更輕鬆地發現和修復性能問題。

Fluent API是否適合每個項目？非常適合將可讀性和可維護性作為優先事項的項目。但是，它們可能不是每個項目的最佳選擇。如果您的團隊不熟悉流利的API模式，則可能需要一些時間才能習慣它。此外，流利的API如果不正確使用會使調試變得更加困難。與任何設計模式一樣，在決定使用Fluent API之前考慮您的項目和團隊的需求很重要。

>

以上是JavaScript就像老闆：了解流利的API的詳細內容。更多資訊請關注PHP中文網其他相關文章！