了解JavaScript中的Fluent API

在设计Babylon.js v2.0时 （一个用于在Web上构建3D的库），最近我发现自己希望流利的 API越来越多-也就是说，我希望社区可以更轻松地阅读，理解和构建工作，同时减少在技术文档上的时间。

在本教程中，我将逐步讲解流利的API：应考虑的内容，如何编写它们以及跨浏览器性能的影响。

什么是Fluent API？

如Wikipedia文章所述， 流利的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 ）中添加了一个操作，以模拟该函数Math.cos某种处理。

如果我删除所有内容并仅保留return语句，则在所有浏览器上都没有区别（实际上10,000,000次尝试仅需1或2毫秒）。 您可以在浏览器中自己进行测试。 而且，如果您没有方便使用的设备，则dev.modern.IE上有很多免费工具 。 只是不要针对真实设备对虚拟机进行性能测试。

所以我的结论是：可以！

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

使用JavaScript进行更多操作

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

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

或我们团队的学习系列：

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

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

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享 Microsoft Edge 和新的 EdgeHTML渲染引擎 。 获取免费的虚拟机或在Mac，iOS，Android或Windows设备上@ http://dev.modern.ie/ 进行远程测试 。

翻译自: https://code.tutsplus.com/tutorials/understanding-fluent-apis-in-javascript--cms-24429