fluent api
本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
在设计Babylon.js v2.0 (用于在Web上构建3D的库)时,我最近发现自己希望更多的API能够流利使用 -也就是说,我希望社区可以在此期间更轻松地阅读,理解和建立工作在技术文档上花费更少的时间。 在本教程中,我将逐步介绍Fluent API-需要考虑的内容,如何编写它们以及跨浏览器性能的含义。
是什么使API流利?
如本Wikipedia文章所述,流利的API是面向对象的API的实现,旨在提供更具可读性的代码。 例如,jQuery是流利的API允许您执行的一个很好的示例:
$('<div></div>')
.html("Fluent API are cool!")
.addClass("header")
.appendTo("body");
流畅的API可让您通过返回this
对象来链接函数调用。 如果您不知道this关键字在JavaScript中的工作方式,建议阅读这篇很棒的文章 。
我们可以轻松地创建一个流畅的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
对象(在这种情况下,是对当前实例的引用)以允许链继续。
然后,我们可以链接呼叫:
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
)中添加了一个操作,以模拟该函数完成的某种处理。
如果我删除所有内容并仅保留return
语句,则在所有浏览器上都没有区别(实际上10,000,000次尝试仅需1或2毫秒)。 您可以在浏览器中自己进行测试。 而且,如果您没有方便使用的设备,则modern.IE上有很多免费工具 。 只是不要对真实设备执行虚拟机测试。
所以我的结论是:可以!
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
流利的API很棒,它们产生的代码更具可读性,您可以使用它们而不会出现任何问题或性能损失!
使用JavaScript进行更多操作
这可能会让您感到有些惊讶,但是Microsoft在许多开源JavaScript主题上有大量免费学习知识,并且我们的使命是随着Project Spartan的到来创建更多内容。 看看我自己的:
或我们团队的学习系列:
- 使您HTML / JavaScript更快的实用性能提示 (从响应设计到休闲游戏到性能优化的七部分系列)
- 现代Web平台JumpStart (HTML,CSS和JS的基础知识)
- 使用HTML和JavaScript JumpStart开发通用Windows应用程序 (使用已经创建的JS来构建应用程序)
还有一些免费工具: Visual Studio社区 , Azure试用版以及用于Mac,Linux或Windows的跨浏览器测试工具 。
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享Project Spartan及其新的渲染引擎 。 获取免费的虚拟机或者在你的Mac,iOS设备,Android或Windows设备上远程测试modern.IE 。
翻译自: https://www.sitepoint.com/javascript-like-boss-understanding-fluent-apis/
fluent api