Babel 5.4.0 : test de la nouvelle syntaxe function bind

Le transpilateur teste des propositions de ECMAScript 7

Le 18 mai 2015 à 13:10, par vermine

0PARTAGES

Babel 5.4.0 : test de la nouvelle syntaxe function bind
le transpilateur teste des propositions de ECMAScript 7

Babel est un transpileur ECMAScript 6. Il transforme votre code ES6 en code ES5. Ce qui signifie que vous pouvez commencer à utiliser dès maintenant les nouvelles fonctionnalités du langage sans devoir attendre leur support par les navigateurs.

Babel sait compiler et traduire les éléments suivants :

les raccourcis de fonction ;
les fonctions asynchrones ;
les classes ;
la destructuration ;
les décorateurs ;
let ;
etc.

Mais Babel, c'est également une interaction avec d'autres outils JavaScript (ou non) comme React, NodeJS, Rails, Browserify. Etant compatible avec les principaux navigateurs, Babel peut également être étendu par divers plugins.

Au cours des derniers mois, Babel a été bien accueilli dans plusieurs grandes communautés. On parlait de NodeJS, Rails et React mais nous pouvons également citer Ember, Backbone, AngularJS et bien d'autres. De plus, un intérêt particulier a été montré par Yahoo!, Atom, CloudFlare, etc. Notons par exemple son utilsation par Mozilla et Neflix.

L'équipe a annoncé la sortie de la version 5.4.0.

Elle introduit la syntaxe expérimentale du function bind avec le nouvel opérateur :: qui exécute la liaison de fonction et l'extraction de méthode. C'est l'utilisation d'une bibliothèque d'itération implémentée en tant que méthodes virtuelles :

Code javascript :

Sélectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
/* ES7 */ 
// Create bindings for just the methods that we need 
let { find, html } = jake; 
  
// Find all the divs with class="myClass", then get all of the 
// "p"s and replace their content. 
document.querySelectorAll("div.myClass")::find("p")::html("hahaha"); 
  
/* ES6 */ 
let _val; 
_val = document.querySelectorAll("div.myClass"); 
_val = find.call(_val, "p"); 
_val = html.call(_val, "hahaha");

C'est également l'affichage de la valeur éventuelle d'une promise sur la console :

Code javascript :

Sélectionner tout

1
2
3
4
5
/* ES7 */ 
Promise.resolve(123).then(::console.log); 
  
/* ES6 */ 
Promise.resolve(123).then(console.log.bind(console));

C'est aussi l'utilisation de l'extraction pour appeler une méthode d'objet lorsque survient un événement DOM :

Code javascript :

Sélectionner tout

1
2
3
4
5
/* ES7 */ 
$(".some-link").on("click", ::view.reset); 
  
/* ES6 */ 
$(".some-link").on("click", view.reset.bind(view));

Attention, cette syntaxe est expérimentale et ne doit pas être utilisée pour faire quelque chose d'important. Vous trouverez de plus amples informations ici.