网络浏览器中运行Python脚本PyScript剖析
作者:DebugUsery 发布时间:2022-05-10 11:27:54
PyScript可以让你在浏览器中直接运行Python脚本,与JavaScript并排,在你的代码和网页之间进行双向互动。
由Anaconda创建的PyScript是一项实验性的但很有前途的新技术,它使Python运行时在支持WebAssembly的浏览器中作为一种脚本语言使用。
每个现代常用的浏览器现在都支持WebAssembly,这是许多语言(如C、C++和Rust)可以编译的高速运行时标准。Python的参考实现是用C语言编写的,一个早期项目Pyodide提供了Python运行时的WebAssembly移植。
也在InfoWorld上:WebAssembly的崛起
不过,PyScript的目标是提供一个完整的浏览器环境,将Python作为一种网络脚本语言运行。它建立在Pyodide之上,但增加或加强了一些功能,如从标准库中导入模块、使用第三方导入、配置与文档对象模型(DOM)的双向交互,以及做许多其他在Python和JavaScript世界中有用的事情。
现在,PyScript仍然是一个原型和实验性项目。Anaconda 并不推荐在生产中使用它。但好奇的用户可以在PyScript网站上尝试一些例子,并使用可用的组件在浏览器中构建实验性的Python+JavaScript应用程序。
在这篇文章中,我们将参观一下PyScript的基础知识,看看它是如何让Python和JavaScript进行交互的。
使用PyScript编程
PyScript的核心是一个单一的JavaScript include,你可以将其添加到网页中。这个 include 加载了基本的 PyScript 运行时间,并自动添加了对 PyScript 中使用的自定义标签的支持。
下面是一个PyScript的 "hello, world "项目的简单例子。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel="external nofollow" />
<script defer src="https://pyscript.net/unstable/pyscript.js"></script>
</head>
<body>
<py-script output="out">
print("Hello world")
</py-script>
<div id="out"></div>
</body>
</html>
head
文档中的script
标签加载了PyScript的核心功能。pyscript.css
样式表是可选的,但很有用。在其他方面,它在页面加载时向用户插入了关于页面正在做什么的通知--加载Python运行时,初始化,等等。
Python代码被包含在自定义的py-script
标签中。请注意,代码应该按照Python的缩进惯例进行格式化,否则将无法正常运行。如果你使用的编辑器能自动重新格式化HTML,请注意这一点;它可能会弄乱py-script
块的内容,使其无法运行。
一旦PyScript组件加载完毕,任何Python代码都会被评估。如果标签中的脚本写到stdout
(如print
) 语句中,你可以通过提供一个output
属性来指示在页面的什么地方显示输出。在这个例子中,脚本的stdout
被引导到ID为"out"
的div
。
如果你把它保存到一个文件中,并在网络浏览器中打开它,你会首先看到一个 "加载 "指示器和一个暂停,因为浏览器获得了PyScript的运行时间并将其设置好。该运行时在未来的加载中应保持缓存,但仍需要一些时间来激活。之后,Hello world
应该出现在页面上。
标准库导入
仅仅使用Python的内建程序的脚本只有一点用处。Python 的标准库在 PyScript 中可用,就像你在常规 Python 中使用它一样:只需import
并开始工作。标准库的导入在PyScript中应该只是工作。
如果你想修改上面的脚本块来显示当前的时间,你不需要用与传统Python不同的方法。
import datetime
print ("Current date and time:", datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))
使用来自PyPI的库
如果我们想从PyPI中安装一个包并使用它呢?PyScript 有另一个标签,py-env
,它指定了需要安装的第三方软件包。让我们用这两个块来替换原始脚本中的py-script
块。
<py-env>
- humanize
</py-env>
<py-script output="out">
from datetime import datetime
import humanize
now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")
</py-script>
py-env
块让我们列出要添加的软件包,就像我们在 Python 项目的requirements.txt
文件中列出它们一样。然后我们可以像对待其他 Python 软件包一样导入和使用它们。在这个例子中,我们使用了一个名为humanize
的第三方软件包,以使数字输出更容易阅读。
注意,并不是所有来自PyPI的包都能按预期安装和运行。例如,requests
需要访问尚不支持的网络组件。(这个问题的一个可能的解决方法是使用pyodide.http.pyfetch
,它被原生支持)。但是纯 Python 包,如humanize
,应该运行良好。Anaconda 提供的例子中使用的包,如numpy
,pandas
,bokeh
, 或matplotlib
,也可以运行。
本地导入
对于另一种常见的情况,假设你想从与你的网页在同一目录树下的其它 Python 脚本中导入。使用导入可以更容易地将更多的 Python 逻辑从网页本身移出,在那里它和你的演示文稿混在一起,可能会变得难以处理。
通常,Python 使用文件系统中其他.py
文件的存在作为它可以导入的指示。PyScript 不能以这种方式工作,所以你需要指定哪些文件可以作为可导入模块。
比方说,你有一个名为index.html
的网页,在你的 web 服务器的某个目录下,你想在它旁边放置一个名为main.py
的 Python 文件。这样,你的页内脚本就可以只是import main
,而你可以把大部分的 Python 逻辑限制在实际的.py
文件中。
在你的py-env
块中指定你想导入的 Python 文件。
- paths:`` - ./main.py
这将允许main.py
,在与网页本身相同的 web 服务器目录下,可以与import main
一起导入。
要记住一件重要的事情。你不能对你在浏览器中本地启动的网页进行这样的导入。这是由于WebAssembly运行时和浏览器本身对文件系统访问的限制造成的。相反,你需要在网络服务器上托管这些网页,以提供网页和.py
文件。
[也在InfoWorld上:在2022年编写现代Python的4个关键]
REPL 标签
Python用户应该熟悉Jupyter Notebook,它是Python的浏览器内实时编码环境,通常用于数学和统计学。PyScript为这样的环境提供了一个原始的构建模块,即py-repl
标签。
py-repl
在网页上生成一个输入字段,其功能就像一个非常基本的Jupyter笔记本环境。下面是一个来自Anaconda自己演示的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel="external nofollow" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1><b>pyscript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell
<div>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
</body>
</html>
运行这段代码,你会看到一个输入字段,它的工作原理类似于Python的REPL。
目前,REPL标签很少有记录的自定义方式。例如,如果你想以编程方式访问一个单元格的内容或其结果,没有明确的文档说明如何做到这一点。
IDG
PyScript的类似Jupyter的REPL组件可以让你在页面中交互式地运行Python,尽管它还不是很灵活或可配置。
与 JavaScript 事件 * 互动
因为 PyScript 是基于pyodide
的,所以它使用pyodide
的机制来与 DOM 交互。例如,如果我们想获得一个网页上的输入框的值并在我们的Python代码中使用它,我们会这样做。
<input id="txt">
<py-script>
from js import document, console
from pyodide import create_proxy
def _eventlog(e):
console.log(f"Input value: {e.target.value}")
eventlog = create_proxy(_eventlog)
document.getElementById("txt").addEventListener("input", eventlog)
</py-script>
js
库为许多常见的 JavaScript 实体提供了一个 Python 接口,比如document
和console
对象。它们在PyScript中的行为与在JavaScript中的行为几乎完全相同。pyodide
中的create_proxy
函数可以让我们取一个 Python 函数对象并为它生成一个 JavaScript 接口,因此它可以被用作input
框的事件 * 。input
框中的任何按键都会被记录到控制台,但它们也可以在Python端被处理。
来源:https://juejin.cn/post/7126527885812334623
猜你喜欢
- 不过不得不说,datetime模块也有一些限制。 例如,当我们处理时区时,通常会显得短缺。有时,我们不得不引入一些第三方库作为补充。 此外,
- 目录【Python压缩文件夹】导入“zipfile”模块【python压缩文件】导入“zipfile”模块补充zipfile是python里
- Win10下python 2.7与python 3.7双环境安装教程,具体内容如下所示:1、python软件下载网址:https://www
- 本文介绍了可以帮助简化 PHP 开发的10个项目,包括框架,类库,工具,代码。1.CakePHP Development Framework
- 不知道大家有没有见过在python数组中使用...符号,因为前段时间读别人代码的时候遇到了这个符号立刻就云里雾里,于是这里特此记录一下。先来
- asp之家注:学习javascript(js),免不了要用到打开新窗口,方法很多,总的来说是使用window.open。不同与HTML中的t
- 一个简单的JS显示日期代码,可以显示星期几<script type="text/javascript">fu
- Python里的多线程是假的多线程,不管有多少核,同一时间只能在一个核中进行操作!利用Python的多线程,只是利用CPU上下文切换的优势,
- 阅读上一篇:你是真正的用户体验设计者吗? Ⅰwrite2vin 的 原文路宛兮写的简介:本文介绍了: 1.关于用户体验的几种观点; 2.关于
- 这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是J
- 如下所示:<span style="font-family: Arial, Helvetica, sans-serif;&q
- Python中执行系统命令常见的方法有以下4种注意:以下实例代码在Python3.5下运行通过。一、os.system方法os.system
- 首先感谢比尔、感谢微软、感谢MSDN,是他们让我看到他们富有创意的一面,好了好了不废话了。我们经常把多个CSS或者多个JS并成一个,以节省请
- 在主图中背景颜色不知道怎么改,plt.plot()中没有axisbg参数。但是子图可以对plt.subplot的参数做修改,下面是对子图的背
- 下载并选择MySQL的安装包由于MySQL一直在升级,所以当您阅读本文时,或许在其官方网站上已提供了新的正式版供你下载,因此,以下提供的链接
- torch.randn()如何创建正态分布随机数torch.randn(*size)从均值为0,方差为1的正态分布中获取随机数【sample
- 在移动社交时代,微信已经成为我们生活不可或缺的一部分。2017年的《微信数据报告》中显示:每天有380亿条消息从微信上发出,其中6亿条是语音
- Python当中并无switch语句,本文研究的主要是通过字典实现switch语句的功能,具体如下。switch语句用于编写多分支结构的程序
- 一、读取Excel文件使用pandas的read_excel()方法,可通过文件路径直接读取。注意到,在一个excel文件中有多个sheet
- 最近因为数学建模3天速成Python,然后做了一道网络的题,要画网络图。在网上找了一些,发现都是一些很基础的丑陋红点图,并且关于网络的一些算