JavaScript：掌握流畅 API 的艺术

WBOY 原创: 2023-09-04 08:09:05 1145浏览

在设计 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

相关文章

￥229

￥800

￥800

￥800

￥800

￥1200