Transcrypt and Javascript this with jQuery

我想将此示例 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)

运行隐藏时.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>

我收到错误类型错误：(中间值).apply 不是控制台窗口中的函数。

在以下行中：

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

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

Transcrypt 和 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. lambda 函数在传递给click ()时不会被调用。换句话说，它们没有尾随大括号。

故意犯同样的错误：

__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这个名字可能更合适，虽然有点长......

相关内容

最新更新

热门标签：