Question

有什么区别：

context["recentlyUsedStations"] = ["Goetheplatz", "Marienplatz"];

和

context["recentlyUsedStations"] = new JsObject.jsify(["Goetheplatz", "Marienplatz"]);

我在chrome扩展背景页面上使用它，并且能够在两种情况下都在弹出页面中获取值。如果我尝试更改列表，则第一种情况会生成一个整数数组（值为0）。第二种情况可行。

Answer 1

第一个版本定义了一个名为recentlyUsedStations的js变量，其值设置为包含对DartObject Dart对象的引用的js对象["Goetheplatz", "Marienplatz"]。从Js方面来看，这个变量几乎无法使用，只能用于保持对Dart对象的引用。这样，可以通过调用context["recentlyUsedStations"]来检索Dart对象。

没有 new js.JsObject.jsify(...)：

final a = ['b', 'c'];
js.context['a'] = a;

// unusable wrapper on Js side
// display : [object DartObject]
js.context['console'].callMethod('log', [js.context['a']]);

// the reference is kept
// display : true
print(identical(a, js.context['a']));

第二个版本定义了一个名为recentlyUsedStations的js变量，其值设置为js对象，该对象是通过将["Goetheplatz", "Marienplatz"]转换为等效的js数组["Goetheplatz", "Marienplatz"]而创建的。这样，数据可以在Js端使用，但它会忘记原始Dart对象的引用。因此，在dart列表中添加元素对Js端的数组没有影响。

使用 new js.JsObject.jsify(...)：

final a = ['b', 'c'];
js.context['a'] = new js.JsObject.jsify(a);

// converted to an array on Js side
// display : [b,c]
js.context['console'].callMethod('log', [js.context['a']]);

// the reference has been forgotten
// display : false
print(identical(a, js.context['a']));

// adding an element on the original List has no effect on Js value
a.add('d');
js.context['console'].callMethod('log', [js.context['a']]); // b,c

Chrome扩展中的Dart / JS互操作问题

1 个答案: