使用jQuery Transcrypt和Javascript

问题描述 投票:1回答:1

我想将此示例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不是控制台窗口中的函数。

jquery this transcrypt
1个回答
0
投票

在以下行中:

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这个名字可能更合适,但有点长......

© www.soinside.com 2019 - 2024. All rights reserved.