dart
Interoperabilidad Dart-JavaScript

Introducción

Llamando a una función global

Supongamos que nos gustaría invocar la función de JavaScript JSON.stringify que recibe un objeto, lo codifica en una cadena JSON y lo devuelve.

Todo lo que tendríamos que hacer es escribir la firma de la función, marcarla como externa y anotarla con la anotación @JS :

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

La anotación @JS se usará de aquí en adelante para marcar las clases de Dart que también nos gustaría usar en JavaScript.

Envolviendo clases de JavaScript / espacios de nombres

Supongamos que nos gustaría envolver las API de Google Maps JavaScript google.maps :

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

import "package:js/js.dart";

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

Ahora tenemos la clase Map Dart que corresponde a la clase google.maps.Map JavaScript.

Ejecutar new Map(someLocation) en Dart invocará new google.maps.Map(location) en JavaScript.

Tenga en cuenta que no tiene que nombrar su clase de Dart igual que la clase de JavaScript:

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

La clase Location Dart corresponde a la clase google.maps.LatLng .

Se desaconseja el uso de nombres inconsistentes ya que pueden crear confusión.

Paso de literales de objeto.

Es una práctica común en JavaScript pasar objetos literales a funciones:

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

Lo que tenemos que hacer es crear un objeto Dart que represente el objeto literal y contenga todos sus campos:

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

  external factory Options({bool responsive});
}

Tenga en cuenta que la clase Dart de Options no corresponde a ninguna clase de JavaScript. Como tal debemos marcarlo con la anotación @anonymous .

Ahora podemos crear un código auxiliar para la función de impresión original y llamarlo con un nuevo objeto de Opciones:

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

printOptions(new Options(responsive: true));