Python與Javascript相互調用超詳細講解（2022年1月最新）

先要明白的是，javascript和python都是解釋型語言，它們的運行是需要具體的runtime的。

Python： 我們最常安裝的Python其實是cpython，就是基于C來運行的。除此之外還有像pypy這樣的自己寫了解釋器的，transcrypt這種轉成js之后再利用js的runtime的。基本上，不使用cpython作為python的runtime的最大問題就是通過pypi安裝的那些外來包，甚至有一些cpython自己的原生包（像 collections 這種）都用不了。
JavaScript： 常見的運行引擎有google的V8，Mozilla的SpiderMonkey等等，這些引擎會把JavaScript代碼轉換成機器碼執行。基于這些基礎的運行引擎，我們可以開發支持JS的瀏覽器（比如Chrome的JS運行引擎就是V8）；也可以開發功能更多的JS運行環境，比如Node.js，相當于我們不需要一個瀏覽器，也可以跑JS代碼。有了Node.js，JS包管理也變得方便許多，如果我們想把開發好的Node.js包再給瀏覽器用，就需要把基于Node.js的源代碼編譯成瀏覽器支持的JS代碼。

在本文敘述中，假定：

主語言： 最終的主程序所用的語言
副語言： 不是主語言的另一種語言

例如，python調用js，python就是主語言，js是副語言

TL; DR

適用于：

python和javascript的runtime（基本特指cpython[不是cython！]和Node.js）都裝好了
副語言用了一些復雜的包（例如python用了numpy、javascript用了一點Node.js的C++擴展等）
對運行效率有要求的話:
python與javascript之間的交互不能太多，傳遞的對象不要太大、太復雜，最好都是可序列化的對象
javascript占的比重不過小。否則，python調js的話，啟動Node.js子進程比實際跑程序還慢；js調python的話，因為js跑得快，要花很多時間在等python上。
因為IPC大概率會用線程同步輸入輸出，主語言少整啥多進程多、線程之類的并發編程

有庫！有庫！有庫！

python調javascript

JSPyBridge ： pip install javascript優點：作者還在維護，回issue和更新蠻快的。支持比較新的python和node版本，安裝簡單基本支持互調用，包括綁定或者傳回調函數之類的。缺點：沒有合理的銷毀機制， import javascript 即視作連接JS端，會初始化所有要用的線程多線程。如果python主程序想重啟對JS的連接，或者主程序用了多進程，想在每個進程都連接一次JS，都很難做到，會容易出錯。
PyExecJS ： pip install PyExecJS ，比較老的技術文章都推的這個包優點： 支持除了Node.js以外的runtime，例如PhantomJS之類的缺點： End of Life，作者停止維護了

javascript調python

（因為與我的項目需求不太符合，所以了解的不太多）

JSPyBridge ： npm i pythonia
node-python-bridge : npm install python-bridge
python-shell ： npm install python-shell

原理

首先，該方法的前提是兩種語言都要有安裝好的runtime，且能通過命令行調用runtime運行文件或一串字符腳本。例如，裝好cpython后我們可以通過 python a.py 來運行python程序，裝好Node.js之后我們可以通過 node a.js 或者 node -e "some script" 等來運行JS程序。

當然，最簡單的情況下，如果我們只需要調用一次副語言，也沒有啥交互（或者最多只有一次交互），那直接找個方法調用CLI就OK了。把給副語言的輸入用stdin或者命令行參數傳遞，讀取命令的輸出當作副語言的輸出。

例如，python可以用 subprocess.Popen ， subprocess.call ， subprocess.check_output 或者 os.system 之類的，Node.js可以用 child_process 里的方法， exec 或者 fork 之類的。需要注意的是，如果需要引用其他包，Node.js需要注意在 node_modules 所在的目錄下運行指令，python需要注意設置好PYTHONPATH環境變量。

# Need to set the working directory to the directory where `node_modules` resides if necessary
>>> import subprocess
>>> a, b = 1, 2
>>> print(subprocess.check_output(["node", "-e", f"console.log({a}+{b})"]))
b'3\n'
>>> print(subprocess.check_output(["node", "-e", f"console.log({a}+{b})"]).decode('utf-8'))
3

// Need to set PYTHONPATH in advance if necessary
const a = 1;
const b = 2;
const { execSync } = require("child_process");
console.log(execSync(`python -c "print(${a}+${b})"`));
//<Buffer 33 0a>
console.log(execSync(`python -c "print(${a}+${b})"`).toString());
//3
//

如果有復雜的交互，要傳遞復雜的對象，有的倒還可以序列化，有的根本不能序列化，咋辦？

