dart
Dart-JavaScript-interoperabiliteit

Invoering

Een globale functie oproepen

Stel dat we de JavaScript-functie JSON.stringify die een object ontvangt, het in een JSON-string codeert en retourneert.

Het enige wat we moeten doen is de functiehandtekening schrijven, deze markeren als extern en deze annoteren met de @JS annotatie:

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

De @JS annotatie zal vanaf hier worden gebruikt om Dart-klassen te markeren die we ook in JavaScript willen gebruiken.

JavaScript-klassen / naamruimten inpakken

Stel dat we de 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();
}

We hebben nu de Map Dart-klasse die overeenkomt met de JavaScript-klasse google.maps.Map .

Het uitvoeren van new Map(someLocation) in Dart roept new google.maps.Map(location) in JavaScript op.

Merk op dat u uw Dart-klasse niet dezelfde naam hoeft te geven als de JavaScript-klasse:

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

De klasse Location Dart komt overeen met de klasse google.maps.LatLng .

Het gebruik van inconsistente namen wordt afgeraden, omdat deze voor verwarring kunnen zorgen.

Letterlijke objecten passeren

Het is in JavaScript gebruikelijk om objectliteralen door te geven aan functies:

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

Wat we moeten doen is een Dart-object maken dat het object letterlijk vertegenwoordigt en alle velden bevat:

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

  external factory Options({bool responsive});
}

Merk op dat de Options Dart-klasse niet overeenkomt met enige JavaScript-klasse. Als zodanig moeten we het markeren met de @anonymous annotatie.

Nu kunnen we een stub maken voor de oorspronkelijke functie printOptions en deze aanroepen met een nieuw object Options:

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

printOptions(new Options(responsive: true));