Brython：Python在浏览器中
如果您是一个喜欢在JavaScript上编写Python的Web开发人员，那么Brython是一个在浏览器中运行的Python实现，可能是一个吸引人的选项。
JavaScript是前端Web开发的事实上的语言。复杂的JavaScript引擎是所有现代互联网浏览器的固有部分，自然驱动开发人员在JavaScript中代码前端Web应用程序。 Brython通过在浏览器中制作Python一流的公民语言以及访问浏览器中可用的所有现有JavaScript库和API，提供两个世界的最佳世界。
作为熟悉Web开发的中级Python开发人员，如果您还有一些HTML和JavaScript，您将充分利用本教程。对于JavaScript进修，请查看Python vs ythonistas的javascript。
您可以通过单击下面的链接下载本教程中的示例的源材料：
获取源代码：单击此处以获取用于了解使用Brython在本教程中使用Brython在浏览器中运行Python的源代码。
虽然JavaScript是前端Web开发的无处不在的语言，但以下几点可能适用于您：
您可能不想花时间学习JavaScript以探索浏览器技术。
您可能不喜欢被迫学习和使用JavaScript来实现Web应用程序。
无论原因如何，许多开发人员都希望替代Python的替代，以利用浏览器的电源。
在浏览器中使用Python的一个副作用是与JavaScript中相同的代码相比的性能丢失。但是，此缺点并未超过上述任何益处。
同构JavaScript或Universal JavaScript强调JavaScript应用程序应该在客户端和服务器上运行。这假设后端是基于JavaScript的，即节点服务器。使用烧瓶或Django的Python开发人员也可以将同构的原则应用于Python，只要他们可以在浏览器中运行Python。
Brython允许您在Python中构建前端并在客户端和服务器之间共享模块。例如，您可以共享验证函数，如以下代码，该代码正常化和验证我们的电话号码：
1导入Re 2 3 Def Normalize_US_PHONE（电话：str） - ＆gt; str：4＆＃34;＆＃34;＆＃34;从给定电话号码和＃34提取数字和数字;＆＃34;＆＃34; 5回归。子（R＆＃34; [^ \ da-za-z]＆＃34;＆＃34;＆＃34;，电话）6 7 def is_valid_us_phone（电话：str） - ＆gt; BOOL：8＆＃34;＆＃34;＆＃34;验证10位电话号码＆＃34;＆＃34;＆＃34; 9 randalized_number = normalize_us_phone（电话）10返回RE。匹配（R＆＃34; ^ \ d {10} $＆＃34;，normalized_number）不是没有
normalize_us_phone（）消除了任何非公共字符，而IS_VALID_US_PHONE（）如果输入字符串包含完全十位数，则无字母字符，则返回TRUE。相同的代码可以在Python服务器上运行的进程和使用Brython构建的客户端之间共享。
Internet浏览器将标准化的Web API暴露给JavaScript。这些标准是HTML生活标准的一部分。某些Web API示例包括：
Brython允许您使用Web API并与JavaScript进行交互。您将在稍后的部分中使用一些Web API。
Python通常用于代码，语言构造或更大想法的原型片段片段。使用Brython，此常用编码实践在您的浏览器中可用。例如，您可以使用Brython Console或交互式编辑器来试验代码片段。
1从浏览器导入ajax 2 3 def on_complete（req）：4打印（req。文本）5 6语言=＆＃34; fr＆＃34; 7 8 ajax。获得（f＆＃34; https：//fourtonfish.com/hellososut/？lang = {languagh}＆＃34;，9阻塞= true，10 oncomplete = on_complete）
第3行定义ON_COMPLETE（），从AJAX.GET（）获取响应后调用的回调函数。
第6行调用ajax.get（）来检索法语中的“hello”的翻译，使用hellosopeut api。请注意，在Brython编辑器中执行此代码时，阻止可能是真的或false。如果在Brython控制台中执行相同的代码，则需要是真的。
尝试将语言从FR到ES修改并观察结果。此API支持的语言代码在Hellosopeut文档中列出。
注意：Hellosalut是Internet上可用的公共API之一，在Public API Github项目中列出。
您可以在联机编辑器中修改代码片段以消耗不同的公共API。例如，尝试从公共API项目获取随机公共API：
1从浏览器导入ajax 2 3 def on_complete（req）：4打印（req。文字）5 6 ajax。获得（＆＃34; https：//api.publicapis.org/random"，7个阻塞= true，8 oncomplete = on_complete）
将上面的代码复制到在线布利逊编辑器中，然后单击“运行”以显示结果。这是JSON格式的示例：
{＆＃34; count＆＃34; ：1，＆＃34;参赛作品＆＃34; ：[{＆＃34; API＆＃34; ：＆＃34;开放式政府，美国＆＃34; ，＆＃34;描述＆＃34; ：＆＃34;美国政府开放数据＆＃34; ，＆＃34; auth＆＃34; ：＆＃34;＆＃34; ，＆＃34; https＆＃34; ：真实，＆＃34; CORS＆＃34; ：＆＃34;未知＆＃34; ，＆＃34;链接＆＃34; ：＆＃34; https：//www.data.gov/" ，＆＃34;类别＆＃34; ：＆＃34;政府＆＃34; }]}
因为端点取自随机项目，所以你可能会得到不同的结果。有关JSON格式的更多信息，请查看Python中的JSON数据。
您可以使用原型设计以在Python解释器中尝试常规Python代码。因为您在浏览器的上下文中，Brython还提供了方法：
使用jQuery，D3和Bokeh等现有的JavaScript库以及vue.js等javascript ui框架
作为快捷方式，您可以通过在布莱森网站上打开控制台或编辑器来利用上述大部分功能。这不需要您在本地计算机上安装或运行任何内容。相反，它为您提供了一个在线游乐场与Python和Web技术进行交互。
Brython都是一个Python编译器和用javascript编写的解释器。因此，您可以在浏览器中编译和运行Python代码。在Brython网站上提供的在线编辑，展示了这个功能的一个很好的例子。
使用在线编辑器，Python在浏览器中运行。无需在计算机上安装Python，并且无需将代码发送到要执行的服务器。反馈立即为用户，此方法不会将后端暴露于恶意脚本。学生可以在任何具有工作浏览器的设备上尝试Python，例如手机或Chromebooks，即使具有差点互联网连接。
Brython网站指出，实施的执行速度与CPython相当。但Brython在浏览器中执行，此环境中的引用是JavaScript烘焙到浏览器引擎中。因此，预计布莱恩比手写良好的javascript更慢。
Brython将Python代码编译为JavaScript，然后执行生成的代码。这些步骤对整体性能产生影响，Brython可能并不总能满足您的性能要求。在某些情况下，您可能需要将某些代码执行委托给JavaScript甚至是WebasseMbly。您将看到如何构建WebAsseMbly以及如何在WebasseMbly部分中使用Python中的结果代码。
但是，不要让感知性能贬低你使用布莱恩。例如，导入Python模块可能导致从服务器下载相应的模块。要说明这种情况，请打开Brython控制台并执行以下代码：
显示提示的延迟（测试机器上的390ms）是明显的。这是由于布莱恩不得不下载UUID及其依赖项，然后编译下载的资源。但是，从那时起，在执行UUID中可用的功能时没有延迟。例如，您可以使用以下代码生成随机普遍唯一标识符UUID版本4：
调用uuid.uuid4（）生成一个uuid对象，它的字符串表示在控制台中打印。调用uuid.uuid4（）立即返回，比UUID模块的初始导入更快。
如果您正在阅读本教程，那么您可能有兴趣在浏览器中编写Python代码。看到浏览器中执行的Python代码对大多数Pythonistas来说是令人兴奋的，并唤醒有趣的感觉和无尽的可能性。
Brython，Pierre Quentel的作者以及该项目的贡献者也让Python的乐趣在进行与Web浏览器兼容的巨大任务时。
要证明，请将浏览器指向Brython Interactive Console，并在Python提示符中键入以下内容：
类似于Python在本地机器上的经验，Brython编译并执行速度的说明并打印Python的Zen。它在浏览器中发生，Python代码执行不需要与后端服务器的任何交互：
您还可以尝试其他经典Python复活节彩蛋在同一浏览器环境中使用以下代码：
Brython拥有在Python参考实现中找到的相同幽默。
既然您熟悉使用Brython的基础知识，您将在以下部分探讨更高级的功能。
使用Brython的在线控制台进行实验是一个很好的开端，但它不会允许您部署您的Python代码。在当地环境中安装Brython有几种不同的选项：
下面概述了这些方法中的每种方法的说明，但如果您已经做出决定，则可以随意直接跳过您的首选方法。
内容递送网络（CDN）是一种服务器网络，允许改进的性能和下载在线内容的速度。您可以从几个不同的CDNS中安装Brython库：
如果要部署静态网站，可以选择此安装，并以最小的开销向页面添加一些动态行为。您可以将此选项视为jQuery的替代品，但除了使用Python而不是JavaScript之外。
要说明使用CDN的Brython，您将使用CDNJS。使用以下HTML代码创建文件：
1＆lt;！doctype html＆gt; 2＆lt; html＆gt; 3＆lt;头＆gt; 4＆lt;脚本5 src =＆＃34; https：//cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js" ＆gt; 6＆lt; / script＆gt; 7＆lt; / head＆gt; 8＆lt;身体onload =＆＃34;布莱恩（）＆＃34; ＆gt; 9＆lt;脚本类型=＆＃34;文本/ python＆＃34; ＆gt; 10导入浏览器11浏览器。警报（＆＃34; hello真实的python！＆＃34;）12＆lt; / script＆gt; 13＆lt; /身体＆gt; 14＆lt; / html＆gt;
第8行执行Brython（）当文档已完成加载时。 Brython（）在当前范围中读取Python代码，并将其编译为JavaScript。查看详细信息，了解布莱恩如何工作的部分。
第9行将脚本的类型设置为text / python。这表明Brython需要编译和执行哪些代码。
第10行导入浏览器，一个暴露对象和函数的布莱森模块，允许与浏览器交互。
第11行调用Alert（），它显示带有文本＆＃34的消息框;你好真正的python！＆＃34;
将文件保存为index.html，然后双击该文件以打开默认Internet浏览器。浏览器显示＆＃34; Hello Real Python的消息框！＆＃34;单击“确定”关闭消息框：
要减少下载文件的大小，尤其是在生产中，请考虑使用最小化的Brython.js的版本：
最小化版本将减少用户的立场中的下载时间并感知延迟。在了解Brython如何工作时，您将学习浏览器如何加载Brython以及上述Python代码如何执行。
GitHub安装与CDN安装非常类似，但它允许您使用最新开发版本实现Brython应用程序。您可以复制上一个示例并修改头部元素中的URL以获取以下index.html：
＆lt;！doctype html＆gt; ＆lt; html＆gt; ＆lt;头＆gt; ＆lt; src src =＆＃34; https：//raw.githack.com/brython-dev/brython/master/www/src/brython.js" ＆gt; ＆lt; / script＆gt; ＆lt; / head＆gt; ＆lt;身体onload =＆＃34;布莱恩（）＆＃34; ＆gt; ＆lt;脚本类型=＆＃34;文本/ python＆＃34; ＆gt;导入浏览器浏览器。警报（＆＃34; hello真实的python！＆＃34;）＆lt; / script＆gt; ＆lt; / body＆gt; ＆lt; / html＆gt;
将此文件保存在本地目录中后，双击index.html以在浏览器中呈现，在CDN安装中获得的同一页面。
到目前为止，您尚未需要在当地环境中安装任何内容。相反，您已在HTML文件中指示浏览器可以找到Brython软件包。当浏览器打开该页面时，它会从CDN或GitHub下载来自相应环境的Brython JavaScript文件。
Byrthon还可用于Pypi上的本地安装。 PYPI安装适用于：
您需要更多的控制和自定义Brython环境，超出指向CDN文件时可用的。
从PYPI安装Brython安装Brython_Cli，可以用于自动化的命令行工具，例如生成项目模板或打包和捆绑模块，以简化Brython项目的部署。
有关详细信息，您可以请参阅本地安装文档，以查看安装后环境中可用的Brython-CLI的功能。 Brython-Cli仅适用于这种安装。如果从CDN或NPM安装，则不可用。在教程后面，您会看到Brython-Cli的行动。
$ python3-m venv .venv - profpt brython $ source .venv / bin / spectate（brython）$ python-m pip安装 - aupgrade pip收集pip下载pip-20.2.4-py2.py3-none -any.whl （1.5 MB）|███████████████████████| 1.5 MB 1.3 MB / s安装收集的包裹：PIP尝试卸载：PIP找到现有安装：PIP 20.2.3卸载PIP-20.2.3：成功卸载PIP-20.2.3
＆gt; Python3-M venv .venv - prompt brython＆gt; .venv \ scripts \ activate（布莱恩）＆gt; Python -M pip安装 - upgrade pip收集pip下载pip-20.2.4-py2.py3-none -any.whl（1.5 mb）|██████████████████ ██████████████| 1.5 MB 1.3 MB / s安装收集的包裹：PIP尝试卸载：PIP找到现有安装：PIP 20.2.3卸载PIP-20.2.3：成功卸载PIP-20.2.3
您刚刚为您的项目创建了专用的Python环境，并更新了最新版本的PIP。
在下一个步骤中，您将安装Brython并创建默认项目。 Linux，MacOS和Windows上的命令是相同的：
（Brython）$ Python-MPIP安装Brython Collecting Brython下载Brython-3.9.0.Tar.gz（1.2 MB）|██████████████████████ █████████| 1.2 MB 1.4 MB / s使用遗留＆＃39; setup.py安装＆＃39;对于布莱恩，自包装＆＃39;轮子＆＃39;未安装。安装收集的包裹：布莱恩运行setup.py安装for brython ......完成（布莱森）$ mkdir web（brython）$ cd web（brython）$ brython-cli - 安装brython 3.9.0完成
您已从Pypi安装了Brython，创建了一个名为Web的空文件夹，并通过在安装期间执行虚拟环境中复制的Brython-CLI生成默认项目骨架。
在Web文件夹中，Brython-Cli --install创建了一个项目模板并生成了以下文件：
要测试此新创建的Web项目，您可以使用以下命令启动本地Python Web服务器：
执行Python -M http.server时，Python在端口8000上启动Web服务器。预期的默认页面是索引.html。将Internet浏览器指向http：// localhost：8000以显示文本Hello的页面：
有关一个更完整的示例，您可以将浏览器地址栏中的URL更改为http：// localhost：8000 / demo.html。您应该看到类似于Brython Demo页面的页面：
使用此方法，Brython JavaScript文件直接从您当地的环境加载。请注意index.html的head元素中的src属性：
1＆lt;！doctype html＆gt; 2＆lt; html＆gt; 3＆lt;头＆gt; 4＆lt; Meta Charset =＆＃34; UTF-8＆＃34; ＆gt; 5＆lt;脚本类型=＆＃34;文本/ javascript＆＃34; SRC =＆＃34;布莱森.JS＆＃34; ＆gt;＆lt; / script＆gt; 6＆lt;脚本类型=＆＃34;文本/ javascript＆＃34; src =＆＃34; brython_stdlib.js＆＃34; ＆gt;＆lt; / script＆gt; 7＆lt; / head＆gt; 8＆lt;身体onload =＆＃34;布莱恩（1）＆＃34; ＆gt; 9＆lt;脚本类型=＆＃34;文本/ python＆＃34; ＆gt; 10从浏览器导入文档11文档＆lt;＆＃34;你好＆＃34; 12＆lt; / script＆gt; 13＆lt; /身体＆gt; 14＆lt; / html＆gt;
上述HTML缩进以提高本教程中的可读性。命令brython_cli --install不会缩进它生成的初始HTML模板。
第8行用参数1调用Brython（）以将错误消息打印到浏览器控制台。
第10行从浏览器导入文档模块。要访问DOM的功能可用于文档中。
第11行显示了添加到Python的新符号（＆lt; =）作为句法糖。在这个例子中，文档＆lt;＆＃34;你好＆＃34;是document.body.appendchild（document.createTextnode（＆＃34; hello＆＃34;））的替代品。有关这些DOM功能的详细信息，请签出Document.createTextNode。
操作员＆lt; =用于将子节点添加到DOM的元素。您将在Brython的DOM API中使用Brython特定运算符更详细地了解。
如果您在JavaScript生态系统中熟悉，那么NPM安装可能会吸引您。在执行此安装之前需要Node.js和NPM。
使用NPM安装将使您的项目中可用的JavaScript Brython模块类似于任何其他JavaScript模块。然后，您将能够利用您喜欢的JavaScript工具来测试，包，并部署Brython解释器和库。如果您已经安装了NPM的现有JavaScript库，则此安装是理想的。
注意：如果您的系统上没有安装Node.js和NPM，则考虑仅供参考读取本节的其余部分，因为您可以安全地跳过安装本身。剩余的教程不依赖于任何示例的NPM安装方法。
假设您的系统上安装了NPM，请通过在空目录中调用npm init --yes来创建默认包.json文件：
$ npm init --yes写信给/users/john/projects/brython/npm_install/package.json：{＆＃34;姓名＆＃34 ;:＆＃34; npm_install＆＃34 ;,＆＃34;版本＆＃34; ：＆＃34; 1.0.0＆＃34 ;,＆＃34;描述＆＃34 ;:＆＃34;＆＃34 ;,＆＃34; main＆＃34 ;:＆＃34; index.js＆＃34 ;, ＆＃34;脚本＆＃34 ;: {＆＃34;测试＆＃34 ;:＆＃34;回声\＆＃34;错误：没有测试指定\＆＃34; ＆amp;＆amp;退出1＆＃34; }，＆＃34;关键字＆＃34 ;: []，＆＃34;作者＆＃34 ;:＆＃34;＆＃34;＆＃34;许可证＆＃34 ;:＆＃34; iSC＆＃34; }
$ NPM Install Brython NPM Depone创建了一个LockFile作为包锁定.JSON。您应该提交此文件。 npm warn [email protected]否描述npm warn [email protected]没有存储库字段。 + [email protected]添加了1个封装从1个贡献者和审核1封装在1.778S中找到0漏洞
您可以忽略警告，并注意Brython已添加到您的项目中。要确认，打开package.json并确保您有一个依赖关系属性，指向包含brython条目的对象：
1 {2＆＃34;姓名＆＃34; ：＆＃34; npm_install＆＃34; ，3＆＃34;版本＆＃34; ：＆＃34; 1.0.0＆＃34; ，4＆＃34;描述＆＃34; ：＆＃34;＆＃34; ，5＆＃34;主要＆＃34; ：
......
