dart
Interopérabilité Dart-JavaScript

Introduction

Appeler une fonction globale

Supposons que nous souhaitons appeler la fonction JavaScript JSON.stringify qui reçoit un objet, la code dans une chaîne JSON et la renvoie.

Il suffit d'écrire la signature de la fonction, de la marquer comme externe et de l'annoter avec l'annotation @JS :

 @JS("JSON.stringify")
external String stringify(obj);

L'annotation @JS sera utilisée à partir de @JS pour marquer les classes Dart que nous aimerions utiliser également dans JavaScript.

Emballage de classes / espaces de noms JavaScript

Supposons que nous souhaitons google.maps API JavaScript Google Maps google.maps :

@JS('google.maps')
library maps;

import "package:js/js.dart";

@JS()
class Map {
  external Map(Location location);
  external Location getLocation();
}

Nous avons maintenant la classe Map Dart qui correspond à la classe JavaScript google.maps.Map .

L'exécution d'une new Map(someLocation) dans Dart lancera un new google.maps.Map(location) dans JavaScript.

Notez que vous n'avez pas à nommer votre classe Dart comme la classe JavaScript:

@JS("LatLng")
class Location {
  external Location(num lat, num lng);
}

La classe Location Dart correspond à la classe google.maps.LatLng .

L'utilisation de noms incohérents est déconseillée car elle peut créer de la confusion.

Littéraux d'objet en passant

Il est courant en JavaScript de transmettre des littéraux d'objet à des fonctions:

// JavaScript
printOptions({responsive: true});
Unfortunately we cannot pass Dart Map objects to JavaScript in these cases.

Ce que nous devons faire, c'est créer un objet Dart qui représente le littéral d'objet et contient tous ses champs:

// Dart
@JS()
@anonymous
class Options {
  external bool get responsive;

  external factory Options({bool responsive});
}

Notez que la classe Options Dart ne correspond à aucune classe JavaScript. En tant que tel, nous devons le marquer avec l'annotation @anonymous .

Maintenant, nous pouvons créer un stub pour la fonction printOptions originale et l'appeler avec un nouvel objet Options:

// Dart
@JS()
external printOptions(Options options);

printOptions(new Options(responsive: true));