Brython 入門指南

簡介

在開發 Web 應用程序時 - 我們通常使用多種技術和語言。後端可以很容易地用 Java（Spring Boot）、Python（Django 或 Flask）或 JavaScript（Node.js）構建，儘管前端更常見的是 JavaScript（React、Angular 等）。有時，我們甚至會採用混合方法，讓服務器端呈現頁面，並在 React 等前端框架中完成最後的潤色。

多年來，鑑於其在 Web 上的流行，JavaScript 社區擴展了原始功能以啟用 JavaScript 驅動的後端，包括前端。在 JavaScript 中編寫 Web 應用程序的最常見方法是使用 MEAN 堆。一個 MongoDB 數據庫，Node.js 和 Express.js 用於後端，Angular（或最近的 React）用於前端。

但是如果你真的更喜歡 使用 Python 開發您的應用程序？雖然嚴格專注於一種編程語言是不可取的 - 語言是工具，而專注於一種工具會降低您的靈活性 - 單語言應用程序仍有空間。

Brython 可能是解決方案！ 它是一個 JavaScript 庫，可讓您在瀏覽器中運行 Python 代碼。

顧名思義，Brython 的主要目標是取代 JavaScript 並將 Python 作為 Web 瀏覽器的主要腳本語言，用於您的應用程序：

<html>
    <head>
        <script src="/brython.js"></script>
    </head>
    <body onload="brython()">
        <script type="text/python">
            import browser
            browser.document <= "Hello world!"
         </script>
    </body>
</html>

<script> 通常不支持 text/python type 可以解釋 Python 我們編寫的代碼。在這裡，我們打印了一個 Hello World 給browser.document的消息，類似於 JavaScript 的 document .

在本Brython 入門指南中 - 我們將了解如何安裝 Brython、如何初始化 Brython 項目、如何設置頁面樣式，以及將其與一些替代方案進行比較。

如何安裝 Brython

利用內容交付網絡

實際上，安裝 Brython 最方便的方法可能是根本不安裝它。如果您不需要將其本地安裝到您的 PC，而只需要將其加載到靜態網頁上以向頁面添加一些動態功能，您應該考慮簡單地導入外部資源。

這個想法是加載 brython.js <head> 中的庫 HTML 頁面的部分。這樣，客戶端將在其 PC 上加載 HTML 頁面的同時下載庫。

為了實現這種行為，我們將從一些 CDN 加載我們的庫 （內容交付網絡） 在線託管最新穩定版本的 Brython。

有多種 CDN 可供選擇，但三種流行的是：

<!-- Option 1 : jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>

<!-- Option 2: CloudFlare CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython_stdlib.min.js"></script>

<!-- Option 3: GitHub as the CDN -->
<!-- Choose this option if you want to use the latest developement version -->
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js"></script>
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js"></script>

通過 Pip 安裝 Brython

如果您希望 Brython 具有更大的靈活性，您可以在本地安裝它：

$ pip3 install brython

pip 將毫不費力地在本地計算機上下載並安裝該軟件包。讓我們驗證一下 Brython 是否安裝成功：

$ pip show brython

這會打印出版本，以及 Brython 包的一些基本信息：

Name: brython
Version: 3.9.2
Summary: Brython is an implementation of Python 3 running in the browser
Home-page: http://brython.info
Author: Pierre Quentel
Author-email: [email protected]
License: BSD

如何初始化 Brython 項目

安裝 Brython 後，下一步顯然是創建一個簡單的項目來測試其功能。要創建項目，請創建一個新文件夾並移至其中：

$ mkdir brython-project
$ cd brython-project

現在您可以運行以下命令來初始化 Brython 項目：

$ brython-cli --install

這將創建並初始化一個 Brython 項目，包括起始項目目錄和文件層次結構：

brython-project
    | brython.js
    | brython_stdlib.js
    | demo.html
    | index.html
    | README.md
    | unicode.txt

首先，讓我們解釋一下所有這些文件的用途：

brython.js - Brython核心引擎，包含browser等最常用的模塊 , browser.html , javascript ... 該文件使用 <script> 包含在 HTML 頁面中如果我們選擇不在本地安裝 Brython，請標記。
brython_stdlib.js - 由 Brython 支持的 Python 標準庫中的所有包和模塊組成。
demo.html - 一個運行 Brython 的簡單 HTML 頁面，展示了一些有趣的用例和示例，說明我們如何利用 Brython 修改靜態 HTML 頁面。
index.html - 一個簡單的Hello World HTML 頁面。

可以打開demo.html 只使用一個簡單的網絡瀏覽器，但這種方法有其局限性，因此建議您先啟動一個 localhost 服務器。

