当前位置: 首页 > 工具软件 > Brython > 使用案例 >

Brython中文文档

訾俊名
2023-12-01

1. brython介绍

引用W3C文档对象模型规范:
什么是文档对象模型?
文档对象模型是一个平台和语言中立的接口 ,允许程序和脚本动态访问和更新 文档的内容,结构和样式。

Brython的目标是用Python取代Javascript,作为Web浏览器的脚本语言。

一个简单的例子:

<html>
<head>
	<script src="/brython.js"></script>
</head>
<body onload="brython()">

<script type="text/python">
from browser import document, alert

# 给按钮绑定事件‘click’到方法‘echo’上
def echo(ev):
    alert(document["zone"].value)

document["mybutton"].bind("click", echo)
</script>

<input id="zone">
<button id="mybutton">click !</button>
</body>
</html>

为了处理Python脚本,必须包含 brython.jsbrython()在页面加载时运行该函数(使用标记的onload属性<BODY>)。在开发阶段,可以将参数传递给brython()函数:1将错误消息显示到Web浏览器控制台,2也可以显示与错误一起显示的Javascript代码。

如果Python程序很大,另一个选择是将它写在一个单独的文件中,并使用脚本标记的src属性加载它:

<html>
	<head>
		<script src =“/ brython.js”> </ script>
	</head>

<body onload =“brython()”>
<script type =“text / python”src =“test.py”> </ script>
<input id =“zone”autocomplete =“off”>
<button id =“mybutton”> click!</ button>
</body>

</html>

请注意,在这种情况下,Python脚本将通过Ajax调用加载:它必须与HTML页面位于同一个域中。
在上面两个代码示例中,当我们单击按钮时,onclick事件会调用并运行echo()在Python脚本中定义的函数。此函数通过其id(区域)获取INPUT元素的值。这是通过以下语法实现的document["zone"]:document在模块浏览器中定义,是表示当前在浏览器中显示的文档的对象。它的行为类似于字典,其键是DOM元素的ID。因此,在我们的示例中, document["zone"]是一个映射到INPUT元素的对象; 该值 属性保存,有趣的是,对象的值。
Brython中,输出可以通过各种方式完成,包括使用函数alert()(也在浏览器中定义),该函数显示弹出窗口,文本作为参数传递。

2. 安装

2.1安装brython

  • 如果您的电脑有CPython和pip,通过下面的方法安装brython

     # 先安装brython
     pip install brython
     
     # 然后在一个空目录下运行
     python -m brython --install
    
  • 如果您不能使用此方法,请转到 Github上的发布页面,选择最新版本,下载并解压缩Brython-xyzzip。

在这两种情况下,该目录都包含以下文件:
brython.js:包含在HTML页面中的Brython引擎
brython_stdlib.js:对Brython支持的Python标准库部分的所有模块和包进行分组
demo.html:一个页面,其中包含一些如何使用Brython进行客户端开发的示例
brython.js包括经常使用的模块:browser, browser.html, javascript

如果你的应用程序使用标准分布的模块,你除了brython.js之外还需要包括brython_stdlib.js

    <script type =“text / javascript”src =“brython.js”> </ script> 
    <script type =“text / javascript”src =“brython_stdlib.js”> </ script>

2.2更新

发布新版本的Brython时,更新是通过常用命令完成的:

pip install brython --upgrade

在应用程序目录中,您可以通过以下方式更新Brython文件(brython.jsbrython_stdlib.js):

python -m brython --update

2.3安装CPython包
安装的CPython包pip可以通过命令安装在Brython应用程序中–add package 。
例如:

pip install attrs 
python -m brython --add_package attrs

包中的所有文件当然必须由Brython使用; 例如,这不包括用C语言编写的文件。

2.4其他命令

-- modules

创建特定于应用程序的分发,以替换 brython_stdlib.js为较小的文件。请参阅导入部分 。

-- make_dist

生成一个CPython包,适合PyPI发布,安装一个Brython应用程序。请参阅部署Brython应用程序一节

2.5网络服务器
可以在浏览器中打开HTML文件,但建议在应用程序目录中启动Web服务器。
最直接的是在CPython标准分发中使用模块http.server

python -m http.server

默认端口为8000.要选择其他端口:

python -m http.server 8001

然后,您可以通过 在浏览器地址栏中输入http:// localhost:8001 / demo.html来访问这些页面。

3. 相关问题

4. 关键字和内置函数

Brython是基于Python3实现。
该实现考虑了浏览器的限制,特别是与文件系统相关的限制。写入是不可能的,并且读取仅限于使用Ajax请求可访问的文件夹。

4.1关键字和内置函数
Brython支持Python 3的大多数关键字和功能:
关键字: and, as, assert, async, await, break, class, continue, def, del, elif, else, except, False, finally, for, from, global, if, import, in, is, lambda, None, nonlocal, not, or, pass, raise, return, True, try, while, with, yield
内置函数和类:abs, all, any, ascii, bin, bool, bytes, callable, chr, classmethod, delattr, dict, dir, divmod, enumerate, eval, exec, filter, float, frozenset, getattr, globals, hasattr, hash, hex, id, input, int, isinstance, iter, len, list, locals, map, max, memoryview, min, next, object, open, ord, pow, print, property, range, reprreverseroundsetsetattr,slice,sorted,str, sum, super, tuple, type, vars, zip, import

