PyScript，一个已实现跨领域的 python 库！

最新推荐文章于 2025-05-22 10:45:00 发布

强化学习曾小健2

最新推荐文章于 2025-05-22 10:45:00 发布

阅读量982

点赞数 8

CC 4.0 BY-SA版权

文章标签： python 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_39756314/article/details/146487029

PyScript，一个已实现跨领域的 python 库！

原创恒通网络科技 Python集中营 2025年03月24日 20:44 甘肃

引言

在Web开发领域，JavaScript长期占据着主导地位，而Python开发者一直渴望能在浏览器环境中直接运行Python代码。这一梦想随着PyScript的出现而成为现实。PyScript是一个革命性的框架，它允许开发者在HTML中直接嵌入Python代码，并在浏览器中执行。本文将深入探讨PyScript的技术原理、应用场景，并通过多个实际案例展示其强大功能。

一、PyScript概述

1.1 什么是PyScript

PyScript是由Anaconda公司开发的一个开源框架，基于Pyodide（将Python编译为WebAssembly的项目）构建。它允许开发者：

• 在HTML中直接嵌入Python代码
• 在浏览器中运行完整的Python科学计算栈（NumPy、Pandas等）
• 实现Python与JavaScript之间的无缝互操作
• 创建丰富的、交互式的Web应用而无需编写JavaScript代码

1.2 PyScript的核心优势

1. 降低学习门槛：前端开发者无需学习JavaScript即可创建交互式Web应用
2. 复用现有代码：可直接在浏览器中运行已有的Python科学计算代码
3. 强大的生态系统：支持众多流行的Python库
4. 客户端执行：数据处理在用户浏览器中完成，减轻服务器负担
5. 渐进式增强：可逐步将Python功能添加到现有网页中

二、PyScript技术架构

2.1 底层技术栈

PyScript的魔力来自于几个关键技术的结合：

1. WebAssembly：将Python解释器编译为可在浏览器中运行的二进制格式
2. Pyodide：CPython到WebAssembly的移植版本
3. Emscripten：将C/C++代码编译为WebAssembly的工具链

2.2 工作原理

当页面加载PyScript时，会执行以下步骤：

1. 下载并初始化Pyodide运行时
2. 解析页面中的<py-script>标签内容
3. 将Python代码发送到Pyodide执行
4. 处理执行结果并更新DOM

三、PyScript基础使用

3.1 基本设置

使用PyScript只需在HTML中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <py-script>
        print("Hello, PyScript!")
    </py-script>
</body>
</html>

3.2 配置选项

PyScript支持多种配置选项：

<py-config>
    {
        "autoclose_loader": true,
        "runtimes": [{
            "src": "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js",
            "name": "pyodide-0.21.3",
            "lang": "python"
        }],
        "packages": ["numpy", "pandas"]
    }
</py-config>

四、PyScript应用案例

4.1 数据可视化应用

以下示例展示如何使用PyScript创建交互式数据可视化：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
        packages = ["matplotlib", "numpy", "pandas"]
</py-config>
</head>
<body>
<div id="plot"></div>

<py-script>
        import matplotlib.pyplot as plt
        import numpy as np
        import pandas as pd

        # 生成数据
        x = np.linspace(0, 10, 100)
        y = np.sin(x)

        # 创建图表
        fig, ax = plt.subplots()
        ax.plot(x, y)

        # 显示在页面上
        display(fig, target="plot")
</py-script>
</body>
</html>

4.2 交互式表单处理

PyScript可以轻松处理表单输入并实时响应：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<input type="number" id="input-number" value="5">
<button id="calculate" py-click="calculate_factorial">计算阶乘</button>
<div id="result"></div>

<py-script>
        from js import document

        def calculate_factorial():
            num = int(document.getElementById("input-number").value)
            fact = 1
            for i in range(1, num+1):
                fact *= i
            document.getElementById("result").innerHTML = f"{num}的阶乘是: {fact}"
</py-script>
</body>
</html>

4.3 数据科学分析

PyScript的强大之处在于可以直接在浏览器中运行复杂的数据分析：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
        packages = ["pandas", "scikit-learn"]
</py-config>
</head>
<body>
<div id="output"></div>

<py-script>
        import pandas as pd
        from sklearn.datasets import load_iris
        from sklearn.ensemble import RandomForestClassifier
        from sklearn.model_selection import train_test_split
        from js import document

        # 加载数据
        iris = load_iris()
        X = pd.DataFrame(iris.data, columns=iris.feature_names)
        y = iris.target

        # 划分训练测试集
        X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2)

        # 训练模型
        clf = RandomForestClassifier()
        clf.fit(X_train, y_train)

        # 评估模型
        accuracy = clf.score(X_test, y_test)

        # 显示结果
        document.getElementById("output").innerHTML = f"模型准确率: {accuracy:.2f}"
</py-script>
</body>
</html>

五、高级功能探索

5.1 Python与JavaScript互操作

PyScript允许Python和JavaScript代码相互调用：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script>
        function jsFunction(message) {
            alert("JavaScript收到: " + message);
            return "来自JS的回复";
        }
    </script>
</head>
<body>
<button id="interop-btn" py-click="call_js">调用JavaScript</button>

<py-script>
        from js import jsFunction, document

        def call_js():
            response = jsFunction("Hello from Python!")
            document.getElementById("interop-btn").innerHTML = response
</py-script>
</body>
</html>

5.2 使用Web Workers进行后台处理

为避免阻塞UI，PyScript支持Web Workers：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<button id="start-worker" py-click="start_worker">开始后台任务</button>
<div id="worker-output"></div>

<py-script>
        from js import document, Worker

        def heavy_computation():
            import time
            result = 0
            for i in range(10000000):
                result += i**0.5
            return result

        def start_worker():
            def on_message(e):
                document.getElementById("worker-output").innerHTML = f"计算结果: {e.data}"

            worker = Worker.create("./worker.py", onmessage=on_message)
            worker.postMessage("start")
</py-script>
</body>
</html>

worker.py文件内容：

import time

def on_message(message):
    result = 0
    for i in range(10000000):
        result += i**0.5
    return result

5.3 文件系统访问

PyScript提供了虚拟文件系统功能：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<input type="file" id="file-input">
<div id="file-content"></div>

<py-script>
        from js import document, FileReader

        def read_file(event):
            file = event.target.files[0]
            reader = FileReader.new()

            def on_load(e):
                content = e.target.result
                document.getElementById("file-content").innerHTML = f"文件内容: {content[:100]}..."

            reader.onload = on_load
            reader.readAsText(file)

        document.getElementById("file-input").addEventListener("change", read_file)
</py-script>
</body>
</html>