Python 竟然也可以寫(xiě)網(wǎng)頁(yè)前端了!
Python作為膠水語(yǔ)言，真的是無(wú)所不能。這不，最近又出現(xiàn)一個(gè)基于 Python3，目標(biāo)是替代 JavaScript 的前端開(kāi)發(fā)工具 — Brython
好用嗎？咱今天來(lái)試試用它寫(xiě)一個(gè)計(jì)算器：
不過(guò)，我們首先要知道它作為 Python 的客戶端 Web 編程工具，和 JS 有什么區(qū)別呢？
1. 特點(diǎn)
1. 可輕易地在頁(yè)面中內(nèi)嵌 Python 終端進(jìn)行測(cè)試
3. 寫(xiě)法方便，社區(qū)強(qiáng)大，可進(jìn)行敏捷開(kāi)發(fā)
如果 Python 和 JS 你都寫(xiě)過(guò)，那大概率會(huì)覺(jué)得相同的功能，用 Python 寫(xiě)起來(lái)比 JS 更方便。
4.和 JS 一樣，你不用安裝任何東西就可以開(kāi)始編寫(xiě)
下面就用Brython做一些簡(jiǎn)單的實(shí)驗(yàn)吧。
2. 實(shí)驗(yàn)
0. 安裝
與通常的 Python 庫(kù)一樣，可以通過(guò) pip install brython 進(jìn)行安裝。
然后在一個(gè)空目錄下執(zhí)行：
python -m brython --install
將這份代碼保存為index.html，雙擊在瀏覽器中打開(kāi)，即可看到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, htmldocument <= html.B("Hello !")
部分加粗、部分不加粗：
i 標(biāo)簽：from browser import document, htmldocument <= html.B("Hello, ") + "world !"
document?<=?html.UL(html.LI(i)?for?i?in?range(5))document?<=?html.A("Python實(shí)用寶典",?)效果：<html><head><meta charset="utf-8"><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/[email protected]/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實(shí)用寶典", href="https://pythondict.com")script>body>html>
3. 寫(xiě)一個(gè)簡(jiǎn)單的計(jì)算器
先寫(xiě)好簡(jiǎn)單的圖形架構(gòu)，用th和tr標(biāo)簽即可：
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
然后加上一些 CSS 樣式就可以把這個(gè)簡(jiǎn)單的圖形架構(gòu)變漂亮了：
最后只需要做運(yùn)算符的事件觸發(fā)器即可，從下面這行代碼：
calc?<=?(html.TR(html.TD(x)?for?x?in?line)?for?line?in?lines)意思是，按鈕被點(diǎn)擊后便執(zhí)行 action 操作，action 操作定義如下：for?button?in?document.select("td"):button.bind("click", 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ù)?即可完成目的。
這邊是全部核心代碼了，寫(xiě)起來(lái)真的極其方便。
你可以訪問(wèn)如下地址體驗(yàn)這個(gè) Python 寫(xiě)的計(jì)算器：
https://pythondict.com/calculator.html
完整源碼：
https://pan.baidu.com/s/1d4ndpN1Lpzb6fpgqKJ7acQ?
提取碼：v36f
作者：Ckend?
來(lái)源：Python實(shí)用寶典
_往期文章推薦_Python小白如何寫(xiě)一個(gè)計(jì)算器