以下是浏览器和Javascript强加的一些功能和限制:

  • 在转到下一条指令之前,Javascript函数不能阻止给定时间的执行或等待事件发生。为此原因:

    • time.sleep()不能使用:模块browser.timer中的函数,例如set_timeout()或set_interval()必须使用
    • 内置函数input()由Javascript函数模拟 prompt()
  • 出于同样的原因,并且因为浏览器有自己的隐式事件循环,CPython asyncio模块不可用。特定browser.aio于Brython的模块用于异步编程。

  • 内置函数open()将要打开的文件的url作为参数。由于它是使用Ajax调用读取的,因此它必须与脚本位于同一个域中。返回的对象open()具有通常的读取和访问方法:read, readlines, seek, tell, close。仅支持文本模式:Ajax调用正在阻塞,在此模式下responseType无法设置属性

  • 默认情况下,print()将输出到Web浏览器控制台,错误消息也是如此。sys.stderr并且sys.stdout可以使用write()方法将其分配给对象,这允许将输出重定向到例如窗口或文本区域。

  • 打开打印对话框(打印机),调用window.print(window在模块浏览器中定义)。

  • sys.stdin此时未实现,但是有一个input() 内置函数将打开阻塞输入对话框(提示)。

  • 对象生命周期由Javascript垃圾收集器管理,Brython不像CPython那样管理引用计数。因此,del()当不再引用类实例时,不会调用方法 。

  • JSON解析器使用Javascript; 因此,等于整数的实数(例如1.0)将被转换为整数json.dumps()。

4.2内置价值 name
内置变量__name__设置为id 脚本属性的值。例如:

<script type="text/python" id="myscript">
assert __name__ == 'myscript'
</script>

如果2个脚本具有相同的id,则会引发异常。

对于没有显式id集的脚本:

  • 如果没有脚本id设置为__main__,则第一个“未命名”脚本将其__name__设置为"main"。因此,如果页面中只有一个脚本,它将能够运行通常的测试:

    <script type="text/python">
    if __name__=='__main__':
        print('hello !')
    </script>
    
  • 对于其他未命名的脚本,__name__会被设置为以__main__开头的随机字符串。

5.导入

5.1导入
与标准Python一样,您可以在应用程序中安装模块或软件包,方法是将它们放在根目录中,或者放在带有文件__init__.py的目录中。
请注意,模块必须以utf-8编码; 脚本顶部的编码声明将被忽略。
例如,应用程序可以由以下文件和目录组成:

.bundle-include
app.html
brython.js
brython_modules.js
brython_stdlib.js
index.html
users.py
utils.py
+ app
    __init__.py
    records.py
    tables.py

app.html中 的Python脚本可以运行导入

import users
import app.records

如果标准分布已包含在页面中

<script type =“text / javascript”src =“brython_stdlib.js”> </ script>

该脚本也可以运行

import datetime
import re

要导入模块或包,Brython使用与CPython相同的机制:要解析“import X”,程序会在几个地方查找文件:

  • 标准分布中 的模块X.
  • 根目录中的文件X.py.
  • 目录X中的文件__init__.py

由于浏览器无法直接访问文件系统,因此必须通过Ajax调用来查找文件,如果指定的URL上没有文件,则会返回错误消息。

5.2优化
上述过程有两个主要缺点:

  • 比较大的brython_stdlib.js(超过3 Mb)
  • Ajax调用所花费的时间

要优化导入,如果安装了Brython,则pip可以生成一个文件brython_modules.js,该文件仅包含应用程序使用的模块。
为此,打开控制台窗口,导航到应用程序目录并执行

python -m brython --modules

请注意,此程序解析目录及其子目录的所有脚本,模块和HTML页面中的Brython代码。使用的CPython版本必须符合此Brython代码:例如,如果Brython代码中有f字符串,则需要CPython 3.6+,否则会出现语法错误。
然后,您可以替换所有出现的

<script type =“text / javascript”src =“brython_stdlib.js”> </ script>

通过

<script type =“text / javascript”src =“brython_modules.js”> </ script>

6.浏览器界面相关

6.1 DOM api 介绍

对于与浏览器的接口,Brython符合文档对象模型接口,该接口在Web上广泛记录:

  • W3C参考
  • 维基百科页面
  • Mozilla网站

该界面与语言无关。使用Brython,DOM API中描述的所有操作都依赖于模块浏览器中定义的两个对象:documentwindow

document实现DocumentDOM API中定义的接口。例如,它支持以下方法:

document.getElementById(elt_id)

返回对id为elt_id的DOM元素的引用

document.createElement(tagName)

返回tagName类型的新元素; 例如,要创建超文本链接:

link = document.createElement('A')
document.appendChild(elt)

将元素elt添加到文档中
除了这个标准接口,Brython还提出了一个替代接口,对于Brython开发人员来说更为熟悉。它在以下页面中描述。

6.2 创建文档

Brython用于编写Web应用程序,因此用户可以与之交互的HTML页面

页面由元素(文本,图像,声音…)组成,可以通过两种不同的方式包含在页面中:

  • 例如,用标签编写HTML代码
<html>
<body>
<b>Brython</b> is an implementation of <a href="http://www.python.org">Python</a>
for web browsers
</body>
</html>
  • 或使用内置模块browser.html编写Python代码
<html>
<body>
<script type="text/python">
from browser import document
from browser.html import A,B

document <= B("Brython")+"is an implementation of "
document <= A("Python",href="http://www.python.org")+" for web browsers"
</script>
</body>
</html>
 类似资料: