Brython：浏览器中的 Python(1)

实现同构 Web 开发

同构 JavaScript或通用 JavaScript强调 JavaScript 应用程序应该在客户端和服务器上运行。这是假设后端是基于 JavaScript 的，即Node服务器。使用Flask或Django 的Python 开发人员也可以将同构原理应用于 Python，前提是他们可以在浏览器中运行 Python。

Brython 允许您使用 Python 构建前端并在客户端和服务器之间共享模块。例如，您可以共享验证功能，例如以下用于规范化和验证美国电话号码的代码：

 1import re
 2
 3def normalize_us_phone(phone: str) -> str:
 4    """Extract numbers and digits from a given phone number"""
 5    return re.sub(r"[^\da-zA-z]", "", phone)
 6
 7def is_valid_us_phone(phone: str) -> bool:
 8    """Validate 10-digit phone number"""
 9    normalized_number = normalize_us_phone(phone)
10    return re.match(r"^\d{10}$", normalized_number) is not None

normalize_us_phone()消除任何非字母数字字符，而如果输入字符串正好包含十位数字且没有字母字符，则is_valid_us_phone()返回True。可以在 Python 服务器上运行的进程和使用 Brython 构建的客户端之间共享相同的代码。

访问 Web API

Internet 浏览器向 JavaScript公开标准化的Web API。这些标准是HTML Living Standard 的一部分。一些 Web API 示例包括：

• Web Storage
• Web Crypto
• Web Workers
• History
• URL

Brython 允许您使用 Web API 并与 JavaScript 交互。您将在后面的部分中使用一些 Web API 。

原型设计和 JavaScript 库

Python 通常用于为代码片段、语言结构或更大的想法制作原型。使用 Brython，您可以在浏览器中使用这种常见的编码实践。例如，您可以使用Brython 控制台或交互式编辑器来试验一段代码。

打开在线编辑器并输入以下代码：

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)

下面是这段代码的工作原理：

• 1个线 进口的ajax模块。
• 第 3 行定义了从 获得响应后调用on_complete()的回调函数ajax.get()。
• 第 6 行调用ajax.get()使用HelloSalut API检索法语“hello”的翻译。请注意，blocking可以True或False当您在 Brython 编辑器中执行此代码时。它需要True你在Brython控制台执行相同的代码。

单击输出窗格上方的运行以查看以下结果：

{"code":"fr","hello":"Salut"}
<completed in   5.00 ms>

尝试将语言从frto修改es并观察结果。此 API 支持的语言代码在HelloSalut 文档中列出。

您可以在在线编辑器中修改代码片段以使用不同的公共 API。例如，尝试从Public APIs 项目中获取一个随机的公共 API：

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)

将上面的代码复制到在线 Brython 编辑器中，然后单击运行以显示结果。以下是 JSON 格式的示例：

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}

由于端点获取随机项目，您可能会得到不同的结果。有关 JSON 格式的更多信息，请查看在 Python 中使用 JSON 数据。

您可以像在Python 解释器中一样使用原型设计来尝试常规 Python 代码。因为您处于浏览器的上下文中，所以 Brython 还提供了以下方法：

• 了解如何使用Web API
• 与文档对象模型 (DOM)交互
• 使用现有的 JavaScript 库，如jQuery、D3和Bokeh以及 JavaScript UI 框架，如Vue.js

作为一种快捷方式，您可以通过打开 Brython 网站上提供的控制台或编辑器来利用上述大多数功能。这不需要您在本地计算机上安装或运行任何东西。相反，它为您提供了一个与 Python 和 Web 技术交互的在线游乐场。

向学生教授 Python

Brython 既是一个 Python 编译器，也是一个用 JavaScript 编写的解释器。因此，您可以在浏览器中编译和运行 Python 代码。Brython 网站上提供的在线编辑器演示了此功能的一个很好的示例。

使用在线编辑器，Python 在浏览器中运行。无需在机器上安装Python，也无需将代码发送到服务器执行。反馈对用户来说是即时的，这种方法不会将后端暴露给恶意脚本。学生可以在任何带有浏览器的设备上试验 Python，例如手机或 Chromebook，即使互联网连接不稳定。

考虑性能

Brython 站点指出，该实现的执行速度与 CPython 相当。但是 Brython 是在浏览器中执行的，这个环境中的引用是 JavaScript 烘焙到浏览器引擎中的。因此，预计 Brython 会比手写的、经过良好调整的 JavaScript 慢。

Brython 将 Python 代码编译成 JavaScript，然后执行生成的代码。这些步骤会对整体性能产生影响，并且 Brython 可能并不总能满足您的性能要求。在某些情况下，您可能需要将某些代码执行委托给 JavaScript 甚至WebAssembly。您将在有关WebAssembly的部分中看到如何构建 WebAssembly 以及如何在 Python 中使用生成的代码。

但是，不要让感知性能影响您使用 Brython。例如，导入 Python 模块可能会导致从服务器下载相应的模块。为了说明这种情况，打开 Brython 控制台并执行以下代码：

>>> import uuid

显示提示之前的延迟（在测试机器上为 390 毫秒）是显而易见的。这是因为 Brython 必须下载uuid及其依赖项，然后编译下载的资源。但是，从那时起，执行uuid. 例如，您可以使用以下代码生成一个随机的通用唯一标识符，UUID 版本 4：

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')

调用uuid.uuid4()生成一个UUID对象，其字符串表示形式打印在控制台中。调用uuid.uuid4()立即返回并且比uuid模块的初始导入快得多。

Having Fun

如果您正在阅读本教程，那么您可能对在浏览器中编写 Python 代码感兴趣。看到在浏览器中执行的 Python 代码对大多数 Pythonistas 来说都是令人兴奋的，并唤醒了一种乐趣和无限的可能性。

Brython 的作者Pierre Quentel和该项目的贡献者在承担使 Python 与 Web 浏览器兼容的艰巨任务的同时，也牢记 Python 的乐趣。

为了证明这一点，将浏览器指向 Brython 交互式控制台，然后在 Python 提示符下键入以下内容：

import this

与在本地机器上使用 Python 的体验类似，Brython 会即时编译和执行指令并打印Python 之禅。它发生在浏览器中，并且 Python 代码执行不需要与后端服务器进行任何交互：

CDN安装

一个内容分发网络（CDN）是服务器的网络，它允许以提高性能和下载速度为在线内容。您可以从几个不同的 CDN 安装 Brython 库：

• CDNJS
• jsDelivr
• CDNPKG

如果您想部署静态网站并以最小的开销向您的页面添加一些动态行为，您可以选择此安装。除了使用 Python 而不是 JavaScript 之外，您可以将此选项视为jQuery的替代品。

为了说明 Brython 与 CDN 的使用，您将使用 CDNJS。使用以下 HTML 代码创建一个文件：

 1<!doctype html>
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        </script>
 7    </head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        </script>
13    </body>
14</html>

以下是此 HTML 页面的关键元素：

• 第 5 行brython.js从 CDNJS加载。

• 第8个执行brython()时，文档完成加载。brython()读取当前作用域中的 Python 代码并将其编译为 JavaScript。有关更多详细信息，请参阅了解 Brython 的工作原理部分。

• 第 9行将脚本的类型设置为text/python. 这向 Brython 指示需要编译和执行哪些代码。

• 第 10 行导入browser了一个 Brython 模块，它公开允许与浏览器交互的对象和函数。

• 第 11 行调用alert()，它显示一个带有文本的消息框"Hello Real Python!"

将文件另存为index.html，然后双击该文件以使用默认 Internet 浏览器打开它。浏览器显示一个消息框，"Hello Real Python!"单击OK关闭消息框：

要减小下载文件的大小，尤其是在生产中，请考虑使用以下文件的最小化版本brython.js：

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3</script>

从用户的角度来看，最小化版本将减少下载时间和感知延迟。在了解 Brython 的工作原理中，您将了解浏览器如何加载 Brython 以及如何执行上述 Python 代码。

GitHub 安装

GitHub 安装与 CDN 安装非常相似，但它允许您使用最新的开发版本来实现 Brython 应用程序。您可以复制前面的示例并修改head元素中的 URL以获得以下内容index.html：

<!doctype html>
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    </script>
  </head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    </script>
  </body>
</html>

将此文件保存在本地目录中后，双击index.html以在浏览器中呈现您通过 CDN 安装获得的相同页面。

了解 Brython 的工作原理

您对安装 Brython 的不同方法的浏览为您提供了一些有关实现如何工作的高级线索。以下是您迄今为止在本教程中发现的一些特征的摘要：

• 它是 JavaScript 中的 Python 实现。
• 它是一个 Python 到 JavaScript 的翻译器和一个在浏览器中执行的运行时。
• 它公开了两个可用作 JavaScript 文件的主要库：
  1. brython.js是 Brython 语言的核心，详见Brython 核心组件。
  2. brython_stdlib.js是Brython 标准库。
• 它调用brython()，它script使用text/python类型编译包含在标签中的 Python 代码。

在以下部分中，您将更详细地了解 Brython 的工作原理。

Brython 核心组件

Brython的核心包含在brython.js或在brython.min.js，所述发动机Brython的最小化版本。两者都包括以下关键组件：

• brython()是 JavaScript 全局命名空间中公开的主要 JavaScript 函数。如果不调用此函数，您将无法执行任何 Python 代码。这是您必须显式调用的唯一 JavaScript 函数。

• __BRYTHON__是一个 JavaScript 全局对象，它包含运行 Python 脚本所需的所有内部对象。当您编写 Brython 应用程序时，不会直接使用此对象。如果您查看 Brython 代码，包括 JavaScript 和 Python，那么您会看到__BRYTHON__. 您不需要使用此对象，但是当您看到错误或想要在浏览器控制台中调试代码时，您应该注意它。

