像老板一样的JavaScript：了解Fluent API

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

在设计Babylon.js v2.0 （用于在Web上构建3D的库）时，我最近发现自己希望流利的 API更加丰富 -也就是说，我希望社区能够在工作期间更轻松地阅读，理解和构建在技​​术文档上花费更少的时间。 在本教程中，我将逐步介绍Fluent API –需要考虑的内容，如何编写它们以及跨浏览器性能的含义。

是什么使API流利？

如Wikipedia文章所述，流利的API是面向对象的API的实现，旨在提供更具可读性的代码。 例如，jQuery是流利的API允许您执行的一个很好的示例：

$('<div></div>')
     .html("Fluent API are cool!")
     .addClass("header")
     .appendTo("body");

流畅的API可让您通过返回this对象来链接函数调用。 如果您不知道this关键字在JavaScript中的工作方式，建议阅读这篇很棒的文章 。

我们可以轻松地创建一个流畅的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对象（在这种情况下，是对当前实例的引用）以允许链继续。

然后，我们可以链接呼叫：

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次尝试仅需1或2毫秒）。 您可以在浏览器中自己进行测试。 而且，如果您没有随身携带的设备，则modern.IE上有很多免费工具 。 只是不要对真实设备执行虚拟机测试。

所以我的结论是：可以！

流利的API很棒，它们产生的代码更具可读性，您可以使用它们而不会出现任何问题或性能损失！

使用JavaScript进行更多操作

这可能会让您感到有些惊讶，但是Microsoft在许多开源JavaScript主题上有大量免费的学习知识，并且我们的使命是随着Project Spartan的到来创建更多内容。 看看我自己的：

• WebGL 3D和HTML5和Babylon.js简介
• 使用ASP.NET和AngularJS构建单页应用程序
• HTML中的尖端图形

或我们团队的学习系列：

• 使您的HTML / JavaScript更快的实用性能提示 （从响应设计到休闲游戏到性能优化的7个系列文章）
• 现代Web平台JumpStart （HTML，CSS和JS的基础知识）
• 使用HTML和JavaScript JumpStart开发通用Windows应用程序 （使用已经创建的JS来构建应用程序）

还有一些免费工具： Visual Studio社区 ， Azure试用版以及用于Mac，Linux或Windows的跨浏览器测试工具 。

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Project Spartan及其新的渲染引擎 。 获取免费的虚拟机或者在你的Mac，iOS设备，Android或Windows设备上远程测试modern.IE 。

From: https://www.sitepoint.com/javascript-like-boss-understanding-fluent-apis/