如果您還沒有 http 模塊已安裝，也可以通過 pip 安裝：

$ pip3 install http

安裝後，我們可以啟動服務器：

$ python3 -m http.server

現在，您應該在（默認）port 8000 上啟動 localhost ，您應該能夠訪問 demo.html 通過導航到 http://localhost:8000/demo.html 頁面（或 http://0.0.0.0:8000/demo.html ) 在您選擇的網絡瀏覽器的地址欄中。

如果 8000 端口當前被其他進程使用，則必須定義另一個要使用的端口（例如 8080）：

$ python3 -m http.server 8080

要創建一個能夠運行 Python 的新 HTML 頁面，您只需要導入 brython.js 和 brython_stdlib.js head 中的文件文件的部分。然後你可以繼續在 HTML 文件中編寫 Python：

<script src="brython.js"></script>
<script src="brython_stdlib.js.js"></script>

Brython 的工作原理

Brython 使我們能夠通過將 Python 代碼轉換為 JavaScript 來在瀏覽器中編寫和運行 Python 代碼。這段代碼將能夠在所有支持 JavaScript 的現代瀏覽器中運行，因為 Brython 故意避免使用新的、不受支持的語法生成 JavaScript。

Brython 中的轉譯發生在加載 HTML 頁面的同時。在這裡，我們稱 brython() body 中的函數 HTML 文檔的標籤：

<body onload="brython()">

brython() 函數執行編寫在 <script type="text/python"> 中的 Python 代碼的轉換 HTML 文檔的標籤。所有 Python 代碼必須用 <script type="text/python"> 包圍標籤：

<script type="text/python">
    <!-- Python code -->
</script>

或者，我們可以使用以下命令將外部 Python 代碼加載到 HTML 文檔中：

<script type="text/python" src="test.py"></script>

所有現代 Web 瀏覽器都支持 JavaScript 作為主要腳本語言，但不支持 Python。因此，所有 Python 代碼都需要翻譯成 JavaScript，然後在加載 HTML 頁面所需的時間內運行。

一、brython() 函數通過檢查所有類型為 text/python 的腳本來搜索 HTML 頁面中的所有 Python 代碼然後將所有代碼轉換為 JavaScript：

Brython 使用 JavaScript eval() 運行所有已翻譯代碼的函數。或者，它可以使用 JavaScript 命令 new Function(function_name, source)(module) 在某些瀏覽器上運行代碼。

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習它！

如果 Python 代碼通過 <script type="text/python" src="url"> 加載到 HTML 文檔中 , Brython 執行 Ajax 調用以獲取加載文件的內容。該代碼被翻譯成 JavaScript 並以與上述相同的方式執行。

使用 Brython - 示例

現在，讓我們看幾個簡單的示例，以便您了解 Brython 的工作原理及其功能：

你好世界

<html>
    <head>
        <script src="/brython.js"></script>
    </head>
    <body onload="brython()">
        <script type="text/python">
            import browser
            browser.document <= "Hello world!"
        </script>
    </body>
</html>

我們將重點介紹 <script type="text/python"></script> 之間的 Python 代碼標籤：

import browser 加載 browser 打包到腳本中。它是將所有 Brython 特定名稱和模塊組合在一起的包，主要用於表示 JavaScript 中使用的 DOM 元素和事件。
browser.document 是一個代表當前顯示的 HTML 文檔的對象。
browser.document <= "Hello world!" - 我們正在使用 <= 符號而不是 = . document “接收”包含字符串 Hello world! 的新元素 .另一種方法是使用以下語法：browser.document.attach("Hello world!") .

在客戶端，一旦這段代碼被渲染 - 它會導致：

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

添加元素和屬性

讓我們修改前面的示例並為其添加一些段落和文本格式。 browser 界面為我們提供了html 模塊，它公開了 HTML 標籤，我們可以使用這些標籤從 Python 代碼動態創建 HTML 結構。創建對象的語法是：

browser.html.TAG("content", [attributes])

哪個輸出：

<TAG [attributes]>content</TAG>

browser.html.H2("Hello world!") 包裝 Hello world 帶有 <h2> 的字符串標記。
browser.html.A("link", href="stackabuse.com") 創建一個 <a href="stackabuse.com"> 標記。

嵌套也可以使用這種語法，只需包含 html.element 在另一個元素中。讓我們在頁面中添加一些元素：

<html>
    <head>
        <script src="/brython.js"></script>
    </head>
    <body onload="brython()">
        <script type="text/python">
            import browser
            
            title = browser.html.H2("Hello world!")

            bold = browser.html.B("bold text")
            url = browser.html.A("link", href="stackabuse.com")
            paragraph = browser.html.P("This is a paragraph. This is " + bold + ", and this is a " + url)

            browser.document <= title
            browser.document <= paragraph         
        </script>
    </body>
