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.
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.
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:
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!
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:
Or our team’s learning series:
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!