JavaScript: Mastering the Art of Fluent APIs

When designing Babylon.js v2.0 (a library for building 3D on the web), I recently found myself wishing for more APIfluent - That said, I want it to be easier for the community to read, Understand and build on your work while spending less time on technical documentation.

In this tutorial, I’ll cover fluent APIs: what to consider, how to Writing them, and the cross-browser performance impact.

What is Fluent API?

The fluent API, as described in this Wikipedia article, is Object-oriented API designed to provide more readable code. JQuery is a great example of what a fluent API allows you to do:

 $('<div></div>')

     .html("Fluent API are cool!")

     .addClass("header")

     .appendTo("body");

Smooth API allows you to link The function is called by returning this object.

We can easily create one Fluent API like this:

var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}

As you can see, the trick Just returns the this object (referencing the current instance in this case) to allow the chain to continue.

If you don’t know How the "this" keyword works in JavaScript, I recommend reading this great article Author of the article: Mike West.

Then we can chain calls:

var obj = new MyClass(5);

obj.foo(1).foo(2).foo(3);

Before trying to do the following Same as Babylon.js, I want to make sure this doesn't generate some Performance issues.

How is the performance?

So I did a benchmark test!

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";

as You can see that foo and foo2 do exactly the same thing. only The difference is that foo can be linked, while foo2 cannot.

Obviously the call chain The difference is:

obj.foo(1).foo(2).foo(3);

and

obj2.foo2(1);

obj2.foo2(2);

obj2.foo2(3);

Given this code, I ran it Find out if I care on Chrome, Firefox and IE performance.

This is the result I get:

• On Chrome, the regular API is 6% slower than the Fluent API.
• On Firefox, Both APIs run almost identically (Fluent API is 1% slower).
• On IE, Both APIs run almost identically (Fluent API is 2% slower).

The problem is that I added an operation in the function (Math.cos) Simulates some kind of processing done by a function.

If I delete everything Just keep the return statement, it doesn't work on all browsers The difference (actually only one to two milliseconds over 10,000,000 attempts). you You can test it yourself across browsers. if you don't have The device is convenient and there are many free tools on dev.modern.IE. Just don’t perform performance testing on virtual machines For real devices.

So my conclusion is: come on!

The fluent API is great - it produces more readable code, and you can use it without any issues or performance loss!

More practices JavaScript

This may surprise you a little, but Microsoft There is a lot of free learning content on many open source JavaScript topics, and we are With the arrival of Microsoft Edge, our mission is to create more. Check out my own:

• Introduction to 3D using HTML5 and WebGL Babylon.JS
• Build a single page application using the following commands ASP.NET and AngularJS
• Cutting-edge graphics in HTML

Or our team’s learning series:

• Practical performance tips to make your HTML/JavaScript Faster (a seven-part series from responsive design to Casual games to performance optimization)
• Quick Start with Modern Network Platforms (Basics HTML, CSS and JavaScript)
• Develop universal Windows applications HTML and JavaScript Jump Start (using the JS you've already created Build an application)

Plus some free tools: Visual Studio Community, Azure Trial, and cross-browser testing tools for Mac, Linux, or Windows Windows.

This article is part of network development technology Series from Microsoft. We're excited to share with you Microsoft Edge and the new EdgeHTML rendering engine. free Virtual machine or remote testing on Mac, iOS, Android or Windows devices @http://dev.modern.ie/.

The above is the detailed content of JavaScript: Mastering the Art of Fluent APIs. For more information, please follow other related articles on the PHP Chinese website!