繁体   English   中英

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

[英]Issues with dart:js calls when compiled to JS

在将代码编译为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$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)

这可能是一个时间问题。 确保在Dart代码(也是转换为JS)执行之前加载JS。 简单的解决方案是在Dart脚本标记之前移动JS脚本标记。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM