python 开发工具_Brython!极具意义的Python前端开发工具

Python作为胶水语言,真的是无所不能。这不,最近又出现一个基于Python3,目标是替代JavaScript的前端开发工具—Brython.

好用吗?咱今天来试试用它写一个计算器有多简单:

4d0ac5cff16016c1992a7e8d68ff5b3b.png

不过,我们首先要知道它作为Python的客户端Web编程工具,和JS有什么区别呢?

1.特点

1.可轻易地在页面中内嵌Python终端进行测试

99fc5450b7030386a4adadd9a419265e.png

2.运行速度接近于CPyhon

3.写法方便,社区强大,可进行敏捷开发

我个人觉得相同的功能,用Python写起来可能会比JS快。

4.和JS一样,你不用安装任何东西就可以开始编写

下面就用Brython做一些简单的实验吧。

2.实验

1.在页面上显示 Hello !:

<html><head><meta charset="utf-8"><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">script>head><body onload="brython()"><script type="text/python">from browser import documentdocument <= "Hello !"script>body>html>


将这份代码保存为index.html,双击在浏览器中打开,即可看到Hello !字样:

6366928c42481778af97fb4efcc7e51f.png

原理:

代码的head中,引入了一个Brython引擎附带的 brython.min.js 模块,用于使用Python控制页面。

而在

可以看到,需要在document中显示文本,直接输入:

document <= "你所需要显示的文本"

即可,后续你将会看到用Brython使用标准化的DOM语法和页面交互的例子。

2.用HTML标签来做文本格式化:

如加粗文本:

from browser import document, htmldocument <= html.B("Hello !")

部分加粗、部分不加粗:

from browser import document, htmldocument <= html.B("Hello, ") + "world !"

i 标签:

document <= html.UL(html.LI(i) for i in range(5))

超链接:

document <= html.A("Python实用宝典", href="https://pythondict.com")

以上例子如下:

<html><head><meta charset="utf-8"><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">script>head><body onload="brython()"><script type="text/python">from browser import document, htmldocument <= html.B("Hello !")document <= html.UL(html.LI(i) for i in range(5))document <= html.A("Python实用宝典", href="https://pythondict.com")script>body>html>

效果:

5f37e4d89f38b3ca33cd1c93f292f892.png

3.写一个简单的计算器

先写好简单的图形架构,用th和tr标签即可:

from browser import document, htmlcalc = html.TABLE()calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +                html.TH("C", id="clear"))lines = ["789/",        "456*",        "123-",        "0.=+"]calc <= (html.TR(html.TD(x) for x in line) for line in lines)document <= calc

图片版代码:

812e0fe7a976c39f99da8b73037310cc.png

29adf9f3434fc724f9169e76f1f7f1f7.png

然后加上一些css就可以把这个简单的图形架构变漂亮了:

*{font-family: sans-serif;font-weight: normal;font-size: 1.1em;}td{background-color: #ccc;padding: 10px 30px 10px 30px;border-radius: 0.2em;text-align: center;cursor: default;}#result{border-color: #000;border-width: 1px;border-style: solid;padding: 10px 30px 10px 30px;text-align: right;}

1b2ac3459b93d01027e0a9e2f9086830.png

最后只需要做运算符的事件触发器即可,从下面这行代码:

calc <= (html.TR(html.TD(x) for x in line) for line in lines)

可以看出,所有的按钮都被创建为td标签,因此我们要获得所有这些按钮是否被点击,仅需要:

for button in document.select("td"):    button.bind("click", action)

意思是,按钮被点击后便执行 action 操作,action操作定义如下:

def action(event):    """Handles the "click" event on a button of the calculator."""    # The element the user clicked on is the attribute "target" of the    # event object    element = event.target    # The text printed on the button is the element's "text" attribute    value = element.text        if value not in "=C":        # update the result zone        if result.text in ["0", "error"]:            result.text = value        else:            result.text = result.text + value                elif value == "C":        # reset        result.text = "0"            elif value == "=":        # execute the formula in result zone        try:            result.text = eval(result.text)        except:            result.text = "error"

图片版代码:

7af0c2acd84dd1e0e6d0629ae7b9205f.png

如果不是=号或C号,则进行字符串拼接

如果是C号,则清空result。

如果是=号,则需要计算出结果,直接对字符串用eval()函数即可完成目的。

这边是全部核心代码了,写起来真的极其方便。

完整源代码可在Python实用宝典公众号后台回复 brython计算器 下载。

对了,编程时如果有遇到任何问题,都欢迎加群提问,千万不要嫌麻烦,对于你学习Python上的帮助可能是巨大的:

想加入Python互助群直面大佬?运行一行代码即可!

我们的文章到此就结束啦,如果你喜欢今天的Python 实战教程,请持续关注Python实用宝典。

原创不易,希望你能在下面点个赞和在看支持我继续创作,谢谢!

Python实用宝典 (pythondict.com)

不只是一个宝典

欢迎关注公众号:Python实用宝典 ff79d85c538f47c36a8e56e0cc4e02ff.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值