编译为 JS 时 dart:js 调用的问题

Question

在将代码编译为 javascript dart2js 后，我在从 dart:js 获取上下文调用时遇到了一些严重的问题。

这是我为展示我的观点而制作的一个简单程序，包含两个文件：

main.dart

import 'dart:html';
import 'dart:js';

calledBack() async {
  querySelector('#output3').text = 'Called from JS';
}

void main() {
  querySelector('#output1').text = 'Started Dart';

  context['callMeFromJS'] = calledBack;

  context['app'].callMethod('callMeFromDart');
}

main.js

var App = function() {

};

App.prototype = {

    callMeFromDart: function(){
        var div = document.getElementById('output2');
        div.innerHTML = 'Called from Dart';
        callMeFromJS();
    }
};

var app = new App();

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>untitled1</title>
    <link rel="stylesheet" href="styles.css">
    <script async src="main.dart" type="application/dart"></script>
    <script async src="packages/browser/dart.js"></script>
    <script src="main.js"></script>
</head>

<body>

  <div id="output1"></div>
  <div id="output2"></div>
  <div id="output3"></div>

</body>
</html>

当我使用 Dartium 尝试运行时，它按预期工作。但是，如果我将它编译为 JS 并使用 Chromium 打开它，它只能在大约 50% 的时间内工作。在其他时候我会收到以下错误：

Uncaught TypeError: Cannot set property 'textContent' of 
nulldart.main @ html_dart2js.dart:40598dart._IsolateContext.eval @ isolate_helper.dart:460dart.startRootIsolate @ isolate_helper.dart:122(anonymous function) @ main.dart.js:7141(anonymous function) @ main.dart.js:7142init.currentScript @ main.dart.js:7122(anonymous function) @ main.dart.js:7133(anonymous function) @ main.dart.js:7145

我还有一个更大的项目发生了类似的错误。这里的错误如下：

Uncaught Uncaught Error: NullError: method not found: 'constructor' on null
Stack Trace:
TypeError: Cannot read property 'constructor' of undefined
    at J.T (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:8103:23)
    at $Y (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:6053:3)
    at yS.a (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:1411:65)
    at yS.dart.yS. (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:1794:22)
    at R8.dart.R8.FI (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:3082:42)
    at rq.dart.rq.[=15=] (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:2583:21)
    at dart.vs.static.HZ (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:2537:40)
    at vs.dart.vs.X2 (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:2474:3)
    at eX.dart.eX.[=15=] (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:2576:22)
    at OM.dart.OM.Ki (https://test-download-starsky.gamblify.com/web_game_builds/xmas/xmas_0.0.1-73-ga6a6de0/web/main.dart.js:2658:29)

Answer 1

可能是时间问题。确保在执行 Dart 代码之前加载 JS（在转译为 JS 时也是如此）。简单的解决方案是将 JS 脚本标签移到 Dart 脚本标签之前。

如果这还不够，您可以添加一些同步。
在 JS 中创建一个 public 变量并触发一个自定义事件。在 Dart 中检查全局变量是否已设置（使用 Dart-JS-interop），如果尚未设置，请在继续之前侦听自定义事件。

编译为 JS 时 dart:js 调用的问题

Issues with dart:js calls when compiled to JS

javascript

dart

dart-html

dart-js-interop