编译为JS后使用dart:js调用时出现问题

3

我的dart:js上下文调用在编译为javascript的dart2js后会出现严重问题。

这是我创建的一个简单程序,包括两个文件:

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$1 @ 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.$1 (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.$0 (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.$0 (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)
1个回答

1
很可能是一个时间问题。 确保在执行Dart代码之前(即使转换为JS时),JS已经被加载。 简单的解决方案是将JS脚本标签移到Dart脚本标签之前。
如果这不足够,您可以添加一些同步。 在JS中创建一个公共变量并触发自定义事件。 在Dart中,使用Dart-JS-interop检查全局变量是否已设置,并且如果尚未设置,请在继续之前监听自定义事件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接