Brython 详解：从入门到精通-优快云博客

前言

在 Web 开发领域，Python 凭借其简洁易读的语法和丰富的库资源，深受开发者喜爱。然而，传统 Python 代码无法直接在浏览器中运行，这时候 Brython 应运而生。Brython 是一种能将 Python 代码编译为 JavaScript，从而在浏览器中运行的工具，让 Python 开发者可以轻松实现 Web 前端开发，大大拓宽了 Python 的应用场景。本文将基于 Brython 3.13.1 版本，为你详细介绍 Brython 的方方面面，带你从入门走向精通。

一、Brython 的获取与安装

Brython 3.13.1 版本可以通过多种国内可访问的途径获取。
国内技术论坛求助：在优快云论坛、开源中国等国内知名技术社区，有众多热心的开发者。你可以在相关板块发布帖子，明确说明需要 Brython 3.13.1 版本的资源，通常会得到其他开发者的帮助和分享。
高校或科研机构开源镜像站：像清华大学开源软件镜像站、阿里云开发者社区镜像站等，经常会收录各类开源软件资源。进入镜像站后，使用站内搜索功能查找 Brython 3.13.1，按照指引即可完成下载。
获取到 Brython 3.13.1 文件后，安装过程十分简单。只需要将相关文件部署到 Web 服务器对应的目录下，或者直接在本地 HTML 文件中引入即可使用。例如，在 HTML 文件的标签内添加以下代码引入 Brython 库：

<script type="text/javascript" src="brython.min.js"></script>
<script type="text/javascript" src="brython_stdlib.min.js"></script>

然后在标签内添加一个用于运行 Brython 代码的脚本标签，指定语言为 Python：

<script type="text/python">
在这里编写你的Brython代码
print("Hello, Brython!")
</script>

保存 HTML 文件后，使用浏览器打开，就能看到控制台输出 “Hello, Brython!”。
或者页面输出，在html的body里添加如下

<body onload="brython()">
  <div id="displayArea"></div>
  <script type="text/python">
    from browser import document, html
    display_div = document["displayArea"]
    new_p = html.P("Hello, Brython!")
    display_div <= new_p
  </script>
</body>

二、Brython 基础语法

Brython 的语法与标准 Python 语法基本一致，熟悉 Python 的开发者可以快速上手。

（一）数据类型

Brython 支持常见的数据类型，如整数、浮点数、字符串、列表、元组、字典等。
整数

num = 10

浮点数

float_num = 3.14

字符串

string = "Brython is amazing"

列表

my_list = [1, 2, "three", 4.5]

元组

my_tuple = (1, 2, 3)

字典

my_dict = {"name": "John", "age": 30}

（二）控制结构

Brython 的条件判断和循环结构也与 Python 相同。
条件判断

x = 10
if x > 5:
    print("x is greater than 5")
elif x < 5:
    print("x is less than 5")
else:
    print("x is equal to 5")

循环结构
for循环

for i in range(5):
    print(i)

while循环

count = 0
while count < 3:
    print(count)
    count += 1

（三）函数定义与调用

def add_numbers(a, b):
    return a + b

result = add_numbers(3, 5)
print(result)

三、Brython 基础语法与应用拓展

（一）在浏览器页面显示内容

在 Brython 开发中，若想在浏览器页面直接看到 “Hello, Brython!”，而不是在控制台查看，可通过操作 HTML 文档对象模型（DOM）来实现。具体步骤如下：
HTML 结构搭建：创建一个基础的 HTML 页面，并引入 Brython 库文件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Brython Display Text</title>
  <script type="text/javascript" src="brython.min.js"></script>
  <script type="text/javascript" src="brython_stdlib.min.js"></script>
</head>

<body onload="brython()">
  <div id="displayArea"></div>
  <script type="text/python">
    from browser import document
    # 获取id为displayArea的div元素
    display_div = document["displayArea"]
    # 创建一个新的段落元素，并设置文本内容为"Hello, Brython!"
    new_p = document.createElement("p")
    new_p.textContent = "Hello, Brython!"
    # 将新创建的段落元素添加到div中
    display_div.appendChild(new_p)
  </script>
</body>

</html>

在上述代码中：
首先在标签内创建了一个

元素，设置其id为displayArea，用于后续显示内容。
在 Brython 代码部分，通过from browser import document导入document对象，该对象可用于操作 HTML 文档。
使用document[“displayArea”]获取到之前创建的