這基本要利用 進程間通信（IPC） ，通常情況下是用 管道（Pipe） 。在 stdin ， stdout 和 stderr 三者之中至少挑一個建立管道。

假設我用 stdin 從python向js傳數據，用 stderr 接收數據，模式大約會是這樣的：

（以下偽代碼僅為示意，沒有嚴格測試過，實際使用建議直接用庫）

新建一個副語言（假設為JS）文件 python-bridge.js ：該文件不斷讀取 stdin 并根據發來的信息不同，進行不同的處理；同時如果需要打印信息或者傳遞object給主語言，將它們適當序列化后寫入 stdout 或者 stderr 。process.stdin.on('data', data => { data.split('\n').forEach(line => { // Deal with each line // write message process.stdout.write(message + "\n"); // deliver object, "$j2p" can be any prefix predefined and agreed upon with the Python side // just to tell python side that this is an object needs parsing process.stderr.write("$j2p sendObj "+JSON.stringify(obj)+"\n); }); } process.on('exit', () => { console.debug('** Node exiting'); });
在python中，用Popen異步打開一個子進程，并將子進程的之中的至少一個，用管道連接。大概類似于:cmd = ["node", "--trace-uncaught", f"{os.path.dirname(__file__)}/python-bridge.js"] kwargs = dict( stdin=subprocess.PIPE, stdout=sys.stdout, stderr=subprocess.PIPE, ) if os.name == 'nt': kwargs['creationflags'] = subprocess.CREATE_NO_WINDOW subproc = subprocess.Popen(cmd, **kwargs)
在需要調用JS，或者需要給JS傳遞數據的時候，往 subproc 寫入序列化好的信息，寫入后需要 flush ，不然可能會先寫入緩沖區：subproc.stdin.write(f"$p2j call funcName {json.dumps([arg1, arg2])}".encode()) subproc.stdin.flush() # write immediately, not writing to the buffer of the stream
對管道化的 stdout / stderr ，新建一個線程，專門負責讀取傳來的數據并進行處理。是對象的重新轉換成對象，是普通信息的直接打印回主進程的 stderr 或者 stdout 。def read_stderr(): while subproc.poll() is None: # when the subprocess is still alive, keep reading line = self.subproc.stderr.readline().decode('utf-8') if line.startswith('$j2p'): # receive special information _, cmd, line = line.split(' ', maxsplit=2) if cmd == 'sendObj': # For example, received an object obj = json.loads(line) else: # otherwise, write to stderr as it is sys.stderr.write(line) stderr_thread = threading.Thread(target=read_stderr, args=(), daemon=True) stderr_thread.start()這里由于我們的 stdout 沒有建立管道，所以node那邊往 stdout 里打印的東西會直接打印到python的 sys.stdout 里，不用自己處理。
由于線程是異步進行的，什么時候知道一個函數返回的對象到了呢？答案是用線程同步手段，信號量（Semaphore）、條件（Condition），事件（Event）等等，都可以。以 python的條件為例：func_name_cv = threading.Condition() # use a flag and a result object in case some function has no result func_name_result_returned = False func_name_result = None def func_name_wrapper(arg1, arg2): # send arguments subproc.stdin.write(f"$p2j call funcName {json.dumps([arg1, arg2])}".encode()) subproc.stdin.flush() # wait for the result with func_name_cv: if not func_name_result_returned: func_name_cv.wait(timeout=10000) # when result finally returned, reset the flag func_name_result_returned = False return func_name_result同時，需要在讀stderr的線程 read_stderr 里解除對這個返回值的阻塞。需要注意的是，如果JS端因為意外而退出了， subproc 也會死掉， 這時候也要記得取消主線程中的阻塞 。def read_stderr(): while subproc.poll() is None: # when the subprocess is still alive, keep reading # Deal with a line line = self.subproc.stderr.readline().decode('utf-8') if line.startswith('$j2p'): # receive special information _, cmd, line = line.split(' ', maxsplit=2) if cmd == 'sendObj': # acquire lock here to ensure the editing of func_name_result is mutex with func_name_cv: # For example, received an object func_name_result = json.loads(line) func_name_result_returned = True # unblock func_name_wrapper when receiving the result func_name_cv.notify() else: # otherwise, write to stderr as it is sys.stderr.write(line) # If subproc is terminated (mainly due to error), still need to unblock func_name_wrapper func_name_cv.notify()當然這是比較簡單的版本，由于對JS的調用基本都是線性的，所以可以知道只要得到一個object的返回，那就一定是 func_name_wrapper 對應的結果。如果函數多起來的話，情況會更復雜。
如果想 取消對JS的連接 ，首先應該先關閉子進程，然后等待讀 stdout / stderr 的線程自己自然退出，最后 一定不要忘記關閉管道 。并且 這三步的順序不能換 ，如果先關了管道，讀線程會因為 stdout / stderr 已經關了而出錯。subproc.terminate() stderr_thread.join() subproc.stdin.close() subproc.stderr.close()

如果是通過這種原理javascript調用python，方法也差不多，javascript方是Node.js的話，用的是 child_process 里的指令。

優點

只需要正常裝好兩方的runtime就能實現交互，運行環境相對比較好配。
只要python方和javascript方在各自的runtime里正常運行沒問題，那么連上之后運行也基本不會有問題。（除非涉及并發）
對兩種語言的所有可用的擴展包基本都能支持。

缺點

當python與JavaScript交互頻繁，且交互的信息都很大的時候，可能會很影響程序效率。因為僅僅通過最多3個管道混合處理普通要打印的信息、python與js交互的對象、函數調用等，通信開銷很大。
要另起一個子進程運行副語言的runtime，會花一定時間和空間開銷。

品|開源中國

文|局長

知名 Python 發行版 Anaconda 開發商近日宣布了可在瀏覽器端運行的 Python —— PyScript。

根據官方的介紹，PyScript 是一個開發框架，為開發者提供了在標準 HTML 中嵌入編寫 Python 代碼的能力、使用 Python 調用 JavaScript 函數庫，以及創建 Python Web 應用。PyScript 旨在提供“一等公民(first-class)”的編程語言，它具有一致的風格化規則、更具表現力且更易于學習。

PyScript 示例代碼

<py-script>
"Hello World"
</py-script>

<py-script src="/my_own_file.py"></py-script>

  <py-env>
  - bokeh
  - numpy
  - paths:
    - /utils.py
      </py-env>

PyScript 核心特性

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

PyScript 目標

提供干凈簡單的 API
支持標準 HTML
擴展 HTML 以讀取穩定且可靠的自定義組件
提供可插拔、可擴展的組件系統

PyScript 基于 Pyodide 構建，Pyodide 由編譯成 WebAssembly 的 CPython 3.8 解釋器組成，允許在網頁瀏覽器中運行 Python。Pyodide 可以安裝來自 PyPi 的任何 Python 包。Pyodide 還包括一個外部函數接口，可以將 Python 包暴露給 JavaScript，并將瀏覽器 UI，包括 DOM，暴露給 Python。

關于 PyScript 運行原理的更多信息查看：https://engineering.anaconda.com/2022/04/welcome-pyscript.html

目前 PyScript 處于 alpha 測試階段，下載和安裝地址：https://pyscript.net/

面介紹過Django項目創建app，里面演示時直接返回了一個HttpResponse。但是實際開發中很少直接返回一個HttpResponse，一般都是使用html。這里就來介紹一下具體怎么使用。

創建html

在app的目錄下面新建一個templates文件夾，在這個文件夾中可以新建html：

新建模板文件

使用html

直接在view.py中通過render方法加載：

加載模板文件

這里運行的時候可能會遇到找不到html的報錯。具體原因不清楚，但是解決方法比較簡單，直接到settings.py文件指定一下templates的地址：

指定templates地址

運行一次之后，就可以刪除了，之后運行都會自動到當前app目錄下的templates文件夾下面找html。一般這個DIRS是配置根目錄的templates地址的，不知道為什么第一次運行的時候沒有到當前app下找templates。

靜態文件引用

html的中經常要引用一些靜態文件，這些靜態文件必須放到同一個app下面的static文件夾里面：

引用靜態文件

不過上面這種引用方式比較死板，直接將靜態文件的地址寫死了。比較推薦的方式是這種方式：

引用靜態文件

這里加載的static，其實是settings.py中的這個變量：

靜態文件夾地址

這樣引用靜態文件的好處是萬一路徑變更，可以直接改STATIC_URL，不用改模板文件中的引用。

最終運行的效果是一樣的：

運行效果

總結

現在實際工作中基本都是前后端分離的，django項目主要是作為后端工程，很少需要python工程師寫html及其他靜態文件。不過作為初學者，了解一下django中靜態文件的使用也是可以的。

像我最近的工作中幾個測開做測試平臺，沒有前端工程師支持，就只能自己寫html，畢竟老話說的好，技多不壓身。

在線咨詢

上一篇：ASP.NET資源大全
下一篇：現代CSS：創建 CSS 雙邊框的 6 種實現方案

您的項目需求

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

整合營銷服務商