我想将此示例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 :(中间值).apply不是控制台窗口中的函数。
在以下行中:
S("p").click(S(this).hide())
你调用hide,而不是传递hide回调的地址。这是你遇到的同样问题:
如果我纠正了,我得到:
__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
这个名字可能更合适,但有点长......