JavaScript就像老板：了解流利的API

钥匙要点

JavaScript中的
• fluent API允许通过在每个函数中返回“此”对象来实现函数调用的链接，从而允许更具可读性和可理解的代码。这使得代码更加直观，更易于调试，尤其是在处理复杂的函数调用序列时。 在不同浏览器（Chrome，Firefox，IE）上进行性能测试表明，使用Fluent API不会显着影响性能。在某些情况下，流利的API甚至比常规API快，表明可以使用它们而不担心性能损失。 Fluent API不仅适用于JavaScript，而且可以与任何JavaScript库或框架一起使用。许多流行的库和框架（例如JQuery）已经使用Fluent API来使其方法更具可读性和表现力。但是，考虑项目的需求以及团队对流利的API模式的熟悉程度，应明智地使用它们。
• >
本文是Microsoft的Web开发技术系列的一部分。感谢您支持使SitietPoint成为可能的合作伙伴。 在设计Babylon.js v2.0（网络上的3D库）时，我最近发现自己希望更多的API流利 - 也就是说，我希望社区能够更轻松地阅读，理解和建立在技​​术文档中花费更少的时间的工作。在本教程中，我将浏览流利的API-要考虑什么，如何编写它们以及跨浏览器的性能。
是什么使API流利？

> 如本Wikipedia文章所述，

>流利的API使您可以通过返回该对象来调用链接函数。如果您不知道此关键字在JavaScript中的工作方式，我建议阅读这篇很棒的文章。 我们可以轻松地创建一个流利的API：

如您所见，技巧只是返回该对象（在这种情况下对当前实例的引用）以允许链条继续。 然后，我们可以链接电话：

在尝试与Babylon.js做同样的事情之前，我想确保这不会产生某些性能问题。

所以我做了一个基准！

>

您可以看到foo和foo2做完全相同的事情。唯一的区别是foo可以被束缚，而foo2不能。

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

>

显然呼叫链不同：

和：

<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}</span>

给定此代码，我将其运行在Chrome，Firefox和IE上，以确定我是否必须关注性能。

，这是我得到的结果：

• 在Chrome中，常规API比Fluent API慢6％ 在Firefox中，两个API几乎都以相同的速度运行（Fluent API慢1％）
> 在IE中，两个API几乎都以相同的速度运行（流利的API慢2％）
• >
• >我在函数（Math.cos）中添加了一个操作，以模拟该函数完成的某种处理。

如果我删除了所有内容并保留返回语句，则在所有浏览器上都没有区别（实际上只有一两个毫秒，只需10,000,000次尝试）。您可以在浏览器中自己对其进行测试。而且，如果您没有方便的设备，那么Modern.ie上有很多免费工具。 只是不要对真实设备进行虚拟机测试虚拟机。

所以我的结论是：这是一个！

>

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

>！

与JavaScript更多动手

>这可能会让您感到惊讶，但是微软在许多开源JavaScript主题上拥有大量免费学习，我们的任务是随着Project Spartan的到来而创造更多的东西。查看我自己的：

WebGL 3D和HTML5和Babylon.js

简介

>使用ASP.NET和AngularJS
• 构建单页应用程序 HTML
中的尖端边缘图形
或我们团队的学习系列：

实用的性能提示，使您的HTML/JavaScript更快（从响应式设计到休闲游戏再到绩效优化的七部分系列）

>现代Web平台Jumpstart（HTML，CSS和JS的基本原理）

>
• >使用HTML和JavaScript Jumpstart开发通用Windows应用程序（使用已创建的JS来构建应用程序）
• 和一些免费工具：Visual Studio社区，Azure试用和Mac，Linux或Windows的跨浏览器测试工具。
>
• 本文是Microsoft的Web Dev技术系列的一部分。我们很高兴与您共享Spartan项目及其新的渲染引擎。在Modern.ie上获取免费的虚拟机或远程测试。

经常询问有关JavaScript中流利API的问题

> JavaScript中的流利API是什么？它涉及将链接方法一起使用的方式，就像句子或一系列说明一样。这是通过确保每种方法返回对象的，允许从上一个方法的结果立即调用另一种方法来实现的。流利的API可以使您的代码更清洁，更直观，尤其是在处理复杂的功能调用序列时。

>如何在JavaScript中创建流利的API？

>在JavaScript中创建流利的API涉及设计您的方法以返回其属于其对象。这使您可以将方法链接在一起。例如，考虑一个用方法“ startEngine”，“ Accelerate”和“ Stop”的对象“汽车”。如果这些方法中的每一种都返回“此”（汽车对象），则可以像这样将它们链接在一起：car.startengine（）。accelerate（）。stop（）。 API？

流利的API可以使您的代码更易读和更易于维护。通过将方法链接在一起，您可以以读取句子的方式表达复杂的操作。这可以使您的代码易于理解和调试。流利的API也可以使您的代码更具表现力和灵活性，从而使您可以创建更强大的抽象。

是否有使用fluent apis的缺点？ ，如果不正确使用，它们也可以使调试变得更加困难。由于方法调用被链接在一起，因此一种方法的问题会影响链中的所有后续方法。此外，对于不熟悉该模式的人，流利的API有时可能不太直观。

我可以使用带有异步代码的流利API？

是的，您可以使用流利的API，使用异步代码使用流利的API ，但这可能更复杂。您需要确保链中的每种方法都返回承诺，从而使您可以使用“ .then（）”将链方法一起使用。另外，您可以使用异步/等待语法来编写看起来同步的异步代码，这可以使您的流利的API易于阅读和理解。

>流利的API与Jav​​aScript中的其他设计模式相比如何？ Fluent API是一种侧重于可读性和表现力的设计模式。它可以与其他设计模式（例如构建器模式）进行比较，该模式还旨在使代码更易读和更易于使用。但是，尽管构建器模式着重于逐步构造复杂对象，但Fluent API着重于使方法调用可链接，以链接用于更可读的操作流。

是否可以与JavaScript库和框架一起使用Fluent API？ >

是的，流利的API可以与任何JavaScript库或框架一起使用。许多流行的库和框架（例如JQuery和Lodash）已经使用Fluent API来使他们的方法更具可读性和表现力。

>如何调试流利的API？棘手，因为方法调用被链在一起。但是，您可以在方法中使用Console.LOG语句来记录其输出。此外，使用JavaScript调试器可以帮助您逐步浏览代码，并在链条中的每个步骤中查看对象的状态。

>流利的API可以提高性能吗？

流利的API主要是关于改善代码的可读性和可维护性，而不是性能。但是，通过使您的代码更易于阅读和理解，流利的API可以帮助您更轻松地发现和修复性能问题。

Fluent API是否适合每个项目？非常适合将可读性和可维护性作为优先事项的项目。但是，它们可能不是每个项目的最佳选择。如果您的团队不熟悉流利的API模式，则可能需要一些时间才能习惯它。此外，流利的API如果不正确使用会使调试变得更加困难。与任何设计模式一样，在决定使用Fluent API之前考虑您的项目和团队的需求很重要。

>

以上是JavaScript就像老板：了解流利的API的详细内容。更多信息请关注PHP中文网其他相关文章！