dart
Interoperabilitet för Dart-JavaScript

Introduktion

Ringa en global funktion

Anta att vi vill åberopa JavaScript-funktionen JSON.stringify som tar emot ett objekt, kodar det i en JSON-sträng och returnerar det.

Allt vi behöver göra är att skriva funktionssignaturen, markera den som extern och kommentera den med @JS kommentaren:

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

@JS anteckningen kommer att användas härifrån och ut för att markera Dart-klasser som vi också vill använda i JavaScript.

Inpackning av JavaScript-klasser / namnutrymmen

Anta att vi vill ta bort Google Maps JavaScript API google.maps :

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

import "package:js/js.dart";

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

Vi har nu klassen Map Dart som motsvarar JavaScript google.maps.Map klassen.

Att köra new Map(someLocation) i Dart påkallar new google.maps.Map(location) i JavaScript.

Observera att du inte behöver namnge din Dart-klass samma som JavaScript-klassen:

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

Klassen Location Dart motsvarar klassen google.maps.LatLng .

Att använda inkonsekventa namn avskräcks eftersom de kan skapa förvirring.

Passerar bokstavsobjekt

Det är vanligt i JavaScript att skicka objektlitteratur till funktioner:

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

Vad vi måste göra är att skapa ett Dart-objekt som representerar objektet bokstavligt och innehåller alla dess fält:

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

  external factory Options({bool responsive});
}

Observera att klassen Options Dart inte motsvarar någon JavaScript-klass. Som sådant måste vi markera det med den @anonymous anteckningen.

Nu kan vi skapa en stubb för den ursprungliga printOptions-funktionen och kalla den med ett nytt alternativ-objekt:

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

printOptions(new Options(responsive: true));