JavaScript：掌握流暢 API 的藝術

在設計 Babylon.js v2.0 時 （a 用於在網路上建立 3D 的庫），我最近發現自己希望更多 API流暢——也就是說，我希望社群能夠更輕鬆地閱讀， 理解並以工作為基礎，同時花更少的時間在技術文件上。

在本教學中，我將介紹流暢的 API：要考慮什麼、如何 編寫它們，以及跨瀏覽器效能影響。

什麼是 Fluent API？

流暢的 API，正如這篇 Wikipedia 文章所述，是 物件導向的 API，旨在提供更具可讀性的程式碼。 JQuery 是一個很好的例子，展示了流暢的 API 可以讓您做什麼：

 $('<div></div>')

     .html("Fluent API are cool!")

     .addClass("header")

     .appendTo("body");

流暢的 API 可讓您進行鏈接 透過傳回此物件來呼叫函數。

我們可以輕鬆建立一個 流暢的 API 像這樣：

var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}

正如你所看到的，技巧 只是傳回 this 物件（引用當前實例 在本例中）以允許鏈繼續。

如果您不知道 「this」關鍵字在 JavaScript 中的工作原理，我建議閱讀這篇很棒的文章 文章作者：麥克·韋斯特。

然後我們可以鍊式呼叫：

var obj = new MyClass(5);

obj.foo(1).foo(2).foo(3);

在嘗試執行以下操作之前 與 Babylon.js 相同，我想確保這不會產生一些 性能問題。

性能怎麼樣？

所以我做了一個基準測試！

var count = 10000000;



var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}



MyClass.prototype.foo2 = function (b) {

    // Do some complex work   

    this.a += Math.cos(b);

}



var start = new Date().getTime();

var obj = new MyClass(5);

obj.foo(1).foo(2).foo(3);

for (var index = 0; index < count; index++) {

    obj.foo(1).foo(2).foo(3);

}

var end = new Date().getTime();



var start2 = new Date().getTime();

var obj2 = new MyClass(5);

for (var index = 0; index < count; index++) {

    obj2.foo2(1);

    obj2.foo2(2);

    obj2.foo2(3);

}

var end2 = new Date().getTime();



var div = document.getElementById("results");



div.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<BR>";

div.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";

作為 您可以看到，foo 和 foo2 執行完全相同的操作。唯一的 差別在於 foo 可以鏈接，而 foo2 則不能。

顯然是呼叫鏈 之間的不同之處在於：

obj.foo(1).foo(2).foo(3);

和

obj2.foo2(1);

obj2.foo2(2);

obj2.foo2(3);

鑑於此程式碼，我運行了它 在 Chrome、Firefox 和 IE 上確定我是否需要關注 性能。

這是結果 我得到：

• 在 Chrome 上，常規 API 比 Fluent API 慢 6%。
• 在 Firefox 上， 兩個 API 的運行速度幾乎相同（Fluent API 慢 1%）。
• 在IE上， 兩個 API 的運行速度幾乎相同（Fluent API 慢 2%）。

問題是我在函數 (Math.cos) 中新增了一個操作 模擬函數所做的某種處理。

如果我刪除所有內容 只要保留 return 語句，在所有瀏覽器上都沒有 差異（實際上 10,000,000 次嘗試只有一到兩毫秒）。你 可以跨瀏覽器親自測試一下。如果您沒有 設備方便，dev.modern.IE 上有許多免費工具。只是不要對虛擬機器進行效能測試 針對真實設備。

所以我的結論是： 加油！

#流暢的 API 很棒 - 它會產生更可讀的程式碼，並且您可以使用它而不會出現任何問題或效能損失！

更多實踐 JavaScript

這可能會讓你有點驚訝，但微軟 有很多關於許多開源 JavaScript 主題的免費學習內容，我們正在 隨著 Microsoft Edge 的到來，我們的使命是創造更多東西。看看我自己的：

• 使用 HTML5 與 WebGL 3D 簡介 巴比倫.JS
• 使用以下命令建立單頁應用程式 ASP.NET 和 AngularJS
• HTML 中的尖端圖形

或是我們團隊的學習系列：

• 實用的性能技巧，讓您的 HTML/JavaScript Faster（由七個部分組成的系列，從響應式設計到 休閒遊戲到效能優化）
• 現代網路平台快速入門（基礎知識 HTML、CSS 和 JavaScript）
• 開發通用 Windows 應用程式 HTML 和 JavaScript Jump Start（使用您已經建立的 JS 建立一個應用程式）

以及一些免費工具：Visual Studio Community、Azure Trial 以及適用於 Mac、Linux 或 Windows 的跨瀏覽器測試工具 Windows。

本文是網路開發技術的一部分 來自微軟的系列。我們很高興與您分享 Microsoft Edge 和新的 EdgeHTML 渲染引擎。免費 虛擬機器或在 Mac、iOS、Android 或 Windows 裝置上進行遠端測試 @ http://dev.modern.ie/。

以上是JavaScript：掌握流暢 API 的藝術的詳細內容。更多資訊請關注PHP中文網其他相關文章！