快捷導(dǎo)航

基于python詳解PyScript到底是什么

更新時(shí)間：2022年06月13日 16:53:46 作者：??Python編程學(xué)習(xí)圈????

這篇文章主要介紹了基于python詳解PyScript到底是什么?文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的朋友可以參考一下下面文章內(nèi)容

前言:

最近 Anaconda 開大會(huì)發(fā)布了 PyScript ，它允許我們將 Python 代碼嵌入到 HTML 中，并在瀏覽器中允許。PyScript 旨在為用戶提供一流的編程語(yǔ)言，該語(yǔ)言具有一致的樣式規(guī)則、更具表現(xiàn)力且更易于學(xué)習(xí)。

熟悉前端的朋友應(yīng)該馬上就可以反應(yīng)到：這就是替代 JavaScript ??！

確實(shí)，這個(gè)功能就類似于 JavaScript，如果后面發(fā)展得好的話，我們完全可以不寫 JavaScript，直接寫 Python 也能實(shí)現(xiàn)一樣的效果。

這個(gè)項(xiàng)目出來(lái)之后，馬上躥升到 GitHub 趨勢(shì)榜榜首，短短20天已經(jīng)有 10K+ 的 star 了，可見其熱度之高。

我們不知道 anaconda 有沒(méi)有這個(gè)野心，但是 PyScript 的出現(xiàn)，確實(shí)是一件振奮人心的事情，意味著你會(huì) Python 的話，再加上前端知識(shí)，就可以寫出漂亮的前端頁(yè)面了。對(duì)于 Pythoner 來(lái)說(shuō)，我們可以用 Python 和 HTML前端知識(shí)做全棧工程師了。

作用

PyScript 核心特性：

Python in the browser：?jiǎn)⒂?drop-in content、外部文件托管（基于 Pyodide 項(xiàng)目），以及不依賴服務(wù)器端配置的應(yīng)用程序托管。
Python 生態(tài)：提供流行的 Python 和科學(xué)計(jì)算軟件包（例如 numpy, pandas, scikit-learn 等）。
Python with JavaScript：在 Python 和 JavaScript 對(duì)象和命名空間之間進(jìn)行雙向通信。
環(huán)境管理：開發(fā)者可定義要引入哪些包和文件，以便頁(yè)面代碼的運(yùn)行。
可視化應(yīng)用開發(fā)：開發(fā)者可使用現(xiàn)成的 UI 組件，如按鈕、容器、文本框等。
靈活的框架：開發(fā)者可以利用它在 Python 中直接創(chuàng)建和分享新的可插拔和可擴(kuò)展的組件。

PyScript 目標(biāo)：

提供干凈簡(jiǎn)單的 API。
支持標(biāo)準(zhǔn) HTML。
擴(kuò)展 HTML 以讀取穩(wěn)定且可靠的自定義組件。
提供可插拔、可擴(kuò)展的組件系統(tǒng)。

使用方法

下面，我們來(lái)體驗(yàn)一下這個(gè)新生事物吧！

我們可以使用 CDN 來(lái)安裝 PyScript：

<link?rel="stylesheet"? rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ?/>
<script?defer?src="https://pyscript.net/alpha/pyscript.js"></script>

接著，我們來(lái)看看一個(gè)簡(jiǎn)單的頁(yè)面：

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<!--?引入?PyScript?-->
????<link?rel="stylesheet"? rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ?/>
????<script?defer?src="https://pyscript.net/alpha/pyscript.js"></script>
????<title>First?PyScript?Application</title>
????<style>
????????py-script?{
????????????width:?100%;
????????????height:?100%;
????????????font-size:?20px;
????????????text-align:?center;
????????????position:?absolute;
????????}
????</style>
</head>
<body>
????<py-script>
????????print('Hello?PyScript!')
????</py-script>
</body>
</html>

運(yùn)行這個(gè)程序，你就可以在瀏覽器頁(yè)面上看到這個(gè)結(jié)果了：

