dart
Interoperabilità Dart-JavaScript

introduzione

Chiamare una funzione globale

Supponiamo di voler invocare la funzione JavaScript JSON.stringify che riceve un oggetto, lo codifica in una stringa JSON e lo restituisce.

Tutto quello che dovremmo fare è scrivere la firma della funzione, contrassegnarla come esterna e annotarla con l'annotazione @JS :

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

L'annotazione @JS verrà utilizzata da qui in avanti per contrassegnare le classi Dart che vorremmo utilizzare anche in JavaScript.

Disposizione di classi JavaScript / spazi dei nomi

Supponiamo di voler racchiudere l'API JavaScript di Google Maps google.maps :

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

import "package:js/js.dart";

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

Ora abbiamo la classe Map Dart che corrisponde alla classe JavaScript google.maps.Map .

L'esecuzione di una new Map(someLocation) in Dart invocherà la new google.maps.Map(location) in JavaScript.

Si noti che non è necessario assegnare un nome alla classe Dart uguale alla classe JavaScript:

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

La classe Dart Location corrisponde alla classe google.maps.LatLng .

L'uso di nomi incoerenti è scoraggiato in quanto possono creare confusione.

Passando ai letterali degli oggetti

È prassi comune in JavaScript passare i letterali degli oggetti alle funzioni:

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

Quello che dobbiamo fare è creare un oggetto Dart che rappresenti il ​​letterale dell'oggetto e contenga tutti i suoi campi:

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

  external factory Options({bool responsive});
}

Si noti che la classe Dart Options non corrisponde a nessuna classe JavaScript. Come tale, dobbiamo contrassegnarlo con l'annotazione @anonymous .

Ora possiamo creare uno stub per la funzione printOptions originale e chiamarlo con un nuovo oggetto Options:

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

printOptions(new Options(responsive: true));