ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Brython 浏览器版 Python 3 完全上手指南:在 HTML 页面中直接运行 Python

Brython 浏览器版 Python 3 完全上手指南:在 HTML 页面中直接运行 Python 编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载BrythonBrowser Python是一个运行在浏览器中的 Python 3 实现它让开发者直接用 Python 编写网页脚本并通过内置的browser模块操作 DOM 元素与事件。本文以项目官方 README 为主线结合仓库源码完整讲解从 CDN 零安装到本地pip部署的两种接入方式、brython-cli的常用子命令、核心模块的底层实现以及可继续深入学习的文档与示例入口读完即可动手写出可运行的 Brython 页面。Brython 是什么浏览器中的 Python 3 实现Brython 的本质是一套运行在浏览器里的 Python 3 解释器它把script typetext/python标签内的 Python 源码编译并执行同时提供与 DOM 元素、事件交互的接口。与 CPython 的关系上README 明确指出自 3.8.0 版本起Brython 的主版本号 / 次版本号与 CPython 保持同步——也就是说 Brython 3.14 对应 CPython 3.14 的语法与语义。它支持 Python 3 语法并能够运行 CPython 发行版中纯 Python 编写的标准库模块但会排除与浏览器上下文无关的特性例如向磁盘写入文件。当前仓库的构建版本信息可以在 www/src/version_info.js 中确认implementation [3, 14, 3, dev, 0]与 npm/package.json 中标注的3.14.3版本一致。在功能定位上Brython 不只是能跑 Python它还内置了与 DOM 元素和事件交互的库browser包能与现有 JavaScript 库jQuery、D3、Highcharts、Raphael 等互操作支持最新的 HTML5/CSS3 规范可配合 Bootstrap、LESS、SASS 等 CSS 框架使用。第一个页面最小可运行的 Brython 示例README 给出的入门示例非常简洁核心只有两步加载brython.js脚本然后在script typetext/python标签中写 Python 代码。完整页面如下html head script src/path/to/brython.js/script /head body script typetext/python from browser import bind, document, alert bind(document[mybutton], click) def echo(event): alert(document[zone].value) /script input idzonebutton idmybuttonclick !/button /body /html这个例子的运行逻辑是页面加载后Brython 引擎扫描并执行typetext/python脚本块Python 代码从browser模块导入bind、document、alert三个名字bind作为装饰器把echo函数绑定到id为mybutton的按钮的click事件上点击按钮时读取输入框zone的值并弹出提示。从源码层面看browser模块在 www/src/builtin_modules.js 中构建bind的底层实现位于同一文件的browser.bind函数约 www/src/builtin_modules.js#L24-L60它接受elt、evt、options三个参数根据目标类型分发处理——如果elt是JSObj如window、Web Worker直接调用其addEventListener并把事件对象转换为 Python 对象后回调如果elt是DOMNode普通 DOM 元素则调用DOMNode.bind实现在 www/src/py_dom.js 的DOMNode_funcs.bind中负责将 Python 回调注册到对应 DOM 事件如果elt是字符串则将其视为CSS 选择器通过document.querySelectorAll批量绑定。document在browser模块中是一个特殊对象它既支持document[mybutton]这种按id取元素的下标语法也保留了对getElementById等原生方法的代理可参考 www/src/py_dom.js#L482-L485 关于key in document的说明。零安装快速开始通过 jsDelivr CDN 引入README 强调这是零安装Zero install的最简单方式不需要本地装任何东西直接在 HTML 中通过 jsDelivr CDN 加载 Brython。最稳妥的做法是锁定最新稳定版script srchttps://cdn.jsdelivr.net/npm/brython3.14.3/brython.min.js /script如果代码中导入了标准库模块则必须再加载一个包含可用标准库全集的 JavaScript 文件brython_stdlib.js它打包了 www/src/Lib 下所有标准库文件script srchttps://cdn.jsdelivr.net/npm/brython3.14.3/brython_stdlib.js /scriptjsDelivr 支持版本范围语法可按需选择粒度最新的 3.14.x 版本script srchttps://cdn.jsdelivr.net/npm/brython3.14/brython.min.js /script script srchttps://cdn.jsdelivr.net/npm/brython3.14/brython_stdlib.js /script最新的 3.x.y 版本script srchttps://cdn.jsdelivr.net/npm/brython3/brython.min.js /script script srchttps://cdn.jsdelivr.net/npm/brython3/brython_stdlib.js /script如果你希望使用最新开发版本包含尚未发布的特性可以改加载以下脚本注意需要携带crossoriginanonymous属性script srchttps://raw.githack.com/brython-dev/brython/master/www/src/brython.js crossoriginanonymous /script script srchttps://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js crossoriginanonymous /script两点实践提示一是两个脚本的加载顺序应当先brython.js核心引擎后brython_stdlib.js标准库且两者版本要保持一致避免标准库与解释器版本错配二是只写简单脚本时只需brython.js体积更小、加载更快一旦出现import标准库模块的语句就必须带上brython_stdlib.js。本地安装与项目初始化pip brython-cli如果本机已有带pip的 CPython 发行版可以先安装 Brythonpip install brython然后在新建的空白目录中执行brython-cli install或者从项目的 releases 目录以及发行版发布页下载最新版本的 Brython zip 包解压使用。无论哪种方式发行包都会包含两个核心文件brython.jsBrython 核心引擎当前源码见 www/src/brython.js压缩版为 www/src/brython.min.jsbrython_stdlib.js标准库所有文件的打包。发行包还会附带demo.html仓库内对应 www/demo.html演示了用 Python 作为脚本语言与网页交互的多种能力创建新元素、访问和修改已有元素、绘制图形、制作动画、发送 Ajax 请求等是新手最好的上手样例。brython-cli 子命令详解结合源码brython-cli的命令行实现位于 setup/brython/main.py它通过argparse注册了一系列子命令除上述install外还包括子命令作用关键参数install别名init在空目录初始化 Brython 项目拷贝brython.js、brython_stdlib.js等基础文件--install-dir默认当前目录、--no-demo不安装 demo.htmlupdate把当前目录或--update-dir指定目录中的brython.js、brython_stdlib.js更新为brython-cli已知的最新版本--update-diradd_package把当前 CPython 环境中已安装的纯 Python 包加入项目的./Lib/site-packagespackage包名、--dest-dirmake_package把普通 Python 包打包为可在浏览器加载的{package_name}.brython.js文件package_name、--src-dir、--exclude-dirs、-o/--output-pathmake_modules生成brython_modules.js收录应用实际用到的所有模块-o/--output-path、--reset、--modules_pathsmake_dist为应用制作 PythonPyPI发行包无make_file_system把目录下所有文件制作成虚拟文件系统VFSvfs_name、prefixstart_server启动本地开发服务器port默认 8000、--bind默认 localhost--version打印 Brython 版本号—从 setup/brython/main.py#L145-L173 可以看到install的细节若目标目录已存在brython.js会提示确认是否覆盖--no-demo会跳过所有.html文件与README.txt。update则出于安全考虑只更新brython.js和brython_stdlib.js两个文件避免覆盖用户自定义过的index.html等页面setup/brython/main.py#L175-L184。本地开发服务器一条命令跑起来在项目目录下执行brython-cli start_server即可在http://localhost:8000启动开发服务器根路径会重定向到index.html。源码setup/brython/main.py#L245-L265显示它基于aiohttp的静态文件服务实现并明确提示仅用于开发不适用于生产环境。常用变体brython-cli start_server 8888 # 换端口 brython-cli start_server 8080 --bind 0.0.0.0 # 监听所有网卡地址需要提醒的是由于 Brython 页面常涉及 Ajax、模块加载等行为直接双击本地 HTML 文件file://协议可能因浏览器安全策略受限README 及官方文档都建议通过本地服务器访问这也正是start_server子命令存在的意义。特性纵深browser 模块与生态扩展browser是 Brython 面向 DOM/浏览器能力的核心包其模块文件集中在 www/src/Lib/browser约 18 个.py文件常用成员包括browser.ajax异步 HTTP 请求对应 www/src/Lib/browser/ajax.py另有基于 asyncio 的 www/doc/en/browser.aio.md 文档browser.html以 Python 方式创建/操作 HTML 元素browser.timerset_timeout、set_interval等定时器browser.svg生成 SVG 矢量图形browser.websocketWebSocket 通信browser.workerWeb Worker 多线程browser.local_storage/browser.session_storage/browser.object_storage/browser.indexed_db各类浏览器存储browser.webcomponentWeb Components 支持。这些模块的存在印证了 README 中包含与 DOM 元素和事件交互的库的描述。除标准库外Brython 还能与既有 JavaScript 库协同工作仓库 www/gallery 提供了大量示例其中 www/gallery/highcharts、www/gallery/raphael、www/gallery/brycharts 等目录分别展示了与 Highcharts、Raphael 等图表库的集成用法可作为与 jQuery、D3、Highcharts、Raphael 等互操作的具体参考。此外仓库 www/tests 内置了覆盖面很广的测试套件test_builtins.py、test_classes.py、test_dict.py、test_json.py、test_pattern_matching.py等www/tests/console.html 与 www/tests/editor.html 分别提供了在线控制台与编辑器页面方便在不搭建环境的情况下直接验证 Brython 行为。文档与进阶资源入门教程仓库内 www/tutorial 提供多语言教程en、fr、es、pt-br、it、br等子目录完整文档www/doc 下按语言组织英文版从 www/doc/en/intro.html 开始法文版从 www/doc/fr/intro.html 开始涵盖 DOM 操作www/doc/en/dom_api.md、事件www/doc/en/events.md、JavaScript 互操作www/doc/en/javascript.md、部署www/doc/en/deploy.md等主题示例画廊仓库内 www/gallery/gallery_en.html 汇集了从基础到进阶的大量示例包括纯 Brython 用法以及与 JavaScript 库协作的案例参与贡献请阅读仓库根目录的 CONTRIBUTING.md其中说明了问题反馈与新特性提交流程。结语从本文可以看出Brython 的接入成本极低一个script标签加一段typetext/python代码即可运行CDN 版本范围语法让固定版本、次版本线乃至大版本线都可以灵活指定本地场景下pip install brython配合brython-cli install/start_server即可完成项目初始化与开发调试。在深入了解browser.bind的事件分发逻辑、brython-cli的模块打包子命令以及browser包内 18 个模块的源码之后你完全可以依据本文所述步骤把 Brython 集成进自己的 Web 项目用 Python 完成从前端交互到数据可视化、异步通信的完整开发。赞分享编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载相关推荐Brython革命性浏览器Python如何在浏览器中运行Python 3的完整指南Brython革命性浏览器Python如何在浏览器中运行Python 3的完整指南 Brython Browser Python 是一个革命性的Python编程语言语言运行时编译器前端Brython实际应用案例研究Brython实际应用案例研究 本文通过多个实战案例深入探讨了Brython在Web开发中的实际应用涵盖了交互式数据可视化、实时聊天应用、任务管理看板、响应式编程语言语言运行时编译器前端Brython 浏览器运行 Python 3 全面上手指南npm 包安装、CDN 引入与 DOM 交互实战Brython 浏览器运行 Python 3 全面上手指南npm 包安装、CDN 引入与 DOM 交互实战 本指南以仓库内 npm/README.md htt编程语言语言运行时编译器前端上一篇KAN-GPT技术文档生成API手册与教程编写下一篇Luyten Java反编译器终极教程批量处理JAR、WAR、EAR文件的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表