PyScript：讓Python在HTML中運行

家好，我是DD，已經是封閉在家的第51天了！

最近一直在更新Java新特性（https://www.didispace.com/java-features/）和IDEA Tips（https://www.didispace.com/idea-tips/）兩個原創專欄，其他方向內容的動態關注少了。昨天天晚上刷推的時候，瞄到了這個神奇的東西，覺得挺cool的，拿出來分享下：

相信你看到圖，不用我說，你也猜到是啥了吧？html里可以跑python代碼了！

看到好多Python公眾號已經開始猛吹未來了，但乍看怎么覺得有點像JSP？或者一些模版引擎？是進步還是倒退呢？與其瞎想，不如仔細看看這個東東的能力吧！

根據官方介紹，這個名為PyScript的框架，其核心目標是為開發者提供在標準HTML中嵌入Python代碼的能力，使用 Python調用JavaScript函數庫，并以此實現利用Python創建Web應用的功能。

看到介紹里提到了調用JavaScript函數庫的能力，看來跟JSP或者模版引擎還是有區別的。

PyScript 快速體驗

官方給了一個例子，可以幫助我們觀的感受這個開發框架的能力，不妨跟著DD看看，它能做啥吧！

第一個案例，hello world

代碼很簡單，就下面這幾行。你只需要創建一個html文件，然后復制進去就可以了。

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> 
    <py-script> 
        print('Hello, World!') 
    </py-script> 
  </body>
</html>

保存好之后，在瀏覽器里打開就能看到這樣的頁面了：

回頭再看看這個html里的內容，三個核心內容：

引入pyscript的樣式文件：<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
引入pyscript的腳本文件：<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>標簽中寫具體的python代碼來輸出Hello World

如果你懶得自己敲代碼的話，本文的兩個案例代碼我打包放在公眾號了，需要的朋友可以關注公眾號“程序猿DD”，回復：pyscript 獲取。

第二個案例，數據定義 + 數據展示

先創建一個data.py文件，然后加入前面的代碼。功能很簡單，就是隨機生成（x，y）的坐標

import numpy as np

def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

再創建一個html文件，加入下面的代碼

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
        - paths:
          - /data.py
      </py-env>
    </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
    import matplotlib.pyplot as plt
    from data import make_x_and_y

    x, y = make_x_and_y(n=1000)

    fig, ax = plt.subplots()
    ax.scatter(x, y)
    fig
    </py-script>
  </body>
</html>

這里就稍微復雜一些了，除了hello world中的幾個要點外，這里還有這幾個要關注的地方：

<py-env>標簽：這里聲明要引入的包和要引入的文件（上面創建的data.py）
<py-script output="plot">：這里定義了要在<div id="plot"></div>中輸出的內容，可以看到這里的邏輯都是用python寫的

這個頁面的執行效果是這樣的：

是不是很神奇呢？整個過程中都沒有大家熟悉的cs、js內容，就完成了這樣一個圖的頁面實現。

小結

最后，談談在整個嘗試過程中，給我的幾個感受：

開發體驗上高度統一，對于python開發者來說，開發Web應用的門檻可以更低了
感覺性能上似乎有所不足，幾個復雜的案例執行有點慢，開始以為是部分國外cdn的緣故，后來移到本地后，還是慢。這部分可能還需要進一步優化。

這個開發框架目前還只是alpha版本，未來一定還會有更多特性與優化出來，總體上我覺得這個框架還是非常cool的，尤其對于剛學會Python，或者只會Python，但又想快速開發Web應用的小伙伴來說，可能將會是個不錯的選擇，那你覺得這個框架如何？未來會不會火？留言區聊聊吧！

avaScript 和 Python 是世界上最流行和最常用的兩種語言。JavaScript 是前端和后端 Web 開發不可或缺的一部分。Python 更適合后端和快速應用程序開發。

兩者各有所長，可以通過從 Python 代碼中運行 JavaScript 代碼來強強聯合，達到兩全其美。

JavaScript

JavaScript 是一種用于 Web 開發的腳本語言。可以使用 JavaScript 向網頁添加行為和功能。是一種解釋性語言，這意味著代碼實時運行，而無需編譯器將其轉換為機器代碼。

JavaScrip 語法特征：

代碼塊：JavaScript 使用大括號 {} 定義；

變量：使用 var 關鍵字定義變量。語法： var variable_name = value;

常量：使用 const 關鍵字定義常量。語法：constant_name = value;

輸入/輸出：使用 window.prompt() 在 JavaScript 中獲取輸入，并使用 console.log() 在控制臺上顯示輸出。

Python

Python 是一種高級編程語言，在后端開發、人工智能和數據科學中得到了廣泛應用。Python 也是一種釋型語言。

Python 語法特征：

代碼塊：Python 使用縮進來定義；

變量： variable_name = value；

