在設計 Babylon.js v2.0 時 （a 用於在網路上建立 3D 的庫），我最近發現自己希望更多 API流暢——也就是說，我希望社群能夠更輕鬆地閱讀， 理解並以工作為基礎，同時花更少的時間在技術文件上。
在本教學中，我將介紹流暢的 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 上確定我是否需要關注 性能。
這是結果 我得到：
問題是我在函數 (Math.cos) 中新增了一個操作
模擬函數所做的某種處理。
如果我刪除所有內容
只要保留 return 語句，在所有瀏覽器上都沒有
差異（實際上 10,000,000 次嘗試只有一到兩毫秒）。你
可以跨瀏覽器親自測試一下。如果您沒有
設備方便，dev.modern.IE 上有許多免費工具。只是不要對虛擬機器進行效能測試
針對真實設備。
所以我的結論是： 加油！
#流暢的 API 很棒 - 它會產生更可讀的程式碼，並且您可以使用它而不會出現任何問題或效能損失！
這可能會讓你有點驚訝，但微軟 有很多關於許多開源 JavaScript 主題的免費學習內容，我們正在 隨著 Microsoft Edge 的到來，我們的使命是創造更多東西。看看我自己的：
或是我們團隊的學習系列：
以及一些免費工具：Visual Studio Community、Azure Trial 以及適用於 Mac、Linux 或 Windows 的跨瀏覽器測試工具 Windows。
本文是網路開發技術的一部分 來自微軟的系列。我們很高興與您分享 Microsoft Edge 和新的 EdgeHTML 渲染引擎。免費 虛擬機器或在 Mac、iOS、Android 或 Windows 裝置上進行遠端測試 @ http://dev.modern.ie/。
以上是JavaScript：掌握流暢 API 的藝術的詳細內容。更多資訊請關注PHP中文網其他相關文章！
