首頁 > 文章 > web前端 > JavaScript：掌握流暢 API 的藝術

JavaScript：掌握流暢 API 的藝術

WBOY原創: 2023-09-04 08:09:051571瀏覽

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

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

什麼是 Fluent API？

JavaScript：掌握流畅 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 上確定我是否需要關注性能。

JavaScript：掌握流畅 API 的艺术

這是結果我得到：

在 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：掌握流暢 API 的藝術

什麼是 Fluent API？

性能怎麼樣？

更多實踐 JavaScript

相關文章