常量：Python 并不真正支持常量，但約定成俗規定大寫變量視為常量，例如 CONSTANT_NAME；

輸入/輸出：使用 input() 獲取輸入，并使用 print()顯示輸出。

js2Py 模塊

Js2Py 是一個 JavaScript 到 Python 的翻譯組件，要使用此模塊，請打開終端并執行安裝：

pip install js2py

Js2Py 自動將任何有效的 JavaScript 轉換為 Python，而無需使用任何依賴項。可以將大部分 JavaScript 代碼轉換為 Python 語言。

在 Python 中運行 JavaScript 代碼的示例

1.我們從經典的“Hello World”開始。

import js2py
js2py.eval_js('console.log("Hello World!")')

將 JavaScript 代碼作為參數傳遞給 eval_js（）以對其進行轉換。在 Python 的輸出終端上，顯示“Hello World!”。

2.兩個數字相加

在 Python 中使用 JavaScript 執行兩個數字相加的方法。

import js2py
js_add = '''function add(a, b){return a + b;}'''
add = js2py.eval_js(js_add)
print(add(3, 7))

使用 JavaScript 聲明一個函數，并將其存儲在字符串中。使用函數 eval_js() 以將其轉換為 Python 等效函數。通過函數調用兩個數字作為參數來顯示結果。

3.將整個 JavaScript 文件轉換為 Python 文件

有兩種簡單的方法可以將JavaScript文件轉換為Python文件。

(1) 使用run_file()函數直接執行 JavaScript 文件。

import js2py
eval_result, example = js2py.run_file('example.js')

(2)轉換整個JavaScript文件為Python文件。

import js2py
js2py.translate_file('example.js', 'example.py')

Python 在web 開發方面主要用于后端編碼，但也可以探索一些工具在前端嘗試它。

?
文章創作不易，如果您喜歡這篇文章，請關注、點贊并分享給朋友。如有意見和建議，請在評論中反饋！
?

ython 程序可以執行 JavaScript 代碼。實現這一點的常見方法包括使用以下幾種工具或庫：

1. **PyExecJS**：

- `PyExecJS` 是一個可以在 Python 中執行 JavaScript 代碼的庫。它支持多種 JavaScript 運行時環境，包括 Node.js、PhantomJS 和 JScript。

2. **PyMiniRacer**：

- `PyMiniRacer` 是一個 Python 包裝器，用于在 V8 引擎上執行 JavaScript 代碼。它非常輕量，適合需要快速執行簡單 JavaScript 代碼的場景。

3. **Node.js 子進程**：

- 可以使用 Python 的 `subprocess` 模塊來啟動一個 Node.js 進程，并在其中執行 JavaScript 代碼。

以下是使用這三種方法的示例：

### 使用 PyExecJS

首先，安裝 `PyExecJS`：

```sh

pip install PyExecJS

```

然后，可以在 Python 中執行 JavaScript 代碼：

```python

import execjs

# JavaScript 代碼

js_code = """

function add(a, b) {

return a + b;

}

"""

# 編譯并執行 JavaScript 代碼

ctx = execjs.compile(js_code)

result = ctx.call("add", 1, 2)

print(result) # 輸出：3

```

### 使用 PyMiniRacer

首先，安裝 `PyMiniRacer`：

```sh

pip install py_mini_racer

```

然后，可以在 Python 中執行 JavaScript 代碼：

```python

from py_mini_racer import py_mini_racer

# 創建一個 V8 引擎實例

ctx = py_mini_racer.MiniRacer()

# 執行 JavaScript 代碼

result = ctx.execute("function add(a, b) { return a + b; } add(1, 2);")

print(result) # 輸出：3

```

### 使用 Node.js 子進程

首先，確保安裝了 Node.js，然后在 Python 中使用 `subprocess` 模塊：

```python

import subprocess

import json

# JavaScript 代碼

js_code = """

function add(a, b) {

return a + b;

}

console.log(JSON.stringify(add(1, 2)));

"""

# 創建一個 Node.js 子進程

process = subprocess.Popen(

['node', '-e', js_code],

stdout=subprocess.PIPE,

stderr=subprocess.PIPE

)

stdout, stderr = process.communicate()

if process.returncode == 0:

result = json.loads(stdout)

print(result) # 輸出：3

else:

print("Error:", stderr.decode())

```

總結一下，雖然 Python 本身不直接支持執行 JavaScript 代碼，但通過使用上述庫和方法，可以輕松地在 Python 程序中執行 JavaScript 代碼。選擇哪種方法取決于你的具體需求和使用場景。

在線咨詢

上一篇：HTML 鏈接
下一篇：Space.js – HTML 驅動的頁面 3D 滾動效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

PyScript：讓Python在HTML中運行

PyScript 快速體驗

小結

JavaScript

Python

js2Py 模塊

在 Python 中運行 JavaScript 代碼的示例

您的項目需求