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 代码的示例

您的项目需求