dart
Dart-JavaScript-Interoperabilität

Einführung

Eine globale Funktion aufrufen

Angenommen, wir JSON.stringify die JavaScript-Funktion JSON.stringify die ein Objekt empfängt, in einen JSON-String codiert und es zurückgibt.

Wir müssen nur die Funktionssignatur schreiben, als extern kennzeichnen und mit der @JS Anmerkung versehen:

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

Die @JS Annotation wird ab jetzt verwendet, um Dart-Klassen zu markieren, die wir auch in JavaScript verwenden @JS .

Umbrechen von JavaScript-Klassen / Namespaces

Angenommen, wir google.maps die 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();
}

Wir haben jetzt die Map Dart-Klasse, die der JavaScript-Klasse google.maps.Map .

Das Ausführen einer new Map(someLocation) in Dart new google.maps.Map(location) die new google.maps.Map(location) in JavaScript auf.

Beachten Sie, dass Sie Ihre Dart-Klasse nicht wie die JavaScript-Klasse benennen müssen:

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

Die Location Dart-Klasse entspricht der google.maps.LatLng Klasse.

Von der Verwendung inkonsistenter Namen wird abgeraten, da dies zu Verwirrung führen kann.

Objektliterale übergeben

In JavaScript ist es üblich, Objektliterale an Funktionen zu übergeben:

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

Wir müssen ein Dart-Objekt erstellen, das das Objektliteral darstellt und alle seine Felder enthält:

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

  external factory Options({bool responsive});
}

Beachten Sie, dass die Options Dart-Klasse keiner JavaScript-Klasse entspricht. Als solches müssen wir es mit der @anonymous Anmerkung @anonymous .

Jetzt können wir einen Stub für die ursprüngliche printOptions-Funktion erstellen und ihn mit einem neuen Options-Objekt aufrufen:

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

printOptions(new Options(responsive: true));