</html>

或者，不要使用 url = browser.html.A("link", href="stackabuse.com") 之類的參數創建對象，您可以在沒有任何參數的情況下創建它並構建它：

# Creating an <a></a> tag
url = browser.html.A()

# Adding content between created tags
# <a>Url Text</a>
url <= "Url Text"
# Adding href attribute
# <a href="stackabuse.com">Url Text</a>
url.href = "stackabuse.com"

當我們完成 Python 代碼並在瀏覽器中打開頁面時 - 生成的 HTML 頁面應如下所示：

<html>
    <head>
        <script src="/brython.js"></script>
    </head>
    <body onload="brython()">
        <h2>Hello world!</h2>
        <p>
            This is a paragraph. This is <b>bold text</b>, and this is a 
            <a href="stackabuse.com">link</a>.
        </p>
    </body>
</html>

我們有一個 <p> 元素，我們在其中使用了 <b> 和 <a> 元素，預先構造。

用 Brython 創建表

可以使用與我們迄今為止應用的邏輯大致相同的邏輯來創建表：

table = browser.html.TABLE()

現在，讓我們用一些模擬數據創建幾行並將它們添加到 table ：

# Creating the row
row = browser.html.TR()
# Adding header cells
row <= browser.html.TH("Header1")
row <= browser.html.TH("Header2")
# Appending the row to the table
table <= row

# Adding a first row
row = browser.html.TR()
row <= browser.html.TD("Data 1")
row <= browser.html.TD("Data 2")
table <= row

最後，我們選擇在銀行<div id="table-zone">中顯示表格在 HTML 頁面上創建的元素：

tableZone = browser.document["table-zone"] 
tableZone <= table

這會在我們的頁面上生成一個 HTML 表格：

<div id="table-zone">
    <table>
        <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>Data 1</td>
              <td>Data 2</td>
            </tr>
        </tbody>
    </table>
</div>

向現有元素添加樣式

讓我們為 <div id="table-zone"> 添加一些樣式和 table 元素：

tableZone.style = {
            "background-color": "#dedfdd",
            "width": "50%",
            "min-height": "100px",
            "margin": "auto"
            }
            
table.style = {
            "border": "1px solid #333",
            "margin": "auto"
            }

這將導致修改 HTML 標記為 style 添加屬性：

<div id="table-zone" style="background-color: rgb(222, 223, 221); width: 50%; min-height: 100px; margin: auto;">
    
<table style="border: 1px solid rgb(51, 51, 51); margin: auto;">

綁定動作並從元素中讀取內容

網頁不僅用於顯示數據 - 它們還用於捕獲數據。表單是我們提示用戶發送數據的最基本方式之一。讓我們使用 FORM() 在 Brython 中創建一個表單函數，以及其他 HTML 元素，例如 INPUT() 和 LABEL() ：

# Create a <div id="form-div"> element as a container for a new form
formDiv = browser.html.DIV(id="form-div")
# Create a <form> element 
form = browser.html.FORM()

# Create the <input type="text"> field wit the label and add it to the form
input = browser.html.INPUT()
input.type = "text"
input.id = "input-name"
# Add label and to the form
form <= browser.html.LABEL("Enter your name: ") + input

# Create the submit button and add it to the form
button = browser.html.INPUT()
button.type = "button"
button.value = "Submit"
button.id = "submit-button"
form <= button

# Add form to the container <div> element
formDiv <= form
# Add the <h4 id="form-response"> to show the value from the form
formDiv <= browser.html.H4("Your name is: ", id="form-response")
# Display the div element containing form on the page
browser.document <= formDiv

不做任何事情的表單不是很有用。我們也可以在 Brython 中使用自定義函數。讓我們創建一個在 click 上調用的 Python 函數 submit 按鈕。它將提醒用戶該按鈕已被單擊並更新 <h4 id="form-response"> 的值元素：

def onSubmit(ev):
    # Get the value of the <input id="input-name"> field
    name = browser.document["input-name"].value
    # Append the stored value to the content in the <h4 id="form-response"> tag
    browser.document["form-response"] <= name
    # Alert the user that the button has been clicked
    browser.alert("The Submit Button is Clicked")

最後，我們綁定了 click submit-button 的事件使用創建的 onSubmit() 函數，以便我們在按鈕單擊時獲得所需的行為：

browser.document["submit-button"].bind("click", onSubmit)

Brython 與替代品相比如何

除了 Brython 之外，還有其他幾種在網絡瀏覽器中運行 Python 代碼的解決方案，那麼你應該選擇哪一種呢？

