Transcrypt and Javascript this with jQuery答案

【问题标题】：Transcrypt and Javascript this with jQueryTranscrypt and Javascript this with jQuery
【发布时间】：2023-03-27 16:59:01
【问题描述】：

我想将此示例 html 文档翻译成 Transcrypt：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

我的代码导致 hide.py：

__pragma__ ('alias', 'S', '$')

def hide():
    S("p").click(S(this).hide())

S(document).ready(hide)

运行 hide.html 时：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="__javascript__/hide.js" charset="UTF-8"></script> 
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

我收到错误 TypeError: (intermediate value).apply is not a function in the console window.

【问题讨论】：

标签： jquery this transcrypt

【解决方案1】：

在下面一行：

S("p").click(S(this).hide())

你调用 hide，而不是传递 hide 回调的地址。这与您在这里遇到的问题相同：

Transcrypt and FileReader

如果我更正了，我会得到：

__pragma__('alias', 'S', '$')

def hide():
   S("p").click(S(this).hide)

S(document).ready(hide)

它报告了几个无效的关键帧。

如果我直接在 JavaScript 中做同样的事情（所以没有 Transcrypt）：

function hide () {
   $("p").click($(this).hide);
}

$(document).ready(hide)

我得到完全相同的错误。

我已经在此处查找了 JS 代码应该是什么：

https://www.w3schools.com/jquery/jquery_hide_show.asp

即：

function hide () {
    $("p").click(function () {$(this).hide ()});
}

$(document).ready(hide)

这确实是您原始 HTML 内联脚本中的内容。在 Transcrypt 中，这将是：

__pragma__('alias', 'S', '$')

def hide():
   S("p").click(lambda: S(this).hide ())

S(document).ready(hide)

我都测试过，JavaScript 和 Transcrypt 版本都可以正常工作。

如果我查看 Transcrypt 生成的代码，那就不足为奇了：

    var hide = function () {
        $ ('p').click ((function __lambda__ () {
            return $ (this).hide ();
        }));
    };
    $ (document).ready (hide);

Transcrypt 生成的代码类似于手动编写的 JavaScript，就像两滴水一样。

不要因为这里使用hide ()（带大括号）而不是hide（不带大括号）而感到困惑。此处的回调是匿名 c.q lambda 函数，而不是 hide 函数。还有匿名的 c.q.传递给 click () 时不会调用 lambda 函数。换句话说，它们没有尾括号。

故意犯同样的错误：

__pragma__('alias', 'S', '$')

def hide():
   S("p").click((lambda: S(this).hide ())())

S(document).ready(hide)

不会工作，也不会：

function hide () {
    $("p").click((function () {$(this).hide ()}) ());
}

$(document).ready(hide)

那么传递回调的区别：

 $("p").click (my_callback)     // Right

并调用它：

 $("p").click (my_callback ())  // Wrong

至关重要。

我希望这能澄清一点。

您可能想知道为什么不能简单地传递$(this).hide，而不需要调用它的额外包装函数。

这是因为$(this).hide 不会评估为以后可以在调用中使用的固定回调地址。另一方面，封装函数有一个固定的地址，因此可以用作回调。

这是一个 JQuery 魔法的例子，一方面非常聪明，另一方面暗示了一种并不总是存在的简单性。

关于函数命名的提示：您已将函数命名为 hide，这加剧了调用函数和传递其地址之间的混淆。你的hide 没有隐藏任何东西。它只安装一个可以隐藏某些东西的回调。所以install_hide这个名字可能会更合适，虽然有点长...

【讨论】：

非常感谢您的详细回答。这也回答了关于 Javascript 中的匿名函数以及如何通过 lambda 将其转换为 Python 的问题。很好的提示。