Haxe JavaScript HTML 表单答案

【问题标题】：Haxe JavaScript HTML formHaxe JavaScript HTML 表单
【发布时间】：2014-02-22 14:32:12
【问题描述】：

在“Try Haxe”（http://try.haxe.org）站点，默认示例测试代码如下：

class Test {
  static function main(){
    #if js
    new js.JQuery("body").html("Haxe is great :)");
    #elseif flash
    trace("Haxe is great :)");
    #end
  }
}

在该页面上运行它非常简单（可以选择“选项”并以“JS”或“SWF”为目标），“SWF”的输出如下：

Test.hx:6：Haxe 很棒 :)

“JS”的输出如下：

Haxe 很棒 :)

让我感到困惑的部分是 javascript 部分，因为当我在笔记本电脑上自己编译源代码时，生成的 test.js 文件非常复杂，看起来与该页面上显示的“JS Source”完全不同：

(function () { "use strict";
var Test = function() { };
Test.main = function() {
    new js.JQuery("body").html("Haxe is great :)");
};
var js = {};
var q = window.jQuery;
js.JQuery = q;
Test.main();
})();

我应该把Haxe编译的test.js的内容改成上面的吗？此外，我不知道实际的 index.html 页面应该是什么样子才能显示 JavaScript 输出“Haxe 很棒:)”的结果。任何关于 JavaScript 示例输出的 index.html 页面的实际代码的提示将不胜感激。

【问题讨论】：

完整输出加载到右侧的 iframe 中，如下所示：try.haxe.org/app/program/14064/run?r=0.3810659754090011（只需查看源代码）。

标签： javascript html haxe

【解决方案1】：

不清楚这个问题是关于什么的。

如果是关于

"我应该将 haxe 编译的 "test.js" 的内容更改为上面？”

不，您不应更改已编译的解决方案。

为什么？因为每次重新编译时都会覆盖它，而且根据您的更改，您的源文件也会过时。

关于 HTML，您不需要特殊设置，只需调用 test.js 和依赖库的纯 HTML。根据您的示例：

<html>
    <head>
        <title>Hello haxe :)</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
    </body>
</html>

【讨论】：

埃德加，感谢您的反馈。奇怪的是，即使在实施了您的建议之后，加载上述 html 页面（在 IE8 和 Firefox 中）时，我得到的只是一个空白页面。我也尝试过完整的“ajax.googleapis.com/ajax/libs/jquery/1.71./…>”。

【解决方案2】：

首先，您不应更改 haxe 编译器为您生成的 test.js 文件的内容。 JS 源代码，如果给出相同的 Haxe 代码，看起来应该与在您自己的计算机上编译的 .js 文件没有什么不同...

如果您尝试使用简单的 html 页面运行：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/></head>
<body>

    <script type="text/javascript" src="test.js"></script>

</body>
</html>

如果您在页面上看不到任何内容，请尝试打开控制台。您可能会发现“Haxe 很棒！”你正在寻找的。如果您想要一个使用 DOM 的更具交互性的示例，请尝试以下 .hx：

import js.Browser;
class Test {
    static function main() {
        var button = Browser.document.createButtonElement();
        button.textContent = "Click me!";
        button.onclick = function(event) {
            Browser.alert("Haxe is great");
        }
        Browser.document.body.appendChild(button);
    }
}

确保将文件命名为 test.hx

然后通过在同一目录中运行 .hxml 文件来编译它：

-js test.js
-main Test

这应该会给你一个 test.js，它曾经在 index.html 中链接，就像我在顶部发布的那样，在浏览器 DOM 中提供了一些东西。

如果您想了解更多关于编译为 JS 和在浏览器中运行的信息，我建议您在此处进一步阅读：

https://haxe.org/manual/target-javascript-getting-started.html

干杯！

【讨论】：