如何在浏览器中使用 Brython

在本文中，我们将通过实现一个 Base64 计算器来讨论如何在浏览器中使用 Brython，以便在浏览器中进行文档对象模型（DOM）应用程序编程接口（API）以及仅从 JavaScript 中可用的其他功能的实验。

Brython 中的 DOM 应用程序编程接口

为了尝试 Brython 中可用的文档对象模型操作，我们将构建一个用于将字符串编码为 Base64 的表单。最终的输出表单将如下所示：

让我们创建一个 HTML 文件，并将其命名为 index.html。

例如

上面的 HTML 代码加载了定义 UI 布局的静态资源，并初始化了 Python 的编译。

• 第 7 行：将加载 PureCSS 样式表，以改善默认 HTML 样式。
• 第 9 行：将加载 Brython 引擎的最小化版本。
• 第 12 行：将加载 Brython 标准库的最小化版本。
• 第 14 行：将加载 main.py，它将处理此静态 HTML 页面的动态逻辑。
• 第 21 行：将描述输入字段。此字段将以参数形式接收用于编码的字符串。
• 第 22 行到第 25 行：将定义将触发页面主要逻辑的默认按钮。用户可以在 main.py 中看到此逻辑的实现。
• 第 26 行：将定义用于清除页面上数据和元素的按钮。这将在 main.py 中实现。
• 第 29 行：将声明用作表格占位符的 div。

相关的 Python 代码，main.py。

例如

该 Python 程序展示了回调函数的定义以及操作 DOM 的机制。

• 第 1 行：将导入用户用于与文档对象模型（DOM）和 brython.min.js 中的浏览器 API 代码进行交互的模块。
• 第 2 行：将导入 base64，它在 Brython 的标准库 brython_stdlib.min.js 中可用。
• 第 4 行：将声明用户将在 HTML 页面运行期间用于存储数据的字典。
• 第 6 行将定义事件处理程序 base64_compute()，它将编码 ID 为 text-src 的输入字段中输入的文本的 base54 值。
• 第 7 行：将检索 ID 为 text-src 的 DOM 元素的值。
• 第 18 行：将定义事件处理程序 clear_map()，它将清除此页面上的数据和数据呈现。
• 第 22 行：将定义 display_map()，它将采用 b64_map 中的数据，并以页面形式显示它。
• 第 26 行：将检索 ID 为 text-src 的 DOM 元素。
• 第 29 行：将清除 ID 为 text-src 的 DOM 元素的值。
• 第 31 行：将 submit 按钮的 onclick 事件绑定到 base64_compute()。
• 第 32 行：将 clear-btn 按钮的 onclick 事件绑定到 clear_map()。

为了操作 DOM，Brython 将使用两个运算符：

1. <= 是一个新的运算符，主要特定于 Brython。它会将一个子节点添加到节点中。我们在 display_map() 中使用了它，该函数定义在第 22 行。
2. + 是 Element.insertAdjacementHTML('afterend') 的替代项，用于添加同级节点。

我们可以在 display_map() 的上述语句之一中看到这两个运算符的实际应用。

上述命令可以翻译为“将由两个相邻的表格数据单元格元素组成的表格行元素添加到包含表格头元素的表格元素中。” 它在浏览器中渲染为以下 HTML 程序。

例如

上述 HTML 代码显示了表格元素的表头行的嵌套结构。我们也可以以更易读的方式编写此代码。

例如

为了在 Brython 控制台中观察结果，我们可以输入以下代码块：

输出

'<table> <thead> <tr> <th> Text </th> <th> Base64 </th> </tr> </thead> </table>'

要执行整个代码，我们需要启动网站服务器。像以前一样，我们在 main.html 和 index.html 这两个文件的同一目录下启动了内置的 Python 网站服务器。

例如

输出

Serving HTTP on :: port 8080 (http://[::]:8080/) ...

启动网站服务器后，将浏览器指向 https://:8080。该页面将显示如下：

图像

在 Brython 中导入文件

用户可以使用 import 来访问 JavaScript 的 Python 或 Brython 模块和库。

Python 模块和库是项目根文件夹中扩展名为 .py 的文件，或者是在包含 _init_.py 文件的子文件夹中的 Python 包。要导入其 Brython 程序中的 Python 模块，他们必须启动网站服务器。

如果用户想进一步了解如何在 Brython 代码中导入 Python 模块，他们可以查看“如何安装 Brython”文章中的“使用 PyPI 进行安装”部分。他们需要创建并激活 Python 虚拟环境，安装 Brython，然后修改 index.html。

例如

上述 HTML 文件将暴露从浏览器核心引擎、sys 标准库以及本地 Python 模块（functional.py）导入的模块。functional.py 的内容如下：

该模块将实现 take()，这是 itertools receipts.take() 中的一个，它将返回给定可迭代对象的第一个“n”个元素。它将依赖于 itertools.slice()。

如果用户尝试从文件系统使用浏览器打开 index.html，他们将在浏览器控制台中看到以下错误：

导入了启动本地网站服务器所需的 Python 模块后。首先，启动本地网站服务器，然后使用浏览器打开 https://:8080。用户将看到以下 HTML 页面：

如果正在运行网站服务器，则浏览器将能够在导入 functional 执行后获取 functional.py 模块。数字和 sys.version 值的结果通过最后两个嵌入并由浏览器渲染的 Python 脚本插入到 HTML 文件中。

减小导入大小

在前面的示例项目的目录中，为了减小导入的 JavaScript 库和模块的大小，用户可以使用 Brython-cli 并带上 -module 选项。此方法也可用于预编译 Python 模块到 JavaScript。

例如

输出

Create brython_modules.js with all the modules used by the application
searching brython_stdlib.js...
finding packages...
script in html index.html

这将用于生成 brython_modules.js，然后用户可以修改 index.html 文件的 head 元素。

例如

第 5 行将原始脚本源格式从 brython_stdlib.js 更改为 brython_modules.js。

用户可以使用他们的浏览器打开 index.html，或者将浏览器指向已减小到相同 HTML 页面的本地服务器。用户会注意到以下几点：

1. 他们可以在不运行网站服务器的情况下，在浏览器中减小 HTML 页面。
2. 他们不需要分发 functional.py 文件，因为程序现在已转换为 JavaScript，然后打包到 brython_modules.js 中。
3. 用户将不需要加载 brython_stdlib.js。

命令行工具 brython-cli -modules 提供了从标准库中删除不必要代码的解决方案。然后它将 Python 模块编译为 JavaScript 程序。这将有助于用户的应用程序页面，并减少资源的下载大小。

结论

在本文中，我们讨论了用户如何在浏览器中使用 Brython，借助 Base64 计算器，该计算器已实现用于在浏览器中通过文档对象模型应用程序编程接口进行实验。我们还解释了用户如何将 Python 文件导入 Brython，以及用户如何减小导入文件的大小。