dart
다트 - 자바 스크립트 상호 운용성

소개

전역 함수 호출

객체를받는 JSON.stringify JavaScript 함수를 호출하여 JSON 문자열로 인코딩하여 반환한다고 가정합니다.

우리가해야 할 일은 함수 서명을 작성하고 외부로 표시 한 다음 @JS 주석으로 주석을 추가하는 것입니다.

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

@JS 주석은 여기서부터 자바 스크립트에서도 사용하고 싶은 Dart 클래스를 표시하는 데 사용됩니다.

JavaScript 클래스 / 네임 스페이스 배치

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();
}

이제 JavaScript google.maps.Map 클래스에 해당하는 Map Dart 클래스가 google.maps.Map .

Dart에서 new Map(someLocation) 를 실행하면 자바 스크립트에서 new google.maps.Map(location) 이 호출됩니다.

Dart 클래스의 이름을 JavaScript 클래스와 동일하게 지정할 필요는 없습니다.

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

Location 다트 클래스는 google.maps.LatLng 클래스에 해당 google.maps.LatLng .

불일치하는 이름을 사용하는 것은 혼란을 야기 할 수 있으므로 권장하지 않습니다.

객체 리터럴 전달

JavaScript에서 함수에 객체 리터럴을 전달하는 것은 일반적인 관행입니다.

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

우리가해야할 일은 객체 리터럴을 표현하고 모든 필드를 포함하는 다트 객체를 만드는 것입니다 :

// 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));