Javascript gọi hàm của Dart và Dart gọi hàm Javascript

package:js/js.dart giới thiệu và cài đặt

Gói này cung cấp các chức năng để bạn có thể gọi các hàm JavaScript từ Dart và ngược lại gọi các hàm của Dart trong JavaScript.

Gói package:js/js.dart là mở rộng của thư viện chuẩn dart:js, nên khi sử dụng bạn sẽ không nạp thư viện dart:js nữa mà nạp package:js/js.dart

Để cài đặt, cần khai báo trong pubspec.yaml

dependencies:
  js: ^0.6.2
  ...

Sau đó thực hiện lệnh

pub get

Lúc này trong file code nào cần sử dụng thư viện thì khai báo

import 'package:js/js.dart';

Dart gọi hàm Javascript

Bạn có thể gọi hàm Javascript từ Dart, ví dụ để gọi hàm JSON.stringify thì khai báo

@JS()           /// Thiết lập ngữ cảnh đến `window`
library mylib   /// Khai báo thư viện, tên thư viện tùy đặt

@JS('JSON.stringify')
external String stringify(Object obj);

Lúc này trong Dart có thể dùng hàm stringify(object)

Gọi jQuery thì khai báo như sau, ví dụ cần dùng hàm css, animate, fadeOut

@JS()
class jQuery {
  external factory jQuery(String selector);
  external int get length;
  external jQuery css(Map options);
  external jQuery animate(Map options);
  external jQuery fadeOut(Map options);
}

JavaScript gọi hàm của Dart

Giả sử bạn mong muốn có một hàm JavaScript với tên tonghaiso(a,b), nghĩa là có thể gọi hàm như sau:

<script>
    tonghaiso(1,3);
    //Hoặc
    window.tonghaiso(1,3)
</script>

Vấn đề là khi bạn gọi hàm đó từ JavaScript thì nó sẽ gọi một hàm có tên là _sum2number(a, b) trong Dart

Vậy sẽ xây dựng mã trong Dart như sau:

@JS()           /// Thiết lập ngữ cảnh đến `window`
library mylib   /// Khai báo thư viện, tên thư viện tùy đặt

import 'package:js/js.dart';

/// Gán hàm với tên tonghaiso để gọi được từ Javascript `window.tonghaiso(a,b)`
@JS('tonghaiso')
external set _tonghaiso(double Function(double a, double b) f);

double _sum2number(double a, double b) {
  var s = (a + b);
  window.alert(s.toString());
  return s;
}

/// Nếu muốn dart gọi được hàm tonghaiso thì thêm vào
/// @JS()
/// external void tonghaiso(double a, double b);


void main() {
    // Thiết lập cho phép `tonghaiso()` or `window.tonghaiso()`.
   _tonghaiso = allowInterop(_sum2number);
}