在本教程中，我将介绍流畅的 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 和 angularjshtml 中的尖端图形或者我们团队的学习系列：
实用的性能技巧，让您的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 的艺术的详细内容。