像老板一样玩转 JavaScript：理解 Fluent API

David Catuhe

4.88/5 (9投票s)

2015 年 6 月 12 日

CPOL

3分钟阅读

15926

在本教程中，我将带您了解流畅 API – 需要考虑什么，如何编写它以及跨浏览器的性能影响。

在设计 babylon.js v2.0 (一个用于构建 Web 3D 的库)时，我最近发现自己希望更多 API 是流畅的 – 也就是说，我希望社区能够更轻松地阅读、理解并在此基础上进行构建，同时减少在技术文档上花费的时间。在本教程中，我将带您了解流畅 API – 需要考虑什么，如何编写它以及跨浏览器的性能影响。

一个流畅 API，正如这篇维基百科文章所述，是面向对象 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 对象（在这种情况下是对当前实例的引用），以允许链继续。

如果您不了解 JavaScript 中 "this" 关键字的工作原理，我建议阅读 Mike West 撰写的这篇优秀文章。

然后我们可以链式调用

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 比流畅 API 慢 6%
在 Firefox 上，两个 API 几乎以相同的速度运行（流畅 API 慢 1%）
在 IE 上，两个 API 几乎以相同的速度运行（流畅 API 慢 2%）

问题在于，我将一个操作添加到函数中 (Math.cos) 以模拟函数所做的一些处理。

如果我删除所有内容，只保留 "return" 语句，在所有浏览器上都没有区别（实际上对于 10,000,000 次尝试，只是一两毫秒）。您可以在各个浏览器中自行测试这一点。如果您手边没有设备，dev.modern.IE 上有很多免费工具。只是不要对虚拟机进行与真实设备的性能测试。 :)

所以我的结论是：可以开始了！

流畅 API 非常棒，它可以生成更易于阅读的代码，并且您可以毫无问题或性能损失地使用它!

像老板一样玩转 JavaScript：理解 Fluent API

更多关于 JavaScript 的实践