元素。
接着通过document.createElement(“p”)创建一个新的

（段落）元素，并通过new_p.textContent = "Hello, Brython!"设置段落的文本内容。
最后使用display_div.appendChild(new_p)将新创建的段落元素添加到

元素中，这样在浏览器加载页面时，就能直接在页面上看到 “Hello, Brython!” 的文本内容。
另一种简洁实现方式：除了上述通过document.createElement创建元素的方式，还可以利用 Brython 提供的更简洁的语法来实现相同效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Brython Display Text</title>
  <script type="text/javascript" src="brython.min.js"></script>
  <script type="text/javascript" src="brython_stdlib.min.js"></script>
</head>

<body onload="brython()">
  <div id="displayArea"></div>
  <script type="text/python">
    from browser import document, html
    display_div = document["displayArea"]
    new_p = html.P("Hello, Brython!")
    display_div <= new_p
  </script>
</body>

</html>

这里通过html.P(“Hello, Brython!”)直接创建一个包含指定文本的

元素，然后使用display_div <= new_p（等价于display_div.appendChild(new_p)）将段落元素添加到

中，同样能在浏览器页面显示出相应文本。

（二）操作 DOM 元素

除了展示文本，Brython 还可以方便地对 HTML 文档对象模型（DOM）进行更多操作，实现动态更新网页内容。

from browser import document, html

创建一个新的段落元素

new_p = html.P("This is a new paragraph added by Brython")

将新元素添加到页面的body中

document <= new_p

（三）事件处理

通过 Brython 可以为 HTML 元素添加事件监听器，响应用户操作。

from browser import document, window

def click_handler(event):
    alert("Button clicked!")

button = document["my_button"]
button.bind("click", click_handler)

上述代码为一个 ID 为 “my_button” 的按钮添加了点击事件监听器，当按钮被点击时，会弹出提示框。

（四）与 JavaScript 交互

Brython 支持与 JavaScript 代码进行交互，你可以在 Brython 代码中调用 JavaScript 函数，也可以将 Brython 对象传递给 JavaScript。
调用JavaScript的alert函数

window.alert("This is an alert from Brython calling JavaScript")

四、Brython 进阶应用

（一）使用第三方库

Brython 支持使用一些 Python 第三方库，前提是这些库已经被适配或转换为 Brython 可用的形式。在国内，你可以在一些技术论坛，如优快云搜索相关的 Brython 第三方库资源。例如，numpy库可以通过brython_numpy进行适配使用，首先，需要在 HTML 文件中引入brython_numpy库，然后就可以在 Python 代码中使用numpy的功能，进行数组操作、数值计算等。

（二）异步编程

在 Web 应用中，异步操作是很常见的，比如发起 HTTP 请求获取数据。Brython 支持使用async和await关键字进行异步编程，类似于 Python 中的异步编程方式。通过window.fetch等 API 发起异步请求，结合async/await可以实现非阻塞的数据获取，提升应用的响应性能和用户体验。

五、实战项目示例

接下来，我们通过一个简单的 “待办事项列表” 项目，展示 Brython 在实际开发中的应用。
（一）HTML 结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>Todo List</title>
    <script type="text/javascript" src="brython.min.js"></script>
    <script type="text/javascript" src="brython_stdlib.min.js"></script>
</head>

<body>
    <input type="text" id="task_input" placeholder="Add a new task">
    <button id="add_button">Add Task</button>
    <ul id="task_list"></ul>
    <script type="text/python">
        from browser import document, html

        def add_task(event):
            task_text = document["task_input"].value
            if task_text:
                new_task = html.LI(task_text)
                document["task_list"] <= new_task
                document["task_input"].value = ""

        add_button = document["add_button"]
        add_button.bind("click", add_task)
    </script>
</body>

</html>

在这个项目中，用户在输入框中输入任务内容，点击 “Add Task” 按钮后，任务会添加到待办事项列表中。通过这个简单示例，你可以初步领略 Brython 在 Web 应用开发中的魅力。

总结

掌握了上述内容，你已经对 Brython 3.13.1 有了较为全面的认识。通过不断实践和探索，相信你能够在 Brython 的世界中开发出更多精彩的 Web 应用。在学习过程中，你还可以关注国内的技术博客、社区论坛，与其他开发者交流经验，解决遇到的问题，持续提升自己的 Brython 开发水平。
github地址：https://github.com/brython-dev/brython/releases
在这里插入图片描述