作者：Ckend

來源：Python實用寶典Python作為膠水語言，真的是無所不能。這不，最近又出現一個基于 Python3，目標是替代 JavaScript 的前端開發工具 —Brython

好用嗎？咱今天來試試用它寫一個計算器：

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

1. 特點

1. 可輕易地在頁面中內嵌 Python 終端進行測試

2. 運行速度接近于 CPyhon

3. 寫法方便，社區強大，可進行敏捷開發

如果 Python 和 JS 你都寫過，那大概率會覺得相同的功能，用 Python 寫起來比 JS 更方便。

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

下面就用Brython做一些簡單的實驗吧。

2. 實驗

0. 安裝

與通常的 Python 庫一樣，可以通過 pip install brython 進行安裝。

然后在一個空目錄下執行：python -m brython --install1. 在頁面上顯示Hello !：

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

原理：

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

而在 之間就是相應的 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")以上例子如下：

效果：

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

然后加上一些 CSS 樣式就可以把這個簡單的圖形架構變漂亮了：

最后只需要做運算符的事件觸發器即可，從下面這行代碼：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?objectelement?=?event.target#?The?text?printed?on?the?button?is?the?element's?"text"?attributevalue?=?element.textif?value?not?in?"=C":#?update?the?result?zoneif?result.text?in?["0",?"error"]:result.text?=?valueelse:result.text?=?result.text?+?valueelif?value?==?"C":#?resetresult.text?=?"0"elif?value?==?"=":#?execute?the?formula?in?result?zonetry:result.text?=?eval(result.text)except:result.text = "error"

如果不是 = 號或 C 號，則進行?字符串拼接。

如果是 C 號，則清空 result。

如果是 = 號，則需要計算出結果，直接對字符串用?eval() 函數即可完成目的。

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

你可以訪問如下地址體驗這個 Python 寫的計算器：

https://pythondict.com/calculator.html

完整源碼：

https://pan.baidu.com/s/1d4ndpN1Lpzb6fpgqKJ7acQ

提取碼：v36f

---------End---------順便給大家推薦下我的微信視頻號「價值前瞻」，主要分享讀書、成長和投資思考，可以了解不一樣的我，歡迎掃碼關注。

總結

以上是生活随笔為你收集整理的python前端用什么写_Python 竟然也可以写网页前端了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。