系統	編譯時間	運行機制
BRYTHON	頁面加載	將 Python 轉換為 JavaScript
Transcrypt	提前	將 Python 轉換為 JavaScript
巴達維亞	提前	瀏覽器中的 Python 運行時
Skulpt	頁面加載後	將 Python 轉換為 JavaScript
PyPy.js	頁面加載後	瀏覽器中的 Python 運行時
Pyodide	頁面加載後	瀏覽器中的 Python 運行時

其中一些傾向於完全取代 JavaScript，而另一些只是為 Web 瀏覽器創建一個有用的 Python 環境，作為 JavaScript 的可能替代品。相比之下，一些解決方案是將 Python 代碼轉換為 JavaScript，例如 Brython、Skulpt 和 Transcrypt。

就編譯時間而言，它是在加載 HTML 文檔之前、之後或加載時執行的。

在對瀏覽器中 Python 代碼執行速度進行基準測試時，Brython 通常處於較快的一端 .它傾向於在提前將 Python 編譯（轉譯）為 JavaScript 的解決方案的快速執行與包含必須由客戶端（下載）以運行“提前”中的腳本的已翻譯代碼的大文件之間做出折衷。時間”的方法。

Brython 似乎離那個甜蜜點很近。

注意： 根據定義，Brython 總是比僅使用 JavaScript 編寫相同的代碼要慢。這是因為增加了轉譯步驟，它永遠不會是 0ms，之後 JavaScript 代碼運行。

結論

如果您正在尋找 JavaScript 作為 Web 腳本語言的替代品，並且不太關心性能，那麼 Brython 可能是一個不錯的解決方案。

它平衡了執行速度和加載庫所需的過多內存使用之間不可避免的權衡，使其成為在瀏覽器中運行 Python 的最佳解決方案之一。

另一方面，Brython 沒有龐大的社區，也沒有被廣泛接受或使用。學習資源非常有限，您將僅限於主要是官方文檔，沒有許多現實世界的大型項目可以尋求指導。

最終，主要問題是是否值得完全替換 JavaScript。與用 JavaScript 編寫的完全相同的項目相比，即使是小型 Brython 項目的執行速度也可能慢 2 倍。與 Brython 不同的是，JavaScript 擁有龐大的開發者社區、海量資源和展示其全部潛力的實際項目。

我們不要忘記所有的 JavaScript 框架，它們是 JavaScript 流行的支柱。如果沒有他們的幫助，JavaScript 將只是另一種腳本語言，它為我們提供了動態更改靜態 HTML 頁面內容的能力。例如，想像一下用純 JavaScript 編寫複雜的服務器端邏輯。即使這樣可行，也肯定不會是一次非常愉快的體驗。

不幸的是，Brython 沒有為其開發的框架，因此您只能使用純 Python 代碼，這對於除了簡單用例之外的任何事情都是不合理的。您可能無法使用 Brython 創建一些複雜的單頁 Web 應用程序，就像使用 JavaScript 和 Angular 一樣。 Brython 對於希望只使用 Python 進行服務器端和客戶端編程的開發人員來說是一個很棒的工具，但它距離取代 JavaScript 可能還有很長的路要走。

使用 Cypress 在 JavaScript 中進行端到端測試

JavaScript：獲取列表中的最後一個元素

Brython 入門指南

簡介

如何安裝 Brython

利用內容交付網絡

通過 Pip 安裝 Brython

如何初始化 Brython 項目

Brython 的工作原理

免費電子書：Git Essentials

使用 Brython - 示例

你好世界

添加元素和屬性

用 Brython 創建表

向現有元素添加樣式

綁定動作並從元素中讀取內容

Brython 與替代品相比如何

結論

7.css - 我的案例研究

撲熱息痛.js💊| #32：解釋這段 JavaScript 代碼

使用 WSL 2 和 VS Code 在 Windows 上運行 Linux

在 Node.js 中創建雙工流

使用 react-canvas-draw 創建一個簡單的繪圖應用程序

合併 JavaScript 對象

如何為您的 JavaScript 應用程序設置 Airbrake 錯誤監控

JavaScript：[我，需要，數組]

( ) => 在 addEventListener 中不會被執行

通天塔 <3 反應

JavaScript 對象：按名稱作為字符串訪問變量屬性

ForbiddenError:無效的 csrf 令牌，表達 js

為什麼您現在應該使用 Node-RED！

反應堆棧 2021

如何在 Nuxt/Vue 中檢測向上和向下滾動

Vue 中的 GraphQL 視圖

具有幾乎所有功能的數據表 - Codepen

Oruga：街區裡的新孩子