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 对象（引用当前实例

在本例中）以允许链继续。

如果您不知道

文章作者：迈克·韦斯特。

然后我们可以链式调用：

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 渲染引擎。免费

@ http://dev.modern.ie/。

以上就是JavaScript：掌握流畅 API 的艺术的详细内容，更多请关注双恒网络其它相关文章！