JavaScript：掌握流畅 API 的艺术

在设计 Babylon.js v2.0 时 （a 用于在网络上构建 3D 的库），我最近发现自己希望更多 API流畅——也就是说，我希望社区能够更容易地阅读， 理解并以工作为基础，同时花更少的时间在技术文档上。

在本教程中，我将介绍流畅的 API：要考虑什么、如何 编写它们，以及跨浏览器性能影响。

什么是 Fluent 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 上确定我是否需要关注 性能。

这是结果 我得到：

• 在 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

这可能会让你有点惊讶，但是微软 有很多关于许多开源 JavaScript 主题的免费学习内容，我们正在 随着 Microsoft Edge 的到来，我们的使命是创造更多东西。看看我自己的：

• 使用 HTML5 和 WebGL 3D 简介 巴比伦.JS
• 使用以下命令构建单页应用程序 ASP.NET 和 AngularJS
• HTML 中的尖端图形

或者我们团队的学习系列：

• 实用的性能技巧，让您的 HTML/JavaScript Faster（由七部分组成的系列，从响应式设计到 休闲游戏到性能优化）
• 现代网络平台快速入门（基础知识 HTML、CSS 和 JavaScript）
• 开发通用 Windows 应用程序 HTML 和 JavaScript Jump Start（使用您已经创建的 JS 构建一个应用程序）

以及一些免费工具：Visual Studio Community、Azure Trial 以及适用于 Mac、Linux 或 Windows 的跨浏览器测试工具 Windows。

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

以上是JavaScript：掌握流畅 API 的艺术的详细内容。更多信息请关注PHP中文网其他相关文章！