• 内置类型是Python 内置类型在 JavaScript 中的实现。例如，py_int.js、py_string.js和py_dicts.js分别是int、str和 的实现dict。

• browser是浏览器模块，它公开前端 Web 应用程序中常用的 JavaScript 对象，例如使用的 DOM 接口document和使用window对象的浏览器窗口。

当您完成本教程中的示例时，您将看到这些组件中的每一个都在运行。

Brython 标准库

现在您已经对核心 Brython 文件有了一个总体了解brython.js，您将了解它的配套文件brython_stdlib.js.

brython_stdlib.js公开 Python 标准库。生成此文件时，Brython 将 Python 标准库编译为 JavaScript 并将结果连接到 bundle 中brython_stdlib.js。

Brython 旨在尽可能接近Python 参考实现CPython。有关 CPython 的更多信息，请查看您的 CPython 源代码和CPython 内部指南指南。

由于 Brython 在 Web 浏览器的上下文中运行，因此它有一些限制。例如，浏览器不允许直接访问文件系统，因此os.open()无法打开文件。与网络浏览器无关的功能可能无法实现。例如，下面的代码运行在 Brython 环境中：

>>> import os
>>> os.unlink()
Traceback (most recent call last):
  File <string>, line 1, in <module>
NotImplementedError: posix.unlink is not implemented

os.unlink()引发异常，因为从浏览器环境中删除本地文件是不安全的，并且文件和目录条目 API只是一个草案提案。

Brython 仅支持原生 Python 模块。它不支持用 C 构建的 Python 模块，除非它们已经用 JavaScript 重新实现。例如，在 CPython中用Chashlib编写并在 Brython 中用JavaScript实现。您可以查阅Brython 发行版中的模块列表以与 CPython 实现进行比较。

您需要包含brython_stdlib.js或brython_stdlib.min.js从 Python 标准库导入模块。

Brython in Action

此时，您可能想知道 Brython 在只知道其 JavaScript 引擎的浏览器中的行为方式。重用前面的示例和浏览器中可用的工具，您将了解在浏览器中执行 Python 代码所涉及的过程。

在CDN 服务器安装部分，您看到了以下示例：

 1<!doctype html>
 2<html>
 3    <head>
 4        <script
 5            src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        </script>
 7    </head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        </script>
13    </body>
14</html>

加载和解析 HTML 页面后，brython()执行以下步骤：

1. 读取包含在元素中的 Python 代码 <script type="text/python">
2. 将 Python 代码编译为等效的 JavaScript
3. 评估生成的 JavaScript 代码 eval()

在上面的示例中，Python 代码嵌入在 HTML 文件中：

<script type="text/python">
    import browser
    browser.alert("Hello Real Python!")
</script>

另一种选择是从单独的文件下载 Python 代码：

<head>
    <script src="https://www.example.com/main.py"
            type="text/python"></script>
</head>

在这种情况下，Python 文件将如下所示：

import browser
browser.alert("Hello Real Python!")

将 Python 代码与 HTML 代码分开是一种更简洁的方法，它允许您利用代码编辑器的优点和功能。大多数编辑器都支持 HTML 中的嵌入式 JavaScript，但它们不支持 HTML 中的内联 Python。

在浏览器中使用 Brython

至此，您对 Brython 有了足够的了解，可以使用更详细的示例。在本节中，您将实现一个Base64计算器，以在浏览器中试验 DOM API 和其他通常只能从 JavaScript 获得的功能。

您可以通过单击以下链接下载本教程中示例的源代码：

Brython 中的 DOM API

为了试验 Brython 中可用的 DOM 操作，您将构建一个表单来将字符串编码为Base64。完成的表格将如下所示：

使用正在运行的 Web 服务器，浏览器能够functional.py在import functional执行时获取模块。值sys.version和的结果numbers由嵌入式 Python 脚本的最后两行插入到 HTML 文件中，并由浏览器呈现。

Reduce Import Size

在上例的项目目录中，为了减小导入的 JavaScript 模块的大小以及将 Python 模块预编译为 JavaScript，您可以使用brython-cli选项--modules：

$ brython-cli --modules
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，您可以修改如下head元素index.html：

 1<head>
 2<meta charset="utf-8">
 3<script type="text/javascript" src="brython.js"></script>
 4<script type="text/javascript" src="brython_modules.js"></script>
 5</head>

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

index.html使用浏览器打开或将浏览器指向本地服务器会呈现相同的 HTML 页面。注意以下几点：

1. 您可以在浏览器中呈现 HTML 页面，而无需运行 Web 服务器。
2. 你并不需要分发functional.py因为代码已被转换为JavaScript和捆绑brython_modules.js。
3. 您不需要加载brython_stdlib.js.

命令行工具brython-cli --modules提供了一种解决方案，可以从标准库中删除不必要的代码，并将您的 Python 模块编译为 JavaScript 代码。这有助于打包您的应用程序并导致较小的资源下载。

<script src="main.py" type="text/python"></script>

IOError: can't load external script at file:///project/main.py
(Ajax calls not supported with protocol file:///)