Python作為膠水語(yǔ)言，真的是無(wú)所不能。這不，最近又出現(xiàn)一個(gè)基于Python3，目標(biāo)是替代JavaScript的前端開發(fā)工具—Brython.

好用嗎?咱今天來(lái)試試用它寫一個(gè)計(jì)算器有多簡(jiǎn)單：

不過(guò)，我們首先要知道它作為Python的客戶端Web編程工具，和JS有什么區(qū)別呢？

1.特點(diǎn)

1.可輕易地在頁(yè)面中內(nèi)嵌Python終端進(jìn)行測(cè)試

2.運(yùn)行速度接近于CPyhon

3.寫法方便，社區(qū)強(qiáng)大，可進(jìn)行敏捷開發(fā)

我個(gè)人覺得相同的功能，用Python寫起來(lái)可能會(huì)比JS快。

4.和JS一樣，你不用安裝任何東西就可以開始編寫

下面就用Brython做一些簡(jiǎn)單的實(shí)驗(yàn)吧。

2.實(shí)驗(yàn)

1.在頁(yè)面上顯示 Hello !：

< !doctype html >
< 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
document <= "Hello !"
< /script >
< /body >
< /html >

將這份代碼保存為index.html，雙擊在瀏覽器中打開，即可看到Hello !字樣：

原理：

代碼的head中，引入了一個(gè)Brython引擎附帶的 brython.min.js 模塊，用于使用Python控制頁(yè)面。

而在 和 之間就是相應(yīng)的Python代碼。

可以看到，需要在document中顯示文本，直接輸入：

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

即可，后續(xù)你將會(huì)看到用Brython使用標(biāo)準(zhǔn)化的DOM語(yǔ)法和頁(yè)面交互的例子。

2.用HTML標(biāo)簽來(lái)做文本格式化：

如加粗文本：

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

部分加粗、部分不加粗：

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

i 標(biāo)簽：

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

超鏈接：

document <= html.A("Python實(shí)用寶典", href="https://pythondict.com")

以上例子如下：

< !doctype html >
< 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, html
document <= html.B("Hello !")
document <= html.UL(html.LI(i) for i in range(5))
document <= html.A("Python實(shí)用寶典", href="https://pythondict.com")
< /script >
< /body >
< /html >

效果：

3.寫一個(gè)簡(jiǎn)單的計(jì)算器

先寫好簡(jiǎn)單的圖形架構(gòu)，用th和tr標(biāo)簽即可：

from browser import document, html
calc = 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

圖片版代碼:

然后加上一些css就可以把這個(gè)簡(jiǎn)單的圖形架構(gòu)變漂亮了：

< style >
*{
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;
}
< /style >

最后只需要做運(yùn)算符的事件觸發(fā)器即可，從下面這行代碼：

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

可以看出，所有的按鈕都被創(chuàng)建為td標(biāo)簽，因此我們要獲得所有這些按鈕是否被點(diǎn)擊，僅需要：

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

意思是，按鈕被點(diǎn)擊后便執(zhí)行 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"

圖片版代碼:

如果不是=號(hào)或C號(hào)，則進(jìn)行 字符串拼接 。

如果是C號(hào)，則清空result。

如果是=號(hào)，則需要計(jì)算出結(jié)果，直接對(duì)字符串用eval()函數(shù)即可完成目的。

這邊是全部核心代碼了，寫起來(lái)真的極其方便。