dart
Współdziałanie Dart-JavaScript

Wprowadzenie

Wywoływanie funkcji globalnej

Załóżmy, że chcielibyśmy wywołać funkcję JavaScript JSON.stringify która odbiera obiekt, koduje go do ciągu JSON i zwraca go.

Musimy tylko napisać podpis funkcji, oznaczyć go jako zewnętrzny i @JS adnotacją @JS adnotacją:

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

Adnotacja @JS będzie @JS używana do oznaczania klas Dart, których chcielibyśmy również używać w JavaScript.

Zawijanie klas / przestrzeni nazw JavaScript

Załóżmy, że chcielibyśmy, aby owinąć Google Maps API JavaScript google.maps :

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

import "package:js/js.dart";

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

Mamy teraz klasę Map Dart, która odpowiada klasie JavaScript google.maps.Map .

Uruchomienie new Map(someLocation) w Dart spowoduje wywołanie new google.maps.Map(location) w JavaScript.

Pamiętaj, że nie musisz nazywać swojej klasy Dart taką samą jak klasą JavaScript:

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

Klasa Dart Location odpowiada klasie google.maps.LatLng .

Używanie niespójnych nazw jest odradzane, ponieważ mogą powodować zamieszanie.

Przekazywanie literałów obiektowych

W JavaScript powszechnie stosuje się przekazywanie literałów obiektów do funkcji:

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

Musimy stworzyć obiekt Dart, który reprezentuje literał obiektu i zawiera wszystkie jego pola:

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

  external factory Options({bool responsive});
}

Zauważ, że Options klasa Dart nie odpowiada żadnej z klas JavaScript. Jako taki musimy oznaczyć go adnotacją @anonymous .

Teraz możemy utworzyć kod pośredni dla oryginalnej funkcji printOptions i wywołać go za pomocą nowego obiektu Options:

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

printOptions(new Options(responsive: true));