dart
Dart-JavaScriptの相互運用性

前書き

グローバル関数を呼び出す

オブジェクトを受け取ってJSON文字列にエンコードして返すJSON.stringifyというJavaScript関数を呼び出すとします。

私たちがしなければならないことは、関数のシグネチャを書き、外部としてマークし、 @JSアノテーションで注釈を付けることです。

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

@JSアノテーションはここからJavaScriptで使用したいDartクラスをマークするために使用されます。

JavaScriptクラス/名前空間の折り返し

Google Maps JavaScript API google.mapsをラップしたいとしgoogle.maps 。

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

import "package:js/js.dart";

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

これで、JavaScriptのgoogle.maps.Mapクラスに対応するMap Dartクラスがgoogle.maps.Map 。

Dartでnew Map(someLocation)実行すると、JavaScriptでnew google.maps.Map(location)が呼び出されます。

DartクラスをJavaScriptクラスと同じ名前にする必要はありません。

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

Location Dartクラスは、 google.maps.LatLngクラスに対応してい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});
}

Options DartクラスはJavaScriptクラスに対応していないことに注意してください。 @anonymousアノテーションでマークする必要があります。

これで元のprintOptions関数のスタブを作成し、新しいOptionsオブジェクトで呼び出すことができます：

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

printOptions(new Options(responsive: true));