在设计 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 上确定我是否需要关注 性能。
立即学习“Java免费学习笔记（深入）”；
这是结果 我得到：
- 在 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/。
