dart
Совместимость Dart-JavaScript

Вступление

Вызов глобальной функции

Предположим, мы хотели бы вызвать функцию JavaScript JSON.stringify которая получает объект, кодирует его в строку JSON и возвращает ее.

Все, что нам нужно сделать, это написать подпись функции, пометить ее как внешнюю и аннотировать ее с @JS аннотации @JS :

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

Аннотация @JS будет использоваться здесь, чтобы отметить классы Дарта, которые мы хотели бы использовать в JavaScript.

Объединение классов JavaScript / пространств имен

Предположим, мы хотели бы google.maps API 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();
}

Теперь у нас есть класс карты Dart, который соответствует классу JavaScript google.maps.Map .

Запуск new Map(someLocation) в Dart вызовет new google.maps.Map(location) в JavaScript.

Обратите внимание, что вам не нужно называть свой класс Dart таким же, как класс JavaScript:

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

Класс Dart Location соответствует классу google.maps.LatLng .

Использование несогласованных имен обескураживается, поскольку они могут создавать путаницу.

Передача объектных литералов

В JavaScript распространена практика передачи объектных литералов в функции:

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

Нам нужно создать объект Dart, который представляет объектный литерал и содержит все его поля:

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

  external factory Options({bool responsive});
}

Обратите внимание, что класс Dart Options не соответствует какому-либо классу JavaScript. Таким образом, мы должны отметить это @anonymous аннотацией.

Теперь мы можем создать заглушку для исходной функции printOptions и вызвать ее с помощью нового объекта Options:

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

printOptions(new Options(responsive: true));