如何使用新的 js 0.6.0 包将 Dart class 映射到 JS "class"?
How to map a Dart class to a JS "class" with the new js 0.6.0 package?
index.html
<!doctype html>
<html>
<head>
</head>
<script>
var Apple = function(type) {
this.type = type;
this.color = "red";
};
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
</script>
<body>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
index.dart
import 'dart:js' as js;
import 'dart:html' as dom;
import 'package:js/js.dart';
main() {
// this works fine
var apple = new js.JsObject(js.context['Apple'], ['Macintosh']);
print(apple.callMethod('getInfo', []));
print(new Apple().getInfo());
}
@Js() // about to being changed to @JS
class Apple {
external String get type;
external set type(String type);
external String get color;
external set color(String color);
external factory Apple(String type);
}
只需添加 @Js()
注释即可得到
Exception: 'dart:js': Failed assertion: line 393: 'p.isNamed' is not true.
Observatory listening at http://127.0.0.1:35293/
Internal error: Dart_Invoke expects library argument 'target' to be loaded.
更新
删除 external factory Apple(String type);
修复了异常。
现在我得到了
Observatory listening at http://127.0.0.1:38029/
red Macintosh apple
Exception: Class 'Apple' has no instance method 'getInfo'.
NoSuchMethodError: method not found: 'getInfo'
Receiver: Instance of 'Apple'
Arguments: [...]
Apple.getInfo
main
class 需要构造函数声明但没有 factory
用这个 JS
<script>
var Apple = function(type) {
this.type = type;
this.color = "red";
this.getInfo2 = function() {
return this.color + ' ' + this.type + ' apple';
};
};
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
</script>
和这个 Dart 代码
main() {
var apple = new js.JsObject(js.context['Apple'], ['Macintosh']);
print(apple.callMethod('getInfo', []));
print(new Apple('Macintosh').type);
print(new Apple('Macintosh').getInfo2());
print(new Apple('Macintosh').getInfo());
}
@Js() // about to being changed to @JS
class Apple {
external String get type;
external set type(String type);
external String get color;
external set color(String color);
external String getInfo();
external String getInfo2();
external Apple(String type);
}
它按预期工作。
index.html
<!doctype html>
<html>
<head>
</head>
<script>
var Apple = function(type) {
this.type = type;
this.color = "red";
};
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
</script>
<body>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
index.dart
import 'dart:js' as js;
import 'dart:html' as dom;
import 'package:js/js.dart';
main() {
// this works fine
var apple = new js.JsObject(js.context['Apple'], ['Macintosh']);
print(apple.callMethod('getInfo', []));
print(new Apple().getInfo());
}
@Js() // about to being changed to @JS
class Apple {
external String get type;
external set type(String type);
external String get color;
external set color(String color);
external factory Apple(String type);
}
只需添加 @Js()
注释即可得到
Exception: 'dart:js': Failed assertion: line 393: 'p.isNamed' is not true. Observatory listening at http://127.0.0.1:35293/ Internal error: Dart_Invoke expects library argument 'target' to be loaded.
更新
删除 external factory Apple(String type);
修复了异常。
现在我得到了
Observatory listening at http://127.0.0.1:38029/
red Macintosh apple
Exception: Class 'Apple' has no instance method 'getInfo'.NoSuchMethodError: method not found: 'getInfo'
Receiver: Instance of 'Apple'
Arguments: [...]
Apple.getInfo
main
class 需要构造函数声明但没有 factory
用这个 JS
<script>
var Apple = function(type) {
this.type = type;
this.color = "red";
this.getInfo2 = function() {
return this.color + ' ' + this.type + ' apple';
};
};
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
</script>
和这个 Dart 代码
main() {
var apple = new js.JsObject(js.context['Apple'], ['Macintosh']);
print(apple.callMethod('getInfo', []));
print(new Apple('Macintosh').type);
print(new Apple('Macintosh').getInfo2());
print(new Apple('Macintosh').getInfo());
}
@Js() // about to being changed to @JS
class Apple {
external String get type;
external set type(String type);
external String get color;
external set color(String color);
external String getInfo();
external String getInfo2();
external Apple(String type);
}
它按预期工作。