Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Comprensión fluida de APIs en JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Mientras diseñaban Babylon.js v2.0 (una librería para la construcción de 3D en la web), recientemente encontré deseando que más APIs eran fluidas, es decir, ojalá la comunidad podría más fácilmente leer, comprender y construir sobre el trabajo mientras que el gasto menos tiempo en los docs tecnológicos.

En este tutorial, recorreré la API de Interfaz fluida: qué considerar, cómo escribirlas y las implicaciones de rendimiento entre navegadores.

¿Qué es una API fluida?

Should I create fluent APIs

Una API fluida, como se indica en este artículo de Wikipedia, es una implementación de una API orientada a objetos que tiene como objetivo proporcionar un código más legible. JQuery es un gran ejemplo de lo que una API fluida le permite hacer:

El fluido API le permite encadenar las llamadas de función devolviendo este objeto.

Podemos crear fácilmente una API fluida como esta:

Como puede ver, el truco es simplemente devolver el objeto this (referencia a la instancia actual en este caso) para permitir que la cadena continúe.

Si no sabes cómo funciona la palabra clave "this" en JavaScript, te recomiendo que leas este gran artículo de Mike West.

Podemos entonces encadenar las llamadas:

Antes de intentar hacer lo mismo con Babylon.js, quería estar seguro de que esto no generaría algunos problemas de rendimiento.

¿Qué pasa con el rendimiento?

¡Así que hice una prueba de rendimiento!

Como puedes ver, foo y foo2 hacen exactamente lo mismo. La única diferencia es que foo puede ser encadenado mientras que foo2 no puede.

Obviamente, la cadena de llamadas es diferente entre:

y

Dado este código, lo corrí en Chrome, Firefox e IE para determinar si tengo que preocuparme por el rendimiento.

Its all about performance

Y aquí están los resultados que obtuve:

  • En Chrome, la API normal es un 6% más lenta que la API fluida.
  • En Firefox, ambas API funcionan casi a la misma velocidad (la API fluida es 1% más lenta).
  • En IE, ambas API funcionan casi a la misma velocidad (la API fluida es 2% más lenta).

La cosa es que he añadido una operación en la función (Math.cos) para simular algún tipo de tratamiento realizado por la función.

Si elimino todo y sólo guardo la declaración return, en todos los navegadores no hay diferencia (en realidad sólo uno o dos milisegundos para 10.000.000 de intentos). Puede probar esto por tí mismo a través de los navegadores. Y si usted no tiene los dispositivos a mano, hay un montón de herramientas gratuitas en dev.modern.IE. Simplemente no pruebe una máquina virtual contra un dispositivo real.

Así que mi conclusión es: ¡Es un hay que hacerlo!

Una API fluida es genial—produce un código más legible y puede utilizarlo sin ningún problema o pérdida de rendimiento.

Más prácticas con JavaScript

Podría sorprenderte un poco, pero Microsoft tiene un montón de aprendizaje libre en muchos temas de código abierto de JavaScript, y estamos en una misión para crear mucho más con Microsoft Edge que se lanzara. Echale un vistazo a los mios:

O la serie de aprendizaje de nuestro equipo:

Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba de navegador diferentes para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología web dev de Microsoft. Estamos encantados de compartir Microsoft Edge y el nuevo motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o pruebe de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.