這就是我們著名的Hello式問(wèn)候！

這段前端代碼里面，我們直接使用py-script標(biāo)簽包裹 Python 代碼，就實(shí)現(xiàn)前端腳本控制功能了。

我這里是在 vscode 里面運(yùn)行的，運(yùn)行代碼之前需要安裝Live Server這個(gè)插件，然后就可以直接瀏覽器訪問(wèn)了。

我們?cè)賮?lái)看一個(gè)復(fù)雜一點(diǎn)的例子：

<html>
????<head>
??????<link?rel="stylesheet"? rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ?/>
??????<script?defer?src="https://pyscript.net/alpha/pyscript.js"></script>
??????<link? rel="external nofollow" ?rel="stylesheet"?crossorigin="anonymous">
????</head>

??<body>
????<b><p>Today?is?<u><label?id='today'></label></u></p></b>
????<br>
????<div?id="pi"?class="alert?alert-primary"></div>
????<py-script>
????????import?datetime?as?dt
????????pyscript.write('today',?dt.date.today().strftime('%A?%B?%d,?%Y'))

????????def?compute_pi(n):
????????????pi?=?2
????????????for?i?in?range(1,n):
????????????????pi?*=?4?*?i?**?2?/?(4?*?i?**?2?-?1)
????????????return?pi

????????pi?=?compute_pi(100000)
????????pyscript.write('pi',?f'π?is?approximately?{pi:.3f}')
????</py-script>
??</body>
</html>

這個(gè)例子中，我們使用<py-script>標(biāo)簽，在里面提供.write()方法，將字符串寫到頁(yè)面的標(biāo)簽中。

運(yùn)行這段代碼，我們會(huì)看到瀏覽器頁(yè)面的結(jié)果：

我們還可以在頁(yè)面中引入 Python 的包，來(lái)實(shí)現(xiàn)一些簡(jiǎn)便的操作。

<html>
????<head>
??????<link?rel="stylesheet"? rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ?/>
??????<script?defer?src="https://pyscript.net/alpha/pyscript.js"></script>
??????<py-env>
????????-?numpy
????????-?matplotlib
??????</py-env>
????</head>
??<body>
????<h1>Let's?plot?random?numbers</h1>
????<div?id="plot"></div>
????<py-script?output="plot">
????????import?matplotlib.pyplot?as?plt
????????import?numpy?as?np
????????x?=?np.random.randn(1000)
????????y?=?np.random.randn(1000)

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

在這里，我們引用了numpy和 matplotlib這兩個(gè)包，引用包是在<head>標(biāo)簽內(nèi)部通過(guò)<py-env>標(biāo)簽來(lái)實(shí)現(xiàn)。

運(yùn)行這個(gè)程序，我的頁(yè)面始終處于加載狀態(tài)：

現(xiàn)階段，運(yùn)行帶有 PyScript 的頁(yè)面加載速度還是有點(diǎn)感人的，好像一下子回到了原始年代。所以，想要被大家廣泛使用還有很長(zhǎng)的路要走。

目前階段，我們還只能繼續(xù)等待，想要嘗鮮的話，可以在去 GitHub 上看看。在公眾號(hào)后臺(tái)留言PyScript獲取項(xiàng)目的 GitHub 地址。

總結(jié)

項(xiàng)目現(xiàn)在還在完善階段，許多功能還沒(méi)有支持，但是從其熱度和參與貢獻(xiàn)的人數(shù)來(lái)看，前途還是光明的，畢竟 Python 有著這么多的應(yīng)用基礎(chǔ)，學(xué)會(huì) Python 就可以寫前端， Python 的那些便捷操作庫(kù)都可以在頁(yè)面直接使用的話，會(huì)大大提高大家的效率，我們也不用去學(xué)習(xí)現(xiàn)在越來(lái)越復(fù)雜的那一套前端技術(shù)了。

到此這篇關(guān)于基于python詳解PyScript到底是什么的文章就介紹到這了,更多相關(guān)python PyScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: