如何在 javascript 中使用 Pyscript python 函数？答案

【问题标题】：How to use Pyscript python function in javascript?如何在 javascript 中使用 Pyscript python 函数？
【发布时间】：2022-08-23 19:49:48
【问题描述】：

我有一个 Javascript 代码，想使用 Pyscript 实现 python 函数。

简单示例：

假设我有一个功能：

<py-script>
def addOne(a):
    value = int(a) + 1
    return(value)
</py-script>

并说我想在 javascript 中使用这个函数：

<script>
let compute = addOne(12)
</script>

这里的问题是它会说“addOne()”函数没有定义。我想知道是否有办法在 javascript 中使用 pyscript python 函数？

是的，也不是。如果您直接与 Pyodide 交互，则可以。但是，Pyscript 会为您加载 Pyodide，我还没有弄清楚如何获取 Pyodide 句柄。此页面上的更多详细信息：pyodide.org/en/stable/usage/faq.html 一旦我有了解决方案，我会将它放在我的网站上。 jhanley.com/category/pyscript

标签： javascript pyscript

【解决方案1】：

PyScript 使用 Pyodide 在 JavaScript 和 Python 之间转换对象。这种交叉调用需要 JS 范围内的 Python 函数的代理。所以，如果你创建了 Python 函数的代理，你可以在 JS 的事件监听器中将此代理设置为回调。见https://pyodide.org/en/stable/usage/type-conversions.html#call-js-from-py

好吧，您不能设置任意参数以在 JS 事件中传递。但是，调用 Python 的主要目的是处理一些事件，不是吗？例如。单击按钮时，您想在 Python 中执行某些操作。如果是这样，事件处理程序（您的 Python 函数通过代理）获取 PointerEvent。它的 currentTarget 属性告诉你点击的 DOM 元素。通过元素的属性，您实际上可以传递您想要的任何数据。

<py-script>
import pyodide
import js

class myClass():
    def __init__(self):
        self.add_one_proxy = pyodide.create_proxy(self.add_one)
        js.document.getElementById('mybutton').addEventListener("click", self.add_one_proxy)
    
    def add_one(self, pointerEventObj):
        """Callback from JS when a button is clicked"""
        btn_elem = pointerEventObj.currentTarget
        data = btn_elem.getAttribute('data')
        js.document.getElementById('resultdiv').innerHTML = str(int(data)+1)
    
    def shutdown(self):
        self.add_one_proxy.destroy()

klass = myClass()
# Make sure in the program to keep holding a reference of klass ...
# do the whole program here
# When all done, call klass.shutdown()
</py-script>

<body>
    <button id="mybutton" data="12" />
    <div id="resultdiv">calculated data will come here on button click</div>
</body>

【讨论】：