Nếu bạn là một nhà phát triển web thích viết Python qua JavaScript, thì Brython, một triển khai Python chạy trong trình duyệt, có thể là một lựa chọn hấp dẫn.
JavaScript là ngôn ngữ thực tế của phát triển web mặt trước. Động cơ JavaScript tinh vi là một phần vốn có của tất cả các trình duyệt internet hiện đại và tự nhiên thúc đẩy các nhà phát triển mã hóa các ứng dụng web phía trước trong JavaScript. Brython cung cấp những điều tốt nhất của cả hai thế giới bằng cách biến Python thành ngôn ngữ công dân hạng nhất trong trình duyệt và bằng cách truy cập vào tất cả các thư viện JavaScript và API hiện có có sẵn trong trình duyệt.front-end web development. Sophisticated JavaScript engines are an inherent part of all modern Internet browsers and naturally drive developers to code front-end web applications in JavaScript. Brython offers the best of both worlds by making Python a first-class citizen language in the browser and by having access to all the existing JavaScript libraries and APIs available in the browser.
Trong hướng dẫn này, bạn sẽ học cách:
- Cài đặt Brython trong môi trường địa phương của bạn in your local environment
- Sử dụng Python trong trình duyệtPython in a browser
- Viết mã Python tương tác với JavaScriptinteracts with JavaScript
- Triển khai Python với ứng dụng web của bạnPython with your web application
- Tạo các phần mở rộng trình duyệt với Pythonbrowser extensions with Python
- So sánh Brython với các triển khai Python khác cho các ứng dụng webother Python implementations for web applications
Là một nhà phát triển Python trung gian quen thuộc với phát triển web, bạn sẽ tận dụng tối đa hướng dẫn này nếu bạn cũng có một số kiến thức về HTML và JavaScript. Để được bồi dưỡng JavaScript, hãy xem Python vs JavaScript cho Pythonistas.
Bạn có thể tải xuống tài liệu nguồn cho các ví dụ trong hướng dẫn này bằng cách nhấp vào liên kết bên dưới:
Chạy Python trong trình duyệt: Những lợi ích
Mặc dù JavaScript là ngôn ngữ phổ biến của phát triển web mặt trước, nhưng các điểm sau đây có thể áp dụng cho bạn:
- Bạn có thể không thích viết mã trong JavaScript.
- Bạn có thể muốn tận dụng các kỹ năng Python của bạn.
- Bạn có thể không muốn dành thời gian để học JavaScript để khám phá các công nghệ trình duyệt.
- Bạn có thể không muốn bị buộc phải học và sử dụng JavaScript để triển khai ứng dụng web.
Dù lý do là gì, nhiều nhà phát triển sẽ thích một sự thay thế dựa trên Python cho JavaScript để tận dụng sức mạnh của trình duyệt.
Có một số lợi ích của việc chạy Python trong trình duyệt. Nó cho phép bạn:
- Thực hiện cùng một mã python trong máy chủ và trình duyệt
- Làm việc với các API trình duyệt khác nhau bằng cách sử dụng Python
- Thao tác mô hình đối tượng tài liệu [DOM] với Python
- Sử dụng Python để tương tác với các thư viện JavaScript hiện có như Vue.js và JQuery
- Dạy ngôn ngữ Python cho các sinh viên Python với Biên tập viên Brython
- Giữ cảm giác vui vẻ trong khi lập trình trong Python
Một tác dụng phụ của việc sử dụng Python trong trình duyệt là mất hiệu suất so với cùng một mã trong JavaScript. Tuy nhiên, nhược điểm này không vượt trội hơn bất kỳ lợi ích nào được nêu ở trên.
Thực hiện phát triển web đẳng hình
JavaScript đẳng cấu hoặc JavaScript Universal, nhấn mạnh rằng các ứng dụng JavaScript nên chạy trên cả máy khách và máy chủ. Điều này giả định rằng phần cuối là dựa trên JavaScript, cụ thể là một máy chủ nút. Các nhà phát triển Python sử dụng Flask hoặc Django cũng có thể áp dụng các nguyên tắc đẳng cấu cho Python, miễn là họ có thể chạy Python trong trình duyệt.Universal JavaScript, emphasizes that JavaScript applications should run on both the client and the server. This is assuming that the back end is JavaScript based, namely a Node server. Python developers using Flask or Django can also apply the principles of isomorphism to Python, provided that they can run Python in the browser.
Brython cho phép bạn xây dựng mặt trước trong Python và chia sẻ các mô -đun giữa máy khách và máy chủ. Ví dụ: bạn có thể chia sẻ các chức năng xác thực, như mã sau để bình thường hóa và xác thực số điện thoại của chúng tôi:
1import re
2
3def normalize_us_phone[phone: str] -> str:
4 """Extract numbers and digits from a given phone number"""
5 return re.sub[r"[^\da-zA-z]", "", phone]
6
7def is_valid_us_phone[phone: str] -> bool:
8 """Validate 10-digit phone number"""
9 normalized_number = normalize_us_phone[phone]
10 return re.match[r"^\d{10}$", normalized_number] is not None
1
3
6 loại bỏ bất kỳ ký tự không phân giải nào, trong khi 1
3
7 trả về 1
3
8 nếu chuỗi đầu vào chứa chính xác mười chữ số và không có ký tự chữ cái. Mã tương tự có thể được chia sẻ giữa các quy trình chạy trên máy chủ Python và máy khách được xây dựng với Brython.Truy cập API Web
Trình duyệt Internet phơi bày API Web được tiêu chuẩn hóa thành JavaScript. Các tiêu chuẩn này là một phần của tiêu chuẩn sống HTML. Một số ví dụ API Web bao gồm:
- Lưu trữ web
- Web tiền điện tử
- Công nhân web
- Lịch sử
- URL
Brython cho phép bạn cả hai sử dụng API Web và tương tác với JavaScript. Bạn sẽ làm việc với một số API Web trong phần sau.
Thư viện tạo mẫu và JavaScript
Python thường được sử dụng để nguyên mẫu các đoạn mã, cấu trúc ngôn ngữ hoặc ý tưởng lớn hơn. Với Brython, thực tiễn mã hóa chung này sẽ có sẵn trong trình duyệt của bạn. Ví dụ: bạn có thể sử dụng bảng điều khiển Brython hoặc trình soạn thảo tương tác để thử nghiệm một đoạn mã.
Mở trình chỉnh sửa trực tuyến và nhập mã sau:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
Ở đây, cách thức hoạt động của mã này:
- Dòng 1 nhập mô -đun
9. imports the1 3
9 module.1 3
- Dòng 3 xác định
0, chức năng gọi lại mà Lừa gọi sau khi nhận được phản hồi từimport browser browser.alert["Hello Real Python!"]
1. definesimport browser browser.alert["Hello Real Python!"]
0, the callback function that’s invoked after getting the response fromimport browser browser.alert["Hello Real Python!"]
1.import browser browser.alert["Hello Real Python!"]
- Dòng 6 gọi
1 để truy xuất bản dịch của Hello Hello bằng tiếng Pháp bằng API Hellosalut. Lưu ý rằngimport browser browser.alert["Hello Real Python!"]
3 có thể làimport browser browser.alert["Hello Real Python!"]
8 hoặc1 3
5 khi bạn thực thi mã này trong Trình chỉnh sửa Brython. Nó cần phải làimport browser browser.alert["Hello Real Python!"]
8 nếu bạn thực thi cùng một mã trong bảng điều khiển Brython. calls1 3
1 to retrieve the translation of “hello” in French using the HelloSalut API. Note thatimport browser browser.alert["Hello Real Python!"]
3 can beimport browser browser.alert["Hello Real Python!"]
8 or1 3
5 when you execute this code in the Brython editor. It needs to beimport browser browser.alert["Hello Real Python!"]
8 if you execute the same code in the Brython console.1 3
Nhấp vào Chạy trên ngăn đầu ra để xem kết quả sau:
{"code":"fr","hello":"Salut"}
Hãy thử sửa đổi ngôn ngữ từ
import browser
browser.alert["Hello Real Python!"]
7 thành
import browser
browser.alert["Hello Real Python!"]
8 và quan sát kết quả. Các mã ngôn ngữ được hỗ trợ bởi API này được liệt kê trong tài liệu Hellosalut.Bạn có thể sửa đổi đoạn mã trong trình soạn thảo trực tuyến để tiêu thụ API công khai khác. Ví dụ: cố gắng tìm kiếm API công khai ngẫu nhiên từ dự án API công khai:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
Sao chép mã ở trên vào Trình chỉnh sửa Brython trực tuyến và nhấp vào Chạy để hiển thị kết quả. Ở đây, một ví dụ ở định dạng JSON:
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
Bởi vì điểm cuối lấy được một dự án ngẫu nhiên, bạn có thể sẽ nhận được một kết quả khác. Để biết thêm thông tin về định dạng JSON, hãy xem làm việc với dữ liệu JSON trong Python.
Bạn có thể sử dụng tạo mẫu để thử mã Python thông thường như bạn muốn trong trình thông dịch Python. Bởi vì bạn trong bối cảnh của một trình duyệt, Brython cũng cung cấp các cách để:
- Tìm hiểu cách sử dụng API Web
- Tương tác với mô hình đối tượng tài liệu [DOM]
- Sử dụng các thư viện JavaScript hiện có như JQuery, D3 và Bokeh cũng như các khung UI JavaScript như Vue.js
Như một lối tắt, bạn có thể tận dụng hầu hết các tính năng được mô tả ở trên bằng cách mở bảng điều khiển hoặc biên tập viên có sẵn trên trang web Brython. Điều này không yêu cầu bạn cài đặt hoặc chạy bất cứ thứ gì trên máy tính cục bộ của bạn. Thay vào đó, nó cung cấp cho bạn một sân chơi trực tuyến để tương tác với cả công nghệ Python và Web.
Dạy Python cho học sinh
Brython vừa là trình biên dịch Python vừa là người phiên dịch được viết bằng JavaScript. Do đó, bạn có thể biên dịch và chạy mã Python trong trình duyệt. Một ví dụ điển hình về tính năng này được trình bày bởi biên tập viên trực tuyến có sẵn trên trang web Brython.
Với biên tập viên trực tuyến, Python đang chạy trong trình duyệt. Ở đó, không cần phải cài đặt Python trên máy và ở đó, không cần phải gửi mã đến máy chủ để được thực thi. Phản hồi là ngay lập tức cho người dùng và cách tiếp cận này không làm lộ ra phần cuối của các tập lệnh độc hại. Học sinh có thể thử nghiệm với Python trên bất kỳ thiết bị nào với trình duyệt hoạt động, chẳng hạn như điện thoại hoặc Chromebook, ngay cả với kết nối internet đốm.
Tính đến hiệu suất
Trang web Brython lưu ý rằng tốc độ thực hiện của triển khai có thể so sánh với CPython. Nhưng Brython được thực hiện trong trình duyệt và tham chiếu trong môi trường này là JavaScript được nướng vào động cơ trình duyệt. Kết quả là, hy vọng Brython sẽ chậm hơn JavaScript viết tay, được điều chỉnh tốt.
Brython biên dịch mã Python vào JavaScript và sau đó thực thi mã được tạo. Các bước này có tác động đến hiệu suất tổng thể và Brython có thể không phải lúc nào cũng đáp ứng các yêu cầu về hiệu suất của bạn. Trong một số trường hợp, bạn có thể cần ủy thác một số thực thi mã cho JavaScript hoặc thậm chí là WebAssugging. Bạn có thể thấy cách xây dựng webassugging và cách sử dụng mã kết quả trong Python trong phần trên WebAssugging.
Tuy nhiên, don lồng cho phép hiệu suất nhận thức làm bạn mất cách sử dụng Brython. Ví dụ: nhập các mô -đun Python có thể dẫn đến việc tải xuống mô -đun tương ứng từ máy chủ. Để minh họa tình huống này, hãy mở bảng điều khiển Brython và thực thi mã sau:
Độ trễ cho đến khi dấu nhắc được hiển thị [390 ms trên máy kiểm tra] là đáng chú ý. Điều này là do Brython phải tải xuống
import browser
browser.alert["Hello Real Python!"]
9 và các phụ thuộc của nó và sau đó biên dịch các tài nguyên đã tải xuống. Tuy nhiên, từ thời điểm đó, không có sự chậm trễ trong khi thực hiện các chức năng có sẵn trong
import browser
browser.alert["Hello Real Python!"]
9. Ví dụ: bạn có thể tạo một định danh độc đáo toàn cầu ngẫu nhiên, phiên bản UUID 4, với mã sau:>>>
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
Gọi
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
1 tạo đối tượng $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
2, có biểu diễn chuỗi được in trong bảng điều khiển. Gọi $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
1 trả về ngay lập tức và nhanh hơn nhiều so với việc nhập ban đầu của mô -đun
import browser
browser.alert["Hello Real Python!"]
9.Vui chơi
Nếu bạn đang đọc hướng dẫn này, thì bạn có thể quan tâm đến việc viết mã Python trong trình duyệt. Nhìn thấy mã Python được thực hiện trong trình duyệt rất thú vị đối với hầu hết các Pythonistas và đánh thức cảm giác vui vẻ và khả năng vô tận.
Tác giả của Brython, Pierre Quentel và những người đóng góp cho dự án cũng giữ niềm vui của Python trong khi thực hiện nhiệm vụ lớn là làm cho ngôn ngữ này tương thích với trình duyệt web.
Để chứng minh điều đó, hãy trỏ trình duyệt của bạn vào bảng điều khiển tương tác Brython và tại dấu nhắc Python, nhập như sau:
Tương tự như kinh nghiệm của Python trên máy địa phương của bạn, Brython biên dịch và thực hiện các hướng dẫn trên con ruồi và in Zen of Python. Nó diễn ra trong trình duyệt và thực thi mã Python không yêu cầu bất kỳ tương tác nào với máy chủ back-end:
Bạn cũng có thể thử một quả trứng Phục sinh Python cổ điển khác trong cùng một môi trường trình duyệt với mã sau:
Brython nắm lấy những mẩu hài hước tương tự mà bạn sẽ tìm thấy trong triển khai tham chiếu Python.
Bây giờ bạn đã quen thuộc với những điều cơ bản khi làm việc với Brython, bạn sẽ khám phá các tính năng nâng cao hơn trong các phần sau.
Cài đặt Brython
Thử nghiệm với bảng điều khiển trực tuyến Brython, là một khởi đầu tốt, nhưng nó đã giành chiến thắng cho phép bạn triển khai mã Python của mình. Có một số tùy chọn khác nhau để cài đặt Brython trong môi trường địa phương:
- CDN
- GitHub
- Pypi
- NPM
Hướng dẫn cho từng phương pháp này được nêu dưới đây, nhưng vui lòng bỏ qua trực tiếp cách tiếp cận ưa thích của bạn nếu bạn đã đưa ra quyết định.
Cài đặt CDN
Mạng phân phối nội dung [CDN] là một mạng lưới các máy chủ cho phép cải thiện hiệu suất và tốc độ tải xuống cho nội dung trực tuyến. Bạn có thể cài đặt các thư viện Brython từ một vài CDN khác nhau:
- CDNJ
- JSdelivr
- CDNPKG
Bạn có thể chọn cài đặt này nếu bạn muốn triển khai một trang web tĩnh và thêm một số hành vi động vào các trang của bạn với chi phí tối thiểu. Bạn có thể nghĩ về tùy chọn này để thay thế cho jQuery, ngoại trừ sử dụng Python thay vì JavaScript.
Để minh họa việc sử dụng Brython với CDN, bạn sẽ sử dụng CDNJ. Tạo một tệp với mã HTML sau:
1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
Dưới đây là các yếu tố chính của trang HTML này:
Dòng 5 tải
5 từ cdnjs. loads$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
5 from CDNJS.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
Dòng 8 thực thi
6 Khi tài liệu đã tải xong.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
6 đọc mã Python trong phạm vi hiện tại và biên dịch nó thành JavaScript. Xem phần Hiểu cách Brython làm việc để biết thêm chi tiết. executes$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
6 when the document has finished loading.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
6 reads the Python code in the current scope and compiles it to JavaScript. See the section Understanding How Brython Works for more details.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
Dòng 9 Đặt loại tập lệnh thành
8. Điều này chỉ ra cho Brython mà mã cần được biên dịch và thực thi. sets the type of the script to$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
8. This indicates to Brython which code needs to be compiled and executed.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
Dòng 10 nhập
9, một mô -đun Brython hiển thị các đối tượng và chức năng cho phép tương tác với trình duyệt. imports$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
9, a Brython module that exposes objects and functions allowing interaction with the browser.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
Dòng 11 gọi
00, hiển thị hộp thông báo với văn bản1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
01 calls1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
00, which displays a message box with the text1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
011from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Lưu tệp dưới dạng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02, sau đó bấm đúp vào tệp để mở nó bằng trình duyệt Internet mặc định của bạn. Trình duyệt hiển thị hộp thông báo với 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
01 Nhấp OK để đóng hộp thông báo:Để giảm kích thước của tệp đã tải xuống, đặc biệt là trong sản xuất, hãy xem xét sử dụng phiên bản giảm thiểu của
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
5: 1
3
Phiên bản giảm thiểu sẽ giảm thời gian tải xuống và độ trễ cảm nhận theo quan điểm của người dùng. Để hiểu cách thức hoạt động của Brython, bạn sẽ học được cách Brython được tải bởi trình duyệt và cách thực thi mã Python trên.
Cài đặt GitHub
Cài đặt GitHub rất giống với cài đặt CDN, nhưng nó cho phép bạn triển khai các ứng dụng Brython với phiên bản phát triển mới nhất. Bạn có thể sao chép ví dụ trước và sửa đổi URL trong phần tử
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
05 để có được 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 sau đây:
import browser
browser.alert["Hello Real Python!"]
Sau khi lưu tệp này trong thư mục cục bộ, nhấp đúp vào
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 để hiển thị trong trình duyệt cùng một trang bạn thu được với cài đặt CDN.Cài đặt PYPI
Cho đến nay, bạn không cần phải cài đặt bất cứ thứ gì trong môi trường địa phương của bạn. Thay vào đó, bạn đã chỉ ra trong tệp HTML nơi trình duyệt có thể tìm thấy gói Brython. Khi trình duyệt mở trang, nó sẽ tải xuống tệp Brython JavaScript từ môi trường thích hợp, từ CDN hoặc GitHub.
Brython cũng có sẵn để cài đặt cục bộ trên PYPI. Cài đặt PYPI dành cho bạn nếu:
- Bạn cần kiểm soát và tùy chỉnh nhiều hơn về môi trường Brython vượt ra ngoài những gì có sẵn khi chỉ vào tệp CDN.
- Nền tảng của bạn là ở Python và bạn đã quen thuộc với
08.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
- Bạn muốn cài đặt cục bộ để giảm thiểu độ trễ mạng trong quá trình phát triển.
- Bạn muốn quản lý dự án của mình và cung cấp một cách kiểu hạt hơn.
Cài đặt Brython từ PYPI Cài đặt
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
09, một công cụ dòng lệnh mà bạn có thể sử dụng để tự động hóa các chức năng như tạo mẫu dự án hoặc các mô-đun đóng gói và gói để đơn giản hóa việc triển khai dự án Brython.Để biết thêm chi tiết, bạn có thể tham khảo tài liệu cài đặt cục bộ để xem các khả năng của
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 có sẵn trong môi trường của bạn sau khi cài đặt. 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 chỉ có sẵn với loại cài đặt này. Nó có sẵn nếu bạn cài đặt từ CDN hoặc với NPM. Bạn sẽ thấy 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 hoạt động sau trong hướng dẫn.Trước khi cài đặt Brython, bạn muốn tạo môi trường ảo Python cho dự án này.
Trên Linux hoặc MacOS, thực thi các lệnh sau:
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
Trên Windows, bạn có thể tiến hành như sau:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
0Bạn vừa tạo ra một môi trường Python chuyên dụng cho dự án của bạn và được cập nhật
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
08 với phiên bản mới nhất.Trong các bước tiếp theo, bạn sẽ cài đặt Brython và tạo một dự án mặc định. Các lệnh giống nhau trên Linux, MacOS và Windows:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
1Bạn đã cài đặt Brython từ Pypi, tạo một thư mục trống có tên
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14 và tạo bộ xương dự án mặc định bằng cách thực hiện 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 được sao chép trong môi trường ảo của bạn trong quá trình cài đặt.Trong thư mục
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14, 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
17 đã tạo một mẫu dự án và tạo các tệp sau:
18 | Tài liệu về cách chạy máy chủ HTTP Python và mở 19 |
5 | Core Brython Engine [trình biên dịch, thời gian chạy và giao diện trình duyệt] |
21 | Thư viện tiêu chuẩn Brython |
19 | Mã nguồn của trang HTML demo Brython |
02 | Ví dụ cơ bản mà bạn có thể sử dụng làm trang bắt đầu cho một dự án |
24 | Cơ sở dữ liệu ký tự Unicode [UCD] được sử dụng bởi 25 |
Để kiểm tra dự án web mới được tạo này, bạn có thể khởi động một máy chủ web Python cục bộ với các lệnh sau:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
2Khi bạn thực thi
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
26, Python bắt đầu một máy chủ web trên cổng 8000. Trang mặc định dự kiến là 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02. Trình duyệt Internet của bạn đến 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
28 để hiển thị một trang với văn bản 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
29:Để biết ví dụ đầy đủ hơn, bạn có thể thay đổi URL trong thanh địa chỉ trình duyệt thành
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
30. Bạn sẽ thấy một trang tương tự như trang demo Brython:Với phương pháp này, các tệp JavaScript Brython được tải trực tiếp từ môi trường địa phương của bạn. Lưu ý thuộc tính
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
31 trong phần tử 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
05 của 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
3HTML ở trên được thụt vào để tăng cường khả năng đọc trong hướng dẫn này. Lệnh
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
34 không thụt đầu vào mẫu HTML ban đầu mà nó tạo ra.Tệp HTML giới thiệu một vài tính năng Brython mới:
Dòng 6 tải
21, Thư viện tiêu chuẩn Python được biên dịch cho JavaScript. loads1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
21, the Python standard library compiled to JavaScript.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 8 gọi
6 với đối số$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
37 để in các thông báo lỗi vào bảng điều khiển trình duyệt. invokes1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
6 with the argument$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
37 to print error messages to the browser console.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 10 nhập mô -đun
38 từ1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
9. Các chức năng để truy cập DOM có sẵn trong$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
38. imports the1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
38 module from1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
9. Functions to access the DOM are available in$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
38.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 11 cho thấy một biểu tượng mới [
41] được thêm vào Python dưới dạng đường cú pháp. Trong ví dụ này,1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
42 là một sự thay thế cho1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
43. Để biết chi tiết về các chức năng DOM này, hãy xem1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
44. shows a new symbol [1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
41] added to Python as syntactic sugar. In this example,1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
42 is a substitute for1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
43. For details about these DOM functions, check out1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
44.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Toán tử
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
41 được sử dụng để thêm nút con vào một phần tử của DOM. Bạn có thể thấy nhiều chi tiết hơn về việc sử dụng các toán tử dành riêng cho Brython trong API DOM trong Brython.Cài đặt NPM
Nếu bạn rất thành thạo trong hệ sinh thái JavaScript, thì việc cài đặt NPM có thể thu hút bạn. Node.js và NPM được yêu cầu trước khi thực hiện cài đặt này.
Cài đặt với NPM sẽ cung cấp các mô -đun Brython JavaScript có sẵn trong dự án của bạn như bất kỳ mô -đun JavaScript nào khác. Sau đó, bạn có thể tận dụng công cụ JavaScript yêu thích của mình để kiểm tra, đóng gói và triển khai trình thông dịch và thư viện Brython. Cài đặt này là lý tưởng nếu bạn đã cài đặt các thư viện JavaScript hiện tại với NPM.
Giả sử rằng bạn đã cài đặt NPM trên hệ thống của mình, hãy tạo tệp
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
46 mặc định bằng cách gọi 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
47 trong một thư mục trống: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
4Để tích hợp Brython vào dự án của bạn, hãy thực hiện lệnh sau:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
5Bạn có thể bỏ qua các cảnh báo và lưu ý rằng Brython đã được thêm vào dự án của bạn. Để xác nhận, hãy mở
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
46 và đảm bảo bạn có thuộc tính 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
49 trỏ đến một đối tượng chứa mục 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
50: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
6Đối với các ví dụ trước, bạn có thể tạo
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 sau đây và mở nó bằng trình duyệt của bạn. Một máy chủ web không cần thiết cho ví dụ này vì trình duyệt có thể tải tệp JavaScript 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
52 cục bộ: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
7Trình duyệt hiển thị
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 và tải $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
5 từ URL 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
55 trong 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02. Trong ví dụ này, bạn đã thấy một cách khác để cài đặt Brython tận dụng hệ sinh thái JavaScript. Trong phần còn lại của hướng dẫn, bạn sẽ viết mã dựa trên cài đặt CDN hoặc cài đặt PYPI.Tóm tắt các tùy chọn cài đặt Brython
Brython có một chân trong thế giới Python và một người khác trong JavaScript. Các tùy chọn cài đặt khác nhau minh họa tình huống công nghệ chéo này. Chọn cài đặt cảm thấy hấp dẫn nhất đối với bạn dựa trên nền của bạn.
Bảng sau đây cung cấp cho bạn một số hướng dẫn:
CDN | Bạn muốn triển khai một trang web tĩnh và thêm một số hành vi động vào các trang của bạn với chi phí tối thiểu. Bạn có thể nghĩ về tùy chọn này để thay thế cho jQuery, ngoại trừ sử dụng Python thay vì JavaScript. |
GitHub | Điều này tương tự như cài đặt CDN, nhưng bạn muốn thử nghiệm phiên bản cạnh chảy máu của Brython. |
Pypi | Nền tảng của bạn là trong Python. Bạn đã quen thuộc với 08 và cách tạo môi trường ảo Python. Dự án của bạn có thể yêu cầu một số tùy chỉnh mà bạn muốn duy trì trong môi trường địa phương hoặc trong kho lưu trữ mã nguồn của bạn. Bạn muốn có nhiều quyền kiểm soát hơn đối với gói mà bạn sẽ phân phối. Bạn muốn triển khai trong một môi trường khép kín mà không cần truy cập Internet. |
NPM | Nền tảng của bạn là trong JavaScript. Bạn đã quen thuộc với các công cụ JavaScript, cụ thể là Node.js và NPM. Dự án của bạn có thể yêu cầu một số tùy chỉnh mà bạn muốn duy trì trong môi trường địa phương hoặc trong kho lưu trữ mã nguồn của bạn. Bạn muốn có nhiều quyền kiểm soát hơn đối với các gói bạn sẽ phân phối. Bạn muốn triển khai trong một môi trường khép kín mà không cần truy cập Internet. |
Bảng này tóm tắt các tùy chọn cài đặt khác nhau có sẵn cho bạn. Trong phần tiếp theo, bạn sẽ tìm hiểu thêm về cách Brython hoạt động.
Hiểu cách Brython hoạt động
Chuyến tham quan của bạn về các cách khác nhau để cài đặt Brython đã cho bạn một số manh mối cấp cao về cách thực hiện hoạt động. Ở đây, một bản tóm tắt về một số đặc điểm mà bạn đã phát hiện ra cho đến nay trong hướng dẫn này:
- Nó là một triển khai Python trong JavaScript.
- Nó có một dịch giả Python cho JavaScript và thực hiện thời gian chạy trong trình duyệt.
- Nó hiển thị hai thư viện chính có sẵn dưới dạng tệp JavaScript:
5 là cốt lõi của ngôn ngữ Brython, như chi tiết trong các thành phần cốt lõi của Brython. is the core of the Brython language, as detailed in Brython Core Components.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
21 là thư viện tiêu chuẩn Brython. is the Brython standard library.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
- Nó gọi
6, biên dịch mã Python có trong các thẻ$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
55 với loại1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
8.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
Trong các phần sau, bạn sẽ xem xét chi tiết hơn về cách Brython hoạt động.
Các thành phần cốt lõi Brython
Cốt lõi của Brython được chứa trong
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
5 hoặc trong 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
64, phiên bản giảm thiểu của động cơ Brython. Cả hai đều bao gồm các thành phần chính sau:
6 là hàm JavaScript chính được phơi bày trong không gian tên toàn cầu JavaScript. Bạn có thể thực hiện bất kỳ mã Python nào mà không gọi chức năng này. Đây là chức năng JavaScript duy nhất mà bạn phải gọi rõ ràng. is the main JavaScript function exposed in the JavaScript global namespace. You can’t execute any Python code without calling this function. This is the only JavaScript function that you should have to call explicitly.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
66 là một đối tượng toàn cầu JavaScript chứa tất cả các đối tượng nội bộ cần thiết để chạy các tập lệnh Python. Đối tượng này được sử dụng trực tiếp khi bạn viết các ứng dụng Brython. Nếu bạn nhìn vào mã Brython, cả JavaScript và Python, thì bạn sẽ thấy sự xuất hiện thường xuyên của1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
66. Bạn không cần sử dụng đối tượng này, nhưng bạn nên biết về nó khi bạn thấy lỗi hoặc khi bạn muốn gỡ lỗi mã của mình trong bảng điều khiển trình duyệt. is a JavaScript global object that holds all internal objects needed to run Python scripts. This object isn’t used directly when you write Brython applications. If you look at the Brython code, both JavaScript and Python, then you’ll see regular occurrences of1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
66. You don’t need to use this object, but you should be aware of it when you see an error or when you want to debug your code in the browser console.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Các loại tích hợp là triển khai các loại Python tích hợp trong JavaScript. Ví dụ: py_int.js, py_string.js và py_dicts.js là các triển khai tương ứng của
68,1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
69 và1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
70. are implementations of the Python built-in types in JavaScript. For example, py_int.js, py_string.js and py_dicts.js are respective implementations of1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
68,1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
69 and1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
70.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
9 là mô-đun trình duyệt hiển thị các đối tượng JavaScript thường được sử dụng trong ứng dụng Web Front-end, như giao diện DOM sử dụng$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
38 và cửa sổ trình duyệt bằng đối tượng1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
73. is the browser module that exposes the JavaScript objects commonly used in a front-end web application, like the DOM interfaces using1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
38 and the browser window using the1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
73 object.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Bạn sẽ thấy từng thành phần này trong hành động khi bạn làm việc thông qua các ví dụ trong hướng dẫn này.
Thư viện tiêu chuẩn Brython
Bây giờ bạn có một ý tưởng tổng thể về tệp Brython cốt lõi,
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
5, bạn sẽ tìm hiểu về tệp đồng hành của nó, 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
21. 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
21 phơi bày thư viện tiêu chuẩn Python. Khi tệp này được tạo, Brython biên dịch thư viện tiêu chuẩn Python vào JavaScript và kết hợp kết quả vào gói 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
21.Brython dự định sẽ càng gần càng tốt với CPYThon, việc thực hiện tham chiếu Python. Để biết thêm thông tin về CPython, hãy xem hướng dẫn của bạn về mã nguồn CPython và bên trong CPython.
Khi Brython đang chạy trong bối cảnh của trình duyệt web, nó có một số hạn chế. Ví dụ: trình duyệt không cho phép truy cập trực tiếp vào hệ thống tệp, do đó, việc mở một tệp với
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
78 là không thể. Các chức năng không liên quan đến trình duyệt web có thể không được thực hiện. Ví dụ: mã bên dưới đang chạy trong môi trường Brython:>>>
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
8 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
79 nêu ra một ngoại lệ vì nó không an toàn để xóa một tệp cục bộ khỏi môi trường trình duyệt và API tệp và thư mục thư mục chỉ là một đề xuất dự thảo.Brython chỉ hỗ trợ các mô -đun Python bản địa. Nó không hỗ trợ các mô -đun Python được xây dựng trong C trừ khi chúng được thực hiện lại trong JavaScript. Ví dụ,
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
80 được viết bằng C trong CPython và được triển khai trong JavaScript trong Brython. Bạn có thể tham khảo danh sách các mô -đun trong phân phối Brython để so sánh với việc triển khai CPython.Bạn cần bao gồm
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
21 hoặc 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
82 để nhập các mô -đun từ thư viện tiêu chuẩn Python.Brython trong hành động
Tại thời điểm này, bạn có thể tự hỏi làm thế nào Brython hành xử trong một trình duyệt mà chỉ nhận thức được công cụ JavaScript của nó. Việc sử dụng lại các ví dụ trước và các công cụ có sẵn trong trình duyệt, bạn sẽ tìm hiểu về quy trình liên quan đến việc thực thi mã Python trong trình duyệt.
Trong phần cài đặt máy chủ CDN, bạn đã thấy ví dụ sau:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
9Khi tải và phân tích trang HTML,
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
6 thực hiện các bước sau:- Đọc mã Python có trong phần tử
841from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
- Biên dịch mã Python với JavaScript tương đương
- Đánh giá mã JavaScript kết quả với
851from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Trong ví dụ trên, mã Python được nhúng trong tệp HTML:
{"code":"fr","hello":"Salut"}
0Một tùy chọn khác là tải xuống mã Python từ một tệp riêng biệt:
{"code":"fr","hello":"Salut"}
1Trong trường hợp này, tệp Python sẽ trông như thế này:
{"code":"fr","hello":"Salut"}
2Tách mã Python với mã HTML là một cách tiếp cận sạch hơn và cho phép bạn tận dụng lợi ích và chức năng của các trình chỉnh sửa mã. Hầu hết các biên tập viên đều có hỗ trợ cho JavaScript nhúng trong HTML, nhưng họ không hỗ trợ Python trong HTML.
Brython sườn bên trong
Phần này cung cấp một chuyến đi sâu hơn vào quá trình chuyển đổi mã Python thành JavaScript. Nếu bạn không quan tâm đến những chi tiết này, thì hãy bỏ qua phần này, vì nó không bắt buộc để hiểu phần còn lại của hướng dẫn. Để minh họa quá trình này và xem qua các phần bên trong của Brython, hãy thực hiện các bước sau:
- Mở trang chủ Brython.
- Mở bảng điều khiển web với CMD+ALT+I trên MAC hoặc Ctrl+Shift+I trên Windows và Linux.Cmd+Alt+I on Mac or Ctrl+Shift+I on Windows and Linux.
Trong trình duyệt JavaScript REPLED, Kiểu và thực thi mã sau:
{"code":"fr","hello":"Salut"}
3 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
86 phân tích cú pháp và biên dịch mã Python được cung cấp cho JavaScript và sau đó thực thi JavaScript trong trình duyệt web. Bạn sẽ nhận được kết quả sau:Áp dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
85 cho mã Brython in 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
88 trong bảng điều khiển trình duyệt. Hàm JavaScript trả về 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
89, đây là giá trị trả về mặc định cho một hàm trong JavaScript.Khi bạn xây dựng một ứng dụng Brython, bạn không cần phải gọi rõ ràng một chức năng trong mô -đun JavaScript
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
66. Ví dụ này chỉ được cung cấp để chứng minh cách Brython vận hành đằng sau hậu trường. Nhận thức được 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
66 có thể giúp bạn đọc mã Brython và thậm chí đóng góp cho dự án khi bạn có thêm kinh nghiệm. Nó cũng sẽ giúp bạn hiểu rõ hơn về các ngoại lệ có thể được hiển thị trong bảng điều khiển trình duyệt.Đối tượng JavaScript
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
66 có sẵn trong phạm vi toàn cầu của JavaScript và bạn có thể truy cập nó với bảng điều khiển JavaScript trình duyệt.Sử dụng Brython trong trình duyệt
Tại thời điểm này, bạn có đủ sự hiểu biết về Brython để làm việc với các ví dụ chi tiết hơn. Trong phần này, bạn sẽ thực hiện một máy tính Base64 để thử nghiệm trong trình duyệt với API DOM và các chức năng khác thường chỉ có sẵn từ JavaScript.
Bạn có thể tải xuống mã nguồn cho các ví dụ trong hướng dẫn này bằng cách nhấp vào liên kết bên dưới:
Bạn sẽ bắt đầu bằng cách học cách thao túng DOM bằng Python và HTML.
API DOM trong Brython
Để thử nghiệm các thao tác DOM có sẵn trong Brython, bạn sẽ xây dựng một biểu mẫu để mã hóa một chuỗi thành Base64. Mẫu hoàn thành sẽ trông như thế này:
Tạo tệp HTML sau đây và đặt tên cho nó
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02:{"code":"fr","hello":"Salut"}
4HTML ở trên tải các tài nguyên tĩnh, xác định bố cục UI và bắt đầu tổng hợp Python:
Dòng 7 tải Bảng kiểu PureCSS để cải thiện kiểu HTML mặc định. Điều này là cần thiết để Brython làm việc. loads the PureCSS style sheet to improve on the default HTML style. This isn’t necessary for Brython to work.
Dòng 9 tải phiên bản giảm thiểu của động cơ Brython. loads the minimized version of the Brython engine.
Dòng 12 tải phiên bản giảm thiểu của thư viện tiêu chuẩn Brython. loads the minimized version of the Brython standard library.
Dòng 14 tải
94, xử lý logic động của trang HTML tĩnh này. Lưu ý việc sử dụng1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
95. Nó giúp đồng bộ hóa việc tải và đánh giá tài nguyên và đôi khi cần thiết để đảm bảo rằng Brython và bất kỳ tập lệnh Python nào cũng được tải đầy đủ trước khi thực hiện1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
6. loads$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
94, which handles the dynamic logic of this static HTML page. Note the use of1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
95. It helps synchronize the loading and evaluation of resources and is sometimes needed to make sure that Brython and any Python scripts are fully loaded before executing1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
6.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
Dòng 21 mô tả một trường
97. Trường này lấy chuỗi để mã hóa như một đối số. describes an1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
97 field. This field takes the string to encode as an argument.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Các dòng 22 đến 25 Xác định mặc định
98 kích hoạt logic chính của trang. Bạn có thể thấy logic này được thực hiện trong1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
94 dưới đây. define the default1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
98 that triggers the main logic of the page. You can see this logic implemented in1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
94 below.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 26 xác định
98 để xóa dữ liệu và các yếu tố trên trang. Điều này được thực hiện trong1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
94 dưới đây. defines a1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
98 to clear up data and elements on the page. This is implemented in1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
94 below.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 29 tuyên bố
02 dự định là người giữ chỗ cho một bảng. declares a{"code":"fr","hello":"Salut"}
02 intended to be a placeholder for a table.{"code":"fr","hello":"Salut"}
Mã Python liên quan,
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
94, như sau:{"code":"fr","hello":"Salut"}
5Mã Python hiển thị định nghĩa về các hàm gọi lại và cơ chế để thao tác với DOM:
Dòng 1 nhập các mô -đun mà bạn sử dụng để tương tác với mã API của DOM và trình duyệt trong
64. imports the modules that you use to interact with the DOM and the Browser API code in1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
64.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 2 Nhập khẩu
05, có sẵn trong Thư viện tiêu chuẩn Brython,{"code":"fr","hello":"Salut"}
82. imports1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
05, which is available in the Brython standard library,{"code":"fr","hello":"Salut"}
82.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Dòng 4 tuyên bố một từ điển mà bạn sẽ sử dụng để lưu trữ dữ liệu trong suốt vòng đời của trang HTML. declares a dictionary that you’ll use to store data during the life of the HTML page.
Dòng 6 xác định trình xử lý sự kiện
07, mã hóa giá trị base64 của văn bản được nhập trong trường đầu vào với ID{"code":"fr","hello":"Salut"}
08. Đây là một chức năng gọi lại lấy một sự kiện làm đối số. Đối số này được sử dụng trong hàm nhưng được yêu cầu trong Brython và là tùy chọn trong JavaScript. Như một quy ước, bạn có thể sử dụng{"code":"fr","hello":"Salut"}
09 như một người giữ chỗ giả. Một ví dụ về việc sử dụng này được mô tả trong Hướng dẫn kiểu Google Python. defines the event handler{"code":"fr","hello":"Salut"}
07, which encodes the Base64 value of the text entered in the input field with ID{"code":"fr","hello":"Salut"}
08. This is a callback function that takes an event as an argument. This argument isn’t used in the function but is required in Brython and is optional in JavaScript. As a convention, you can use{"code":"fr","hello":"Salut"}
09 as a dummy placeholder. An example of this usage is described in the Google Python Style Guide.{"code":"fr","hello":"Salut"}
Dòng 7 Lấy giá trị của phần tử DOM được xác định với
08. retrieves the value of the DOM element identified with{"code":"fr","hello":"Salut"}
08.{"code":"fr","hello":"Salut"}
Dòng 18 xác định trình xử lý sự kiện
11, xóa dữ liệu và trình bày dữ liệu trên trang này. defines the event handler{"code":"fr","hello":"Salut"}
11, which clears the data and presentation of the data on this page.{"code":"fr","hello":"Salut"}
Dòng 22 xác định
12, lấy dữ liệu có trong{"code":"fr","hello":"Salut"}
13 và hiển thị nó theo biểu mẫu trên trang. defines{"code":"fr","hello":"Salut"}
12, which takes the data contained in the{"code":"fr","hello":"Salut"}
13 and displays it under the form on the page.{"code":"fr","hello":"Salut"}
Dòng 26 Lấy phần tử DOM với ID
08. retrieves the DOM element with the ID{"code":"fr","hello":"Salut"}
08.{"code":"fr","hello":"Salut"}
Dòng 29 Xóa giá trị của phần tử DOM với ID
08. clears the value of the DOM element with the ID{"code":"fr","hello":"Salut"}
08.{"code":"fr","hello":"Salut"}
Dòng 31 liên kết sự kiện
16 của nút{"code":"fr","hello":"Salut"}
17 với{"code":"fr","hello":"Salut"}
07. binds the{"code":"fr","hello":"Salut"}
16 event of the{"code":"fr","hello":"Salut"}
17 button to{"code":"fr","hello":"Salut"}
07.{"code":"fr","hello":"Salut"}
Dòng 32 liên kết sự kiện
16 của nút{"code":"fr","hello":"Salut"}
20 với{"code":"fr","hello":"Salut"}
11. binds the{"code":"fr","hello":"Salut"}
16 event of the{"code":"fr","hello":"Salut"}
20 button to{"code":"fr","hello":"Salut"}
11.{"code":"fr","hello":"Salut"}
Để thao túng DOM, Brython sử dụng hai toán tử:
41 là một toán tử mới, cụ thể cho Brython, thêm một đứa trẻ vào một nút. Bạn có thể thấy một vài ví dụ về việc sử dụng này trong1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
12, được xác định trên dòng 22. is a new operator, specific to Brython, that adds a child to a node. You can see a few examples of this usage in{"code":"fr","hello":"Salut"}
12, defined on line 22.{"code":"fr","hello":"Salut"}
24 là một thay thế cho{"code":"fr","hello":"Salut"}
25 và thêm các nút anh chị em. is a substitute for{"code":"fr","hello":"Salut"}
25 and adds sibling nodes.{"code":"fr","hello":"Salut"}
Bạn có thể thấy cả hai toán tử trong câu lệnh sau được lấy từ
{"code":"fr","hello":"Salut"}
12:{"code":"fr","hello":"Salut"}
6Bạn có thể đọc mã trên như là Thêm vào phần tử bảng Phần tử đầu bảng chứa phần tử hàng bảng bao gồm hai phần tử ô dữ liệu bảng liền kề. Nó được hiển thị trong trình duyệt như mã HTML sau:
{"code":"fr","hello":"Salut"}
7Mã HTML hiển thị cấu trúc lồng nhau cho hàng tiêu đề của phần tử bảng. Ở đây, một định dạng dễ đọc hơn của cùng một mã:
{"code":"fr","hello":"Salut"}
8Để quan sát kết quả trong bảng điều khiển Brython, bạn có thể nhập khối mã sau:
>>>
{"code":"fr","hello":"Salut"}
9Để thực hiện mã đầy đủ, bạn cần khởi động một máy chủ web. Như trước đây, bạn khởi động máy chủ web Python tích hợp trong cùng thư mục với hai tệp
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 và 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
94: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
0Sau khi bắt đầu máy chủ web, hãy trỏ trình duyệt của bạn đến
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
28. Trang trông như thế này:Bạn sẽ mở rộng ví dụ này trong phần API Web Trình duyệt bằng cách cho phép dữ liệu được lưu trữ giữa các trang tải lại.
Nhập khẩu trong Brython
Bạn có thể sử dụng
{"code":"fr","hello":"Salut"}
30 để truy cập các mô -đun Python hoặc các mô -đun Brython được biên dịch cho JavaScript.Các mô -đun Python là các tệp có tiện ích mở rộng
{"code":"fr","hello":"Salut"}
31 trong thư mục gốc của dự án của bạn hoặc, đối với gói Python, trong một thư mục con chứa tệp {"code":"fr","hello":"Salut"}
32. Để nhập các mô -đun Python trong mã Brython của bạn, bạn cần bắt đầu một máy chủ web. Để biết thêm về các mô -đun Python, hãy xem các mô -đun và gói Python - giới thiệu.Để khám phá cách nhập các mô -đun Python vào mã Brython của bạn, hãy làm theo các hướng dẫn được mô tả trong phần cài đặt với PYPI, tạo và kích hoạt môi trường ảo Python, cài đặt Brython và sửa đổi
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 như sau: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
1Tệp HTML ở trên hiển thị các mô -đun được nhập từ động cơ lõi [
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
9], từ thư viện tiêu chuẩn [{"code":"fr","hello":"Salut"}
35] và từ một mô -đun Python cục bộ [{"code":"fr","hello":"Salut"}
36]. Tại đây, nội dung của {"code":"fr","hello":"Salut"}
37: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
2Mô -đun này thực hiện
{"code":"fr","hello":"Salut"}
38, một trong các công thức nấu ăn {"code":"fr","hello":"Salut"}
39. {"code":"fr","hello":"Salut"}
38 trả về n phần tử đầu tiên của một điều đáng tin cậy nhất định. Nó dựa vào {"code":"fr","hello":"Salut"}
41.Nếu bạn cố gắng mở
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 từ hệ thống tệp bằng trình duyệt của mình, thì bạn sẽ gặp lỗi sau trong bảng điều khiển trình duyệt: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
3Nhập mô -đun Python yêu cầu bắt đầu một máy chủ web cục bộ. Bắt đầu một máy chủ web cục bộ và trỏ trình duyệt của bạn đến
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
28. Bạn sẽ xem trang HTML sau:Với một máy chủ web đang chạy, trình duyệt đã có thể tìm nạp mô -đun
{"code":"fr","hello":"Salut"}
37 khi {"code":"fr","hello":"Salut"}
45 được thực thi. Kết quả của cả hai giá trị, {"code":"fr","hello":"Salut"}
46 và {"code":"fr","hello":"Salut"}
47, được chèn vào tệp HTML bằng hai dòng cuối cùng của tập lệnh Python nhúng và được hiển thị bởi trình duyệt.Giảm kích thước nhập khẩu
Trong thư mục dự án của ví dụ trước, để giảm kích thước của các mô -đun JavaScript đã nhập và với các mô -đun Python đi kèm với JavaScript, bạn có thể sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 với tùy chọn {"code":"fr","hello":"Salut"}
49: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
4Điều này sẽ tạo
{"code":"fr","hello":"Salut"}
50 và bạn có thể sửa đổi phần tử ____105 của 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 như sau: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
5Dòng 4 Thay đổi nguồn tập lệnh gốc từ
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
21 thành {"code":"fr","hello":"Salut"}
50.Mở
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 với trình duyệt của bạn hoặc trỏ trình duyệt vào máy chủ cục bộ hiển thị cùng một trang HTML. Lưu ý các điểm sau:- Bạn có thể hiển thị trang HTML trong trình duyệt của mình mà không cần chạy máy chủ web.
- Bạn không cần phải phân phối
37 vì mã đã được chuyển đổi thành JavaScript và đi kèm trong{"code":"fr","hello":"Salut"}
50.{"code":"fr","hello":"Salut"}
- Bạn không cần phải tải
21.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
Công cụ dòng lệnh
{"code":"fr","hello":"Salut"}
59 cung cấp một giải pháp để loại bỏ mã không cần thiết khỏi các thư viện tiêu chuẩn và biên dịch mô-đun Python của bạn thành mã JavaScript. Điều này giúp đóng gói ứng dụng của bạn và kết quả tải xuống tài nguyên nhỏ hơn.Tương tác với JavaScript
Brython cho phép mã Python tương tác với mã JavaScript. Mẫu phổ biến nhất là truy cập JavaScript từ Brython. Điều ngược lại, mặc dù có thể, là phổ biến. Bạn có thể thấy một ví dụ về JavaScript gọi chức năng Python trong phần Kiểm tra đơn vị JavaScript.
JavaScript
Cho đến thời điểm này, bạn đã trải nghiệm một vài kịch bản trong đó mã Python tương tác với mã JavaScript. Cụ thể, bạn đã có thể hiển thị một hộp thông báo bằng cách gọi
{"code":"fr","hello":"Salut"}
60.Bạn có thể thấy
{"code":"fr","hello":"Salut"}
61 hoạt động trong ba ví dụ sau đây chạy trong bảng điều khiển Brython, không phải trong Shell phiên dịch Cpython tiêu chuẩn:>>>
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
6Hoặc bạn có thể sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
73:>>>
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
7Hoặc bạn có thể sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
73:>>>
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
8Hoặc bạn có thể sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
73:Hoặc bạn có thể sử dụng
{"code":"fr","hello":"Salut"}
63:
Định nghĩa bài văn | Ví dụ | 9 |
Chứa các tên và mô-đun tích hợp | 60 | 71 73
|
Truy cập DOM | 72 73 | 74 |
Tạo các yếu tố HTML | 75 | 67 79
|
Truy cập 77 Chức năng và đối tượng | 78 79 | 80 82
|
Truy cập các đối tượng được xác định trong JavaScript
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
9{"code":"fr","hello":"Salut"}
81 {"code":"fr","hello":"Salut"}
82- Ngoài các chức năng và API JavaScript có sẵn trong trình duyệt, bạn cũng có thể truy cập vào các chức năng JavaScript mà bạn đã viết. Ví dụ sau đây cho thấy cách truy cập chức năng JavaScript tùy chỉnh từ Brython: defines the custom function
83 in a JavaScript block.{"code":"fr","hello":"Salut"}
- Ở đây, cách thức hoạt động của nó: invokes
83.{"code":"fr","hello":"Salut"}
Dòng 9 xác định hàm tùy chỉnh
{"code":"fr","hello":"Salut"}
83 trong khối JavaScript.Dòng 17 gọi {"code":"fr","hello":"Salut"}
83.
{"code":"fr","hello":"Salut"}
Bạn có thể sử dụng cùng một tính năng để truy cập các thư viện JavaScript. Bạn có thể thấy cách trong khung UI Web, nơi bạn sẽ tương tác với Vue.js, một khung giao diện người dùng web phổ biến.
Trình duyệt API Web
85{"code":"fr","hello":"Salut"}
86{"code":"fr","hello":"Salut"}
Các trình duyệt phơi bày các API Web mà bạn có thể truy cập từ JavaScript và Brython có quyền truy cập vào cùng một API. Trong phần này, bạn sẽ mở rộng máy tính Base64 để lưu trữ dữ liệu giữa các trang trình duyệt.
API Web cho phép tính năng này là API lưu trữ web. Nó bao gồm hai cơ chế:
Bạn sẽ sử dụng
{"code":"fr","hello":"Salut"}
86 trong ví dụ sắp tới.{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
0Như bạn đã biết trước đó, máy tính Base64 tạo ra một từ điển chứa chuỗi đầu vào được ánh xạ tới giá trị được mã hóa cơ sở64 của chuỗi này. Dữ liệu vẫn tồn tại trong bộ nhớ sau khi trang được tải nhưng được thanh lọc khi bạn tải lại trang. Lưu dữ liệu vào
{"code":"fr","hello":"Salut"}
86 sẽ bảo tồn từ điển giữa các trang tải lại. {"code":"fr","hello":"Salut"}
86 là một cửa hàng giá trị khóa.Để truy cập
{"code":"fr","hello":"Salut"}
86, bạn cần nhập {"code":"fr","hello":"Salut"}
91. Để gần với triển khai ban đầu, bạn sẽ tải và lưu dữ liệu từ điển vào {"code":"fr","hello":"Salut"}
86 ở định dạng JSON. Khóa để lưu và tìm nạp dữ liệu sẽ là {"code":"fr","hello":"Salut"}
93. Mã sửa đổi bao gồm nhập khẩu mới và hàm {"code":"fr","hello":"Salut"}
94:{"code":"fr","hello":"Salut"}
94 được thực thi khi mã Python được tải. Nó lấy dữ liệu JSON từ {"code":"fr","hello":"Salut"}
86 và điền vào một từ điển Python sẽ được sử dụng để giữ dữ liệu trong bộ nhớ trong suốt vòng đời của trang. Nếu nó không tìm thấy {"code":"fr","hello":"Salut"}
93 trong {"code":"fr","hello":"Salut"}
86, thì nó sẽ tạo ra một từ điển trống cho khóa {"code":"fr","hello":"Salut"}
93 trong {"code":"fr","hello":"Salut"}
86 và trả về một từ điển trống.{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
1Bạn có thể xem mã Python đầy đủ kết hợp
{"code":"fr","hello":"Salut"}
94 bằng cách mở rộng hộp bên dưới. Nó cho thấy cách sử dụng API web {"code":"fr","hello":"Salut"}
86 như lưu trữ liên tục thay vì dựa vào bộ nhớ trong bộ nhớ phù du, như trong việc triển khai trước đây của ví dụ này.Mã sau đây cho thấy cách quản lý dữ liệu bằng trình duyệt
{"code":"fr","hello":"Salut"}
86:Các dòng mới được tô sáng. Từ điển toàn cầu
{"code":"fr","hello":"Salut"}
13 được điền bởi {"code":"fr","hello":"Salut"}
94 khi tệp được tải và xử lý khi gọi $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
6. Khi trang được tải lại, dữ liệu được tìm nạp từ {"code":"fr","hello":"Salut"}
86.Mỗi lần tính toán giá trị Base64 mới, nội dung của
{"code":"fr","hello":"Salut"}
13 được chuyển đổi thành JSON và được lưu trữ trong bộ lưu trữ cục bộ. Chìa khóa của bộ lưu trữ là {"code":"fr","hello":"Salut"}
93.>>>
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
2Bạn có thể truy cập tất cả các chức năng API Web từ
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
9 và các mô hình con khác. Tài liệu cấp cao về việc truy cập API Web có sẵn trong tài liệu Brython. Để biết thêm chi tiết, bạn có thể tham khảo tài liệu API Web và sử dụng bảng điều khiển Brython để thử nghiệm các API Web.Nếu hiệu suất là một mối quan tâm, thì hãy xem xét sử dụng phiên bản JavaScript.
Khung giao diện người dùng web
Các khung giao diện người dùng JavaScript phổ biến như Angular, React, Vue.js hoặc Svelte đã trở thành một phần quan trọng của bộ công cụ phát triển phía trước, và Brython tích hợp liền mạch với một số khung này. Trong phần này, bạn sẽ xây dựng một ứng dụng bằng Vue.js phiên bản 3 và Brython.
Ứng dụng mà bạn sẽ xây dựng là một hình thức tính toán băm của một chuỗi. Tại đây, một ảnh chụp màn hình của trang HTML đang chạy:
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
18 của trang HTML xác định các ràng buộc và mẫu được khai báo:{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
3Nếu bạn không quen thuộc với Vue, thì bạn sẽ nhanh chóng bao gồm một vài điều bên dưới, nhưng vui lòng tham khảo tài liệu chính thức để biết thêm thông tin:
- Chỉ thị Vue.js là các giá trị thuộc tính đặc biệt, được đặt trước với
19, cung cấp hành vi động và ánh xạ dữ liệu giữa các giá trị của các thành phần DOM và Vue.js: are special attribute values, prefixed with1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
19, that provide dynamic behavior and data mapping between values of the DOM and Vue.js components:1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
20 liên kết giá trị đầu vào với mô hình VUE1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
21 và cắt giá trị. binds the input value to the Vue model1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
21 and trims the value.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
22 liên kết giá trị của thả xuống với1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
23. binds the value of the dropdown to1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
23.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
24 liên kết giá trị tùy chọn với1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
25. binds the option value to1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
25.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Các mẫu Vue được biểu thị bằng các biến được bao quanh bởi niềng răng xoăn đôi. Vue.js thay thế các giữ chỗ tương ứng với giá trị tương ứng trong thành phần Vue: are denoted with variables surrounded by double curly braces. Vue.js
substitutes the corresponding placeholders with the corresponding value in the Vue component:
261from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
251from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Trình xử lý sự kiện được xác định với biểu tượng AT [
28] như trong1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
29. are identified with an at symbol [1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
28] like in1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
29.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Mã Python tương ứng mô tả logic kinh doanh VUE và gắn kết:
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
4Bản chất khai báo của Vue.js được hiển thị trong tệp HTML với các chỉ thị và mẫu Vue. Nó cũng được chứng minh trong mã Python với khai báo của thành phần VUE trên dòng 11 và dòng 28 đến 35. Kỹ thuật khai báo này dây giá trị nút của DOM với dữ liệu VUE, cho phép hành vi phản ứng của khung.
Điều này loại bỏ một số mã nồi hơi mà bạn phải viết trong ví dụ trước. Chẳng hạn, lưu ý rằng bạn đã không chọn các thành phần từ DOM với một biểu thức như
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
30. Tạo ứng dụng VUE và gọi 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
31 xử lý ánh xạ của thành phần VUE cho các phần tử DOM tương ứng và liên kết của các hàm JavaScript.Trong Python, việc truy cập các trường đối tượng Vue yêu cầu bạn phải tham khảo đối tượng Vue với
{"code":"fr","hello":"Salut"}
81:- Dòng 14 lấy giá trị của trường thành phần
33. fetches the value of the component field1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
33.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 21 cập nhật thành phần dữ liệu
34. updates the data component1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
34.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 25 thêm một thuật toán vào danh sách
35. adds an algorithm to the list1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
35.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 26 Instantiates
36 với phím đầu tiên là1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
37. instantiates1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
36 with the first key of1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
37.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Nếu sự ra đời của Vue kết hợp với Brython đã thúc đẩy sự quan tâm của bạn, thì bạn có thể muốn kiểm tra dự án Vuepy, cung cấp các ràng buộc Python đầy đủ cho Vue.js và sử dụng Brython để chạy Python trong trình duyệt.
WebAssugging
Trong một số tình huống, bạn có thể sử dụng WebAssugging để cải thiện hiệu suất của Brython hoặc thậm chí JavaScript. WebAssugging, hoặc WASM, là mã nhị phân được hỗ trợ bởi tất cả các trình duyệt chính. Nó có thể cung cấp một cải tiến hiệu suất so với JavaScript trong trình duyệt và là mục tiêu tổng hợp cho các ngôn ngữ như C, C ++ và Rust. Nếu bạn không sử dụng Rust hoặc Wasm, thì bạn có thể bỏ qua phần này.WebAssembly, or Wasm, is binary code that is supported by all major browsers. It can provide a performance improvement over JavaScript in the browser and is a compilation target for languages like C, C++, and Rust. If you’re not using Rust or Wasm, then you can skip this section.
Trong ví dụ sau đây thể hiện cách sử dụng WebAssugging, bạn sẽ thực hiện một chức năng trong Rust và sẽ gọi nó từ Python.
Đây không phải là một hướng dẫn rỉ sét kỹ lưỡng. Nó chỉ làm trầy xước bề mặt. Để biết thêm chi tiết về rỉ sét, hãy xem tài liệu rỉ sét.
Bắt đầu bằng cách cài đặt rỉ sét bằng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
38. Để biên dịch các tệp WASM, bạn cũng cần thêm mục tiêu 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
39:
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
5Tạo một dự án bằng cách sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
40, được cài đặt trong quá trình cài đặt rỉ sét:Lệnh trên tạo ra một dự án bộ xương trong một thư mục có tên
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
41. Trong thư mục này, bạn sẽ tìm thấy 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
42, tệp cấu hình Build Rust Build, mà bạn cần sửa đổi để cho biết rằng bạn muốn tạo một thư viện động. Bạn có thể làm điều này bằng cách thêm phần được tô sáng:{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
6Sửa đổi
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
43 bằng cách thay thế nội dung của nó bằng cách sau:{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
7Trong gốc của dự án, nơi
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
42, biên dịch dự án của bạn:{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
8Tiếp theo, tạo thư mục
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14 với 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 sau:{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
9Dòng 6 trên tải các
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
94 sau đây từ cùng một thư mục:>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
0Các dòng được tô sáng là keo cho phép Brython truy cập vào chức năng rỉ sét
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
48:- Dòng 16 đọc
49 bằng cách sử dụng1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
50 và sau đó gọi1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
51 khi tệp WASM được tải xuống. reads1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
49 using1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
50 and then invokes1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
51 when the Wasm file is downloaded.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 5 thực hiện
51, lấy mô -đun WASM làm đối số. implements1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
51, which takes the Wasm module as an argument.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 7 gán
48 cho tên1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
54 cục bộ để làm cho nó có sẵn cho Python. assigns1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
48 to the local1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
54 name to make it available to Python.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Trong cùng một thư mục
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14, sao chép 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
49 từ 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
57:>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
1Bố cục thư mục dự án trông như thế này:
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
2Điều này cho thấy cấu trúc thư mục của dự án rỉ sét được tạo ra với
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
58. Để rõ ràng, 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
59 bị bỏ qua một phần.Bây giờ hãy khởi động một máy chủ trong
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14: 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
0Cuối cùng, trỏ trình duyệt internet của bạn đến
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
28. Trình duyệt của bạn sẽ hiển thị một trang như sau:Dự án này cho thấy cách tạo một webassugging mà bạn có thể sử dụng từ JavaScript hoặc Brython. Do chi phí đáng kể do xây dựng tệp WASM, đây không phải là cách tiếp cận đầu tiên của bạn để giải quyết một vấn đề cụ thể.
Nếu JavaScript không đáp ứng các yêu cầu về hiệu suất của bạn, thì Rust có thể là một tùy chọn. Điều này chủ yếu là hữu ích nếu bạn đã có mã WASM để tương tác, mã mà bạn đã xây dựng hoặc các thư viện WASM hiện có.
Một lợi ích có thể khác của việc sử dụng rỉ sét để tạo ra một webassugging là quyền truy cập vào các thư viện mà không tồn tại trong Python hoặc JavaScript. Nó cũng có thể hữu ích nếu bạn muốn sử dụng thư viện Python được viết bằng C và có thể được sử dụng với Brython. Nếu một thư viện như vậy tồn tại trong rỉ sét, thì bạn có thể xem xét việc xây dựng một tệp WASM để sử dụng nó với Brython.
Áp dụng sự phát triển không đồng bộ trong Brython
Lập trình đồng bộ là hành vi tính toán mà bạn có thể quen thuộc nhất. Ví dụ: khi thực hiện ba câu lệnh, A, B và C, chương trình A lần đầu tiên thực hiện A, sau đó B và cuối cùng C. Mỗi câu lệnh chặn luồng của chương trình trước khi chuyển nó sang cái tiếp theo. is the computation behavior that you may be the most familiar with. For example, when executing three statements, A, B, and C, a program first executes A, then B, and finally C. Each statement blocks the flow of the program before passing it on to the next one.
Hãy tưởng tượng một kỹ thuật sao cho A sẽ được thực hiện trước, B sẽ được gọi nhưng không được thực hiện ngay lập tức, và sau đó C sẽ được thực thi. Bạn có thể nghĩ B như một lời hứa sẽ bị xử tử trong tương lai. Vì B không chặn, nó được coi là không đồng bộ. Để biết thêm nền tảng về lập trình Asynchronus, bạn có thể kiểm tra bắt đầu với các tính năng Async trong Python.
JavaScript là một luồng đơn và phụ thuộc vào xử lý không đồng bộ đặc biệt khi liên lạc mạng. Ví dụ, tìm nạp kết quả của API không yêu cầu chặn việc thực thi các hàm JavaScript khác.
Với Brython, bạn có quyền truy cập vào các tính năng không đồng bộ thông qua một số thành phần:
- Gọi lại JavaScript
- JavaScript hứa hẹn
621from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
631from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Khi JavaScript đã phát triển, các cuộc gọi lại đã được thay thế dần dần bằng lời hứa hoặc các chức năng Async. Trong hướng dẫn này, bạn sẽ học cách sử dụng lời hứa từ Brython và cách sử dụng các mô -đun
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
62 và 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
63, tận dụng bản chất không đồng bộ của JavaScript.Mô -đun
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
66 từ thư viện CPython có thể được sử dụng trong bối cảnh trình duyệt và được thay thế trong Brython bằng 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
63.JavaScript hứa hẹn ở Brython
Trong JavaScript, một lời hứa là một đối tượng có thể tạo ra kết quả đôi khi trong tương lai. Giá trị được tạo ra sau khi hoàn thành sẽ là một giá trị hoặc lý do cho một lỗi.
Ở đây, một ví dụ minh họa cách sử dụng đối tượng JavaScript
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
68 từ Brython. Bạn có thể làm việc với ví dụ này trong bảng điều khiển trực tuyến:>>>
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
4Trong bảng điều khiển web, bạn có thể nhận được phản hồi ngay lập tức về việc thực thi mã Python:
- Dòng 1 nhập
69 để đặt thời gian chờ và1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
73 để truy cập đối tượng1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
68. imports1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
69 to set a timeout and1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
73 to access the1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
68 object.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 2 xác định một người thực thi,
72, trả về một tin nhắn khi lời hứa thành công, vào cuối thời gian chờ. defines an executor,1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
72, that returns a message when the promise is successful, at the end of the timeout.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 5 xác định một hàm,
73, hiển thị cảnh báo. defines a function,1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
73, that displays an alert.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
- Dòng 8 tạo ra một lời hứa với người thực thi, bị xích với khối
74, cho phép truy cập vào kết quả của lời hứa. creates a promise with the executor, chained with a1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
74 block, allowing access to the result of the promise.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Trong ví dụ trên, thời gian chờ mô phỏng nhân tạo một chức năng dài. Việc sử dụng thực sự của một lời hứa có thể liên quan đến một cuộc gọi mạng. Sau
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
75 giây, lời hứa hoàn thành thành công với giá trị 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
76.Nếu hàm thực thi,
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
72, phát hiện lỗi, thì nó có thể gọi 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
78 với lý do cho lỗi là đối số. Bạn có thể thực hiện điều này bằng một phương thức chuỗi mới, 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
79, trên đối tượng 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
68, như sau:>>>
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
5Trong bảng điều khiển web, bạn có thể nhận được phản hồi ngay lập tức về việc thực thi mã Python:
Dòng 1 nhập
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
69 để đặt thời gian chờ và 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
73 để truy cập đối tượng 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
68.Dòng 2 xác định một người thực thi, 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
72, trả về một tin nhắn khi lời hứa thành công, vào cuối thời gian chờ.
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
Dòng 5 xác định một hàm,
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
73, hiển thị cảnh báo.I/O-bound function is a function that mostly spends time waiting for input or output to finish, whereas a CPU-bound function is computing. Invoking an API over the network or querying a
database is an I/O-bound execution, whereas calculating a sequence of prime numbers is CPU bound.Brython sườn
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
62 phơi bày các hàm HTTP như 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
83 và 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
84, theo mặc định, không đồng bộ. Các chức năng này có tham số
import browser
browser.alert["Hello Real Python!"]
3 có thể được đặt thành 1
3
8 để hiển thị cùng một hàm đồng bộ.Để gọi HTTP
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
87 không đồng bộ, hãy gọi
import browser
browser.alert["Hello Real Python!"]
1 như sau:>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
6Để tìm nạp API trong chế độ chặn, hãy đặt tham số
import browser
browser.alert["Hello Real Python!"]
3 thành 1
3
8:>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
7Mã sau đây cho thấy sự khác biệt giữa việc thực hiện cuộc gọi AJAX chặn và cuộc gọi AJAX không chặn:
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
8Mã trên minh họa cả hai hành vi, đồng bộ và không đồng bộ:
Dòng 13 xác định
91, tìm nạp văn bản từ một tệp từ xa bằng cách sử dụng1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
1. Hành vi mặc định củaimport browser browser.alert["Hello Real Python!"]
1 là không đồng bộ.import browser browser.alert["Hello Real Python!"]
91 Trả về và1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
95 được gán cho tham số1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
96 được gọi lại sau khi nhận được tệp từ xa1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
97. defines1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
91, which fetches text from a remote file using1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
1. The default behavior ofimport browser browser.alert["Hello Real Python!"]
1 is asynchronous.import browser browser.alert["Hello Real Python!"]
91 returns, and1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
95 assigned to the parameter1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
96 is called back after receiving the remote file1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
97.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Dòng 18 xác định
98, thể hiện cách sử dụng1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
1 với hành vi chặn. Trong kịch bản này,import browser browser.alert["Hello Real Python!"]
95 được gọi trước khi1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
98 trả về. defines1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
98, which demonstrates how to use1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
1 with the blocking behavior. In this scenario,import browser browser.alert["Hello Real Python!"]
95 is called before1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
98 returns.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
Khi bạn chạy ví dụ đầy đủ và nhấp vào Async Get và chặn Get, bạn sẽ thấy màn hình sau:
Bạn có thể thấy rằng trong kịch bản đầu tiên,
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
91 được thực hiện đầy đủ và kết quả của cuộc gọi API xảy ra không đồng bộ. Trong tình huống thứ hai, kết quả của cuộc gọi API được hiển thị trước khi quay lại từ 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
98.Async io trong brython
Với
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
66, Python 3.4 bắt đầu để lộ các khả năng không đồng bộ mới. Trong Python 3.5, hỗ trợ không đồng bộ đã được làm giàu với cú pháp ________ 405/________ 406. Do sự không tương thích với vòng lặp sự kiện trình duyệt, Brython thực hiện 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
63 thay thế cho tiêu chuẩn 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
66.Mô -đun Brython
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
63 và Mô -đun Python 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
66 đều hỗ trợ bằng cách sử dụng từ khóa {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06 và chia sẻ các chức năng chung, như {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
13 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
14. Cả hai mô -đun đều thực hiện các chức năng riêng biệt khác liên quan đến bối cảnh thực thi tương ứng của chúng, môi trường bối cảnh CPython cho 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
66 và môi trường trình duyệt cho 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
63.Coroutines
Bạn có thể sử dụng
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
13 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
14 để tạo coroutines. Để minh họa hành vi của các coroutines được thực hiện trong Brython, bạn sẽ thực hiện một biến thể của một ví dụ coroutine có sẵn trong tài liệu Cpython:>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
9Ngoại trừ dòng
{"code":"fr","hello":"Salut"}
30 đầu tiên, mã giống như bạn tìm thấy trong tài liệu CPython. Nó cho thấy việc sử dụng các từ khóa {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06 và hiển thị {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
13 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
14 trong hành động:- Dòng 1 sử dụng
66 làm bí danh cho1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
63. Mặc dù nó bóng tối1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
26, nhưng nó giữ mã gần với ví dụ về tài liệu Python để tạo điều kiện so sánh. uses{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
66 as an alias for1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
63. Although it shadows1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
26, it keeps the code close to the Python documentation example to facilitate the comparison.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 4 tuyên bố Coroutine
27. Lưu ý việc sử dụng{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05. declares the coroutine{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
27. Note the use of{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 5 gọi
29 với{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
06 để hàm hiện tại sẽ giảm kiểm soát thành một hàm khác cho đến khi{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
14 hoàn thành. invokes{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
29 with{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
06 so that the current function will cede control to another function until{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
14 completes.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 8 tuyên bố một coroutine khác sẽ gọi Coroutine
27 hai lần. declares another coroutine that will itself call the coroutine{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
27 twice.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 9 gọi
13, một chức năng không chặn có một coroutine, ____________ 434 trong ví dụ này là một đối số. invokes{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
13, a nonblocking function that takes a coroutine—{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
34 in this example—as an argument.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
Lưu ý rằng trong bối cảnh của trình duyệt,
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
35 tận dụng vòng lặp sự kiện JavaScript nội bộ. Điều này khác với chức năng liên quan {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
36 trong CPython, nơi quản lý đầy đủ vòng lặp sự kiện.Để thực thi mã này, hãy dán nó vào Trình chỉnh sửa Brython trực tuyến và nhấp vào Chạy. Bạn sẽ nhận được một đầu ra tương tự như ảnh chụp màn hình sau:
Đầu tiên, tập lệnh được thực thi, sau đó
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
37 được hiển thị và cuối cùng {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
38 được hiển thị.Để biết thêm chi tiết về Coroutines trong Python, bạn có thể xem Async IO trong Python: một hướng dẫn hoàn chỉnh.
Các khái niệm chung về I/O không đồng bộ áp dụng cho tất cả các nền tảng chấp nhận mô hình này. Trong JavaScript, vòng lặp sự kiện về bản chất là một phần của môi trường, trong khi ở Cpython, đây là thứ được quản lý bằng cách sử dụng các chức năng được phơi bày bởi
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
66.Ví dụ trên là một bài tập có chủ ý để giữ mã chính xác như được hiển thị trong ví dụ tài liệu Python. Trong khi mã hóa trong trình duyệt với Brython, nhưng nó khuyên bạn nên sử dụng rõ ràng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
63, như bạn sẽ thấy trong phần sau.Web chức năng cụ thể
Để cấp một cuộc gọi không đồng bộ đến API, như trong phần trước, bạn có thể viết một chức năng như sau:
1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
0Lưu ý việc sử dụng các từ khóa
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06. Hàm cần được định nghĩa là {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 để sử dụng cuộc gọi với {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06. Trong quá trình thực hiện chức năng này, khi đạt được cuộc gọi đến {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
45, chức năng cung cấp kiểm soát trở lại vòng lặp sự kiện chính trong khi chờ đợi cuộc gọi mạng, {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
46, để hoàn thành. Phần còn lại của việc thực hiện chương trình không bị chặn.Ở đây, một ví dụ về cách gọi
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
47: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
1Hàm
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
35 thực thi coroutine {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
47. Nó không chặn.Một ví dụ mã hoàn chỉnh hơn cho thấy cách sử dụng các từ khóa
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06 và cách {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
35 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
46 là bổ sung: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
2Như trong các phiên bản gần đây nhất của Python 3, bạn có thể sử dụng từ khóa
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06:- Dòng 7 xác định
47 với từ khóa{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05. defines{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
47 with the keyword{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 9 gọi
46 với từ khóa{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
06. Sử dụng{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
06 yêu cầu hàm bao quanh được xác định với{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05. invokes{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
46 with the keyword{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
06. Using{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
06 requires the enclosing function to be defined with{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 14 cho thấy cách sử dụng
35, lấy làm đối số hàm{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05 được gọi. shows how to use{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
35, which takes as an argument the{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
05 function to be called.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
Để chạy ví dụ đầy đủ, bạn cần khởi động một máy chủ web. Bạn có thể khởi động máy chủ web Python Development với
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
64. Nó bắt đầu một máy chủ web cục bộ trên cổng 8000 và trang mặc định ____102:Ảnh chụp màn hình hiển thị chuỗi các bước được thực hiện sau khi nhấp vào Async Get. Sự kết hợp của việc sử dụng mô -đun
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
26 và các từ khóa {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
05 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
06 cho thấy cách bạn có thể nắm lấy mô hình lập trình không đồng bộ mà JavaScript quảng bá.Phân phối và đóng gói một dự án Brython
Phương pháp bạn sử dụng để cài đặt Brython có thể ảnh hưởng đến cách thức và nơi bạn có thể triển khai dự án Brython của mình. Cụ thể, để triển khai cho PYPI, tùy chọn tốt nhất là đầu tiên cài đặt Brython từ PYPI và sau đó tạo dự án của bạn với
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10. Nhưng việc triển khai web điển hình đến máy chủ riêng hoặc cho nhà cung cấp đám mây có thể tận dụng bất kỳ phương thức cài đặt nào bạn chọn.Bạn có một số tùy chọn triển khai:
- Triển khai thủ công và tự động
- Triển khai đến PYPI
- Triển khai cho CDN
Bạn có thể khám phá từng trong số này trong các phần sau.
Triển khai web thủ công và tự động
Ứng dụng của bạn chứa tất cả các phụ thuộc tĩnh, CSS, JavaScript, Python và các tệp hình ảnh mà bạn cần cho trang web của mình. Brython là một phần của các tệp JavaScript của bạn. Tất cả các tập tin có thể được triển khai AS-IS trên nhà cung cấp mà bạn chọn. Bạn có thể tham khảo các hướng dẫn phát triển web và tự động hóa việc triển khai Django bằng vải và ansible để biết chi tiết về việc triển khai các ứng dụng Brython của bạn.
Nếu bạn quyết định sử dụng
{"code":"fr","hello":"Salut"}
59 để đi kèm mã Python của bạn, thì các tệp bạn triển khai won có bất kỳ mã nguồn Python nào, chỉ $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
5 và {"code":"fr","hello":"Salut"}
50. Bạn cũng đã giành chiến thắng bao gồm 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
21 vì các mô -đun cần thiết sẽ được bao gồm trong {"code":"fr","hello":"Salut"}
50 rồi.
Triển khai để PYPI
Khi bạn cài đặt Brython từ PYPI, bạn có thể sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 để tạo gói có thể được triển khai thành PYPI. Mục tiêu của việc tạo một gói như vậy là mở rộng mẫu Brython mặc định làm cơ sở cho các dự án tùy chỉnh của bạn và cung cấp các trang web Brython có sẵn từ PYPI.Sau khi làm theo các hướng dẫn trong phần Cài đặt từ PYPI, hãy thực hiện lệnh sau trong dự án
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14 mới của bạn: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
3Bạn sẽ được nhắc trả lời một vài câu hỏi nhằm tạo
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
77, mà bạn có thể sửa đổi sau. Sau khi hoàn thành lệnh, bạn sẽ có một thư mục gọi là {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
78 chứa các tệp bạn cần để tạo gói có thể cài đặt.Bạn có thể kiểm tra cài đặt gói mới này cục bộ như sau:
1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
4Sau đó, bạn cũng có thể xác nhận rằng lệnh mới được triển khai cục bộ với gói
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14 bằng cách thực thi lệnh sau: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
5Lưu ý rằng lệnh
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
14 hoạt động chính xác như Brython đã làm sau khi cài đặt ban đầu. Bạn chỉ cần tạo một gói Brython có thể cài đặt tùy chỉnh có thể được triển khai thành PYPI. Để biết mô tả kỹ lưỡng về cách triển khai gói hàng của bạn thành PYPI, hãy xem cách xuất bản gói Python nguồn mở thành PYPI.Sau khi được triển khai thành PYPI, bạn có thể cài đặt gói Brython của mình với
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
08 trong môi trường ảo Python. Bạn có thể tạo ứng dụng tùy chỉnh mới của mình với lệnh mới mà bạn đã tạo: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
6Tóm lại, đây là các bước để triển khai PYPI:
- Cài đặt Brython từ Pypi.
- Tạo một dự án với
17.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
- Tạo một gói có thể cài đặt từ dự án của bạn với
83.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Triển khai gói này để PYPI.
Các phương pháp cài đặt khác, CDN CDN, GitHub và NPM, don don bao gồm
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
10 và do đó aren rất phù hợp để chuẩn bị gói PYPI.Triển khai đến CDN
Giống như
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
5 và {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
86 có sẵn trên các máy chủ CDN, bạn cũng có thể triển khai tài sản tĩnh, hình ảnh, kiểu dáng và tệp JavaScript của mình, bao gồm các tệp Python của bạn hoặc {"code":"fr","hello":"Salut"}
50, cho CDN. Ví dụ về CDN bao gồm:- CloudFlare
- Google Cloud CDN
- Azure CDN
- Amazon Cloudfront
- Akamai
Nếu ứng dụng của bạn là nguồn mở, thì bạn có thể nhận được hỗ trợ CDN miễn phí. Ví dụ bao gồm CDNJ và JSdelivr.
Tạo tiện ích mở rộng Google Chrome
Các tiện ích mở rộng Chrome là các thành phần được xây dựng với các công nghệ web và được kết hợp vào Chrome để tùy chỉnh môi trường duyệt web của bạn. Thông thường, các biểu tượng của các tiện ích mở rộng này có thể nhìn thấy ở đầu cửa sổ Chrome, ở bên phải của thanh địa chỉ.
Tiện ích mở rộng công khai có sẵn trên cửa hàng trang web Chrome. Để tìm hiểu, bạn sẽ cài đặt các tiện ích mở rộng Google Chrome từ các tệp cục bộ:
Trước khi thực hiện việc triển khai tiện ích mở rộng Google Chrome ở Brython, trước tiên, bạn sẽ thực hiện phiên bản JavaScript và sau đó dịch nó thành Brython.
Hello World Extension in JS
Là một khởi đầu, bạn sẽ thực hiện một tiện ích mở rộng sẽ thực hiện các hành động sau:
- Mở cửa sổ bật lên khi bạn nhấp vào biểu tượng tiện ích mở rộng
- Mở tin nhắn nhanh khi bạn nhấp vào nút cửa sổ bật lên
- Nối tin nhắn bạn đã nhập ở dưới cùng của cửa sổ bật lên ban đầu
Ảnh chụp màn hình sau đây minh họa hành vi này:
Trong một thư mục trống, hãy tạo tệp
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
88 để định cấu hình tiện ích mở rộng: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
7Trường quan trọng cho ví dụ này là tệp bật lên mặc định,
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
89, mà bạn cũng sẽ phải tạo. Để biết thông tin về các trường khác và hơn thế nữa, bạn có thể tham khảo tài liệu định dạng tệp kê khai.Trong cùng một thư mục, hãy tạo tệp
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
89 được sử dụng để xác định giao diện người dùng của tiện ích mở rộng: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
8Tệp HTML bao gồm một liên kết đến logic kinh doanh JavaScript của tiện ích mở rộng và mô tả giao diện người dùng của nó:
- Dòng 5 đề cập đến
91, chứa logic của phần mở rộng. refers to{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
91, which contains the logic of the extension.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 8 xác định một
98 sẽ được liên kết với một trình xử lý trong1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
91. defines a{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
98 that will be bound to a handler in1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
91.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 9 tuyên bố một trường sẽ được sử dụng bởi mã JavaScript để hiển thị một số văn bản. declares a field to be used by the JavaScript code to display some text.
Bạn cũng cần tạo
{
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
91: 1
2
3
4
6
7
8
9
10 import browser
11 browser.alert["Hello Real Python!"]
12
13
14
9Logic chính của mã JavaScript bao gồm việc khai báo một trình xử lý
{"code":"fr","hello":"Salut"}
16 liên kết với trường {
"count": 1,
"entries": [
{
"API": "Open Government, USA",
"Description": "United States Government Open Data",
"Auth": "",
"HTTPS": true,
"Cors": "unknown",
"Link": "//www.data.gov/",
"Category": "Government"
}
]
}
96 của thùng chứa HTML:- Dòng 2 gọi chế độ tập lệnh cho phép xác thực nghiêm ngặt hơn trong JavaScript để tiết lộ các lỗi JavaScript. invokes the script mode that enables more stringent validation in JavaScript to reveal JavaScript mistakes.
- Dòng 4 chọn trường được xác định bởi
96 trong{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
89 và gán nó cho một biến. selects the field identified by{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
96 in{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
89 and assigns it to a variable.{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
- Dòng 6 xác định trình xử lý sẽ xử lý sự kiện khi người dùng nhấp vào nút. Trình xử lý sự kiện này nhắc người dùng cho tên của họ, sau đó thay đổi nội dung của
99 được xác định với{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
00 thành tên được cung cấp. defines the handler that will process the event when a user clicks the button. This event handler prompts the user for their name, then changes the contents of the>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
99 identified with{ "count": 1, "entries": [ { "API": "Open Government, USA", "Description": "United States Government Open Data", "Auth": "", "HTTPS": true, "Cors": "unknown", "Link": "//www.data.gov/", "Category": "Government" } ] }
00 to the provided name.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
Trước khi cài đặt tiện ích mở rộng này, hãy thực hiện các bước sau:
- Mở menu Google Chrome ở phía bên phải của màn hình.
- Mở các phụ nhân con thêm các công cụ.
- Nhấp vào phần mở rộng.
Một màn hình sẽ hiển thị các tiện ích mở rộng hiện đã được cài đặt của bạn, nếu có. Nó có thể trông như thế này:
Để cài đặt tiện ích mở rộng mới của mình, bạn sẽ cần thực hiện các bước sau:
- Đảm bảo rằng chế độ nhà phát triển được bật ở phía trên bên phải của màn hình.
- Nhấp vào Tải Giải nén.
- Chọn thư mục chứa tất cả các tệp bạn vừa tạo.
Nếu không có lỗi nào xảy ra trong quá trình cài đặt, thì bây giờ bạn sẽ thấy một biểu tượng mới có J ở phía bên phải của thanh địa chỉ trình duyệt của bạn. Để kiểm tra tiện ích mở rộng của bạn, nhấp vào biểu tượng J của thanh công cụ được hiển thị bên dưới:
Nếu bất kỳ lỗi nào xảy ra trong quá trình cài đặt hoặc thực thi, thì bạn sẽ thấy nút lỗi màu đỏ ở bên phải của nút mở rộng nút Xóa:
Bạn có thể nhấp vào lỗi để hiển thị lỗi và xác định nguyên nhân gốc. Sau khi sửa, tải lại phần mở rộng bằng cách nhấp vào mũi tên tròn ở phía dưới bên phải của thẻ mở rộng, sau đó lặp lại quy trình cho đến khi nó hoạt động như bạn mong đợi.
Để kiểm tra tiện ích mở rộng mới được cài đặt của bạn, bạn có thể nhấp vào biểu tượng J được hiển thị ở phía bên phải của thanh công cụ trình duyệt. Nếu biểu tượng được hiển thị, thì hãy nhấp vào các tiện ích mở rộng để liệt kê các tiện ích mở rộng đã cài đặt và chọn nút Pushpin được căn chỉnh với tiện ích mở rộng JS Hello World mà bạn vừa cài đặt.
Hello World Extension in Python
Nếu bạn đã đạt đến điểm này, thì bạn đã hoàn thành các bước khó khăn nhất, chủ yếu để làm quen với quá trình tạo tiện ích mở rộng Chrome và cài đặt nó. Các bước sẽ tương tự với Brython, với một vài khác biệt mà bạn sẽ học trong phần này.
Tệp kê khai sẽ khác biệt, với một tên mở rộng khác và, để đo lường tốt, một mô tả khác:
1
3
0Lưu ý rằng bạn cũng phải bao gồm một tài sản mới,
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
01. Điều này là cần thiết để chính sách chống lại 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
85 có thể được nới lỏng trong hệ thống mở rộng Chrome. Hãy nhớ rằng Brython sử dụng 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
85.Đây là một thứ gì đó mà bạn đã giới thiệu và bạn có thể kiểm soát ở Brython. Bạn cần phải bật bằng cách sử dụng
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
85 nếu bạn muốn sử dụng Brython làm ngôn ngữ của phần mở rộng trình duyệt của bạn. Nếu bạn không thêm >>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
05 vào >>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
01, thì bạn sẽ thấy lỗi sau: 1
3
1Tệp HTML cũng sẽ có một vài bản cập nhật, như sau:
1
3
2Mã HTML rất giống với mã bạn đã sử dụng để tạo tiện ích mở rộng Chrome trong JavaScript. Một vài chi tiết đáng chú ý:
- Dòng 5 tải
64 từ một gói địa phương. Vì lý do bảo mật, chỉ các tập lệnh cục bộ được tải và bạn có thể tải từ một nguồn bên ngoài như CDN. loads1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
64 from a local package. For security reasons, only local scripts are loaded and you can’t load from an external source like a CDN.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
- Dòng 6 tải
08, gọi>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
6. loads$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
08, which invokes>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
6.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
- Dòng 7 tải
10. loads>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
10.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
- Dòng 9 tuyên bố
18 mà không có1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
12 thông thường. declares>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
18 without the usual1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6ajax.get["//api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete]
12.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
Một ràng buộc bảo mật khác ngăn bạn gọi
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
6 trong sự kiện >>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
14 của thẻ 1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6ajax.get["//api.publicapis.org/random",
7 blocking=True,
8 oncomplete=on_complete]
18. Giải pháp thay thế là thêm người nghe vào tài liệu và chỉ ra trình duyệt để thực thi $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
6 sau khi nội dung của tài liệu được tải: 1
3
3Cuối cùng, bạn có thể thấy logic chính của ứng dụng này trong mã Python sau:
1
3
4Với điều đó, bạn đã sẵn sàng để tiến hành cài đặt và thử nghiệm như bạn đã làm cho phần mở rộng Chrome JavaScript.
Thử nghiệm và gỡ lỗi Brython
Hiện tại không có thư viện tiện lợi cho mã thử nghiệm đơn vị Brython. Khi Brython phát triển, bạn sẽ thấy nhiều tùy chọn hơn để kiểm tra và gỡ lỗi mã Python trong trình duyệt. Nó có thể tận dụng khung thử nghiệm đơn vị Python cho một mô -đun Python độc lập có thể được sử dụng bên ngoài trình duyệt. Trong trình duyệt, selen với trình điều khiển trình duyệt là một lựa chọn tốt. Gỡ lỗi cũng bị hạn chế nhưng có thể.
Bài kiểm tra đơn vị Python
Các khung thử nghiệm đơn vị Python, như
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
17 và >>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
18 tích hợp, don lồng làm việc trong trình duyệt. Bạn có thể sử dụng các khung này cho các mô -đun Python cũng có thể được thực thi trong bối cảnh của Cpython. Bất kỳ mô-đun cụ thể nào của Brython như $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
[brython] $ python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB]
|████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.2.3
Uninstalling pip-20.2.3:
Successfully uninstalled pip-20.2.3
9 đều có thể được kiểm tra với các công cụ như vậy ở dòng lệnh. Để biết thêm thông tin về thử nghiệm đơn vị Python, hãy xem bắt đầu với thử nghiệm trong Python.Selen
Selenium là một khung để tự động hóa các trình duyệt. Nó bất khả tri đối với ngôn ngữ được sử dụng trong trình duyệt, cho dù đó là JavaScript, Elm, Wasm hay Brython, bởi vì nó sử dụng khái niệm webDriver để hoạt động giống như người dùng tương tác với trình duyệt. Bạn có thể kiểm tra tự động hóa web hiện đại với Python và Selenium để biết thêm thông tin về khung này.
Bài kiểm tra đơn vị JavaScript
Có nhiều khung thử nghiệm tập trung vào JavaScript, như Mocha, Jasmine và Qunit, hoạt động tốt trong hệ sinh thái JavaScript đầy đủ. Nhưng họ không nhất thiết phải phù hợp với mã python thử nghiệm đơn vị chạy trong trình duyệt. Một tùy chọn yêu cầu phơi bày toàn cầu các chức năng Brython cho JavaScript, đi ngược lại các thực tiễn tốt nhất.
Để minh họa tùy chọn hiển thị chức năng Brython cho JavaScript, bạn sẽ sử dụng QUNIT, bộ thử nghiệm đơn vị JavaScript có thể chạy khép kín trong tệp HTML:
1
3
5Trong một tệp HTML, bạn đã viết mã Python, mã JavaScript và các kiểm tra JavaScript để xác thực các hàm từ cả hai ngôn ngữ được thực thi trong trình duyệt:
- Dòng 11 nhập khung QUNIT. imports the QUnit framework.
- Dòng 23 phơi bày
20 cho JavaScript. exposes>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
20 to JavaScript.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
- Dòng 28 Xác định
21 để kiểm tra hàm JavaScript>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
22. defines>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
21 to test the JavaScript function>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
22.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
- Dòng 34 xác định
23 để kiểm tra hàm Python>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
20. defines>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
23 to test the Python function>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
20.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
- Dòng 40 xác định
25 để kiểm tra hàm Python>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
20 với lỗi. defines>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
25 to test the Python function>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
20 with an error.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
Bạn không cần phải bắt đầu một máy chủ web để thực hiện kiểm tra đơn vị. Mở
1from browser import ajax
2
3def on_complete[req]:
4 print[req.text]
5
6language = "fr"
7
8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
9 blocking=True,
10 oncomplete=on_complete]
02 trong trình duyệt và bạn sẽ thấy như sau:Trang cho thấy hai thử nghiệm thành công,
>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
28 và >>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
29 và một bài kiểm tra thất bại, >>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
30.Việc hiển thị hàm Python cho JavaScript cho thấy cách bạn có thể sử dụng khung kiểm tra đơn vị JavaScript để thực hiện Python trong trình duyệt. Mặc dù có thể thử nghiệm, nhưng nó không được khuyến nghị nói chung vì nó có thể xung đột với các tên JavaScript hiện có.
Gỡ lỗi ở Brython
Theo văn bản này, không có công cụ thân thiện với người dùng nào để gỡ lỗi ứng dụng Brython của bạn. Bạn không thể tạo một tệp bản đồ nguồn cho phép bạn gỡ lỗi từng bước trong các công cụ phát triển trình duyệt.
Điều này không nên làm bạn nản lòng khi sử dụng Brython. Dưới đây là một vài mẹo để giúp gỡ lỗi và khắc phục sự cố mã Brython của bạn:
- Sử dụng
31 hoặc>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
32 để in các giá trị biến trong bảng điều khiển công cụ phát triển trình duyệt. to print variable values in the browser’s developer tools console.>>> uuid.uuid4[] UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']
- Sử dụng gỡ lỗi chuỗi F như được mô tả trong các tính năng mới thú vị trong Python 3.8. as described in Cool New Features in Python 3.8.
- Xóa trình duyệt Lừa được lập chỉ mụcDB một lần bằng cách sử dụng các công cụ nhà phát triển. once in a while by using the developer tools.
- Tắt bộ đệm trình duyệt trong quá trình phát triển bằng cách kiểm tra hộp kiểm tắt bộ đệm trong tab mạng của các công cụ phát triển trình duyệt. during development by checking the Disable cache checkbox in the Network tab of the browser’s developer tools.
- Thêm các tùy chọn vào
6 để cho phép hiển thị thông tin gỡ lỗi bổ sung trong bảng điều khiển JavaScript. to enable additional debug information to be displayed in the JavaScript console.$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
- Sao chép
5 và$ python3 -m venv .venv --prompt brython $ source .venv/bin/activate [brython] $ python -m pip install --upgrade pip Collecting pip Downloading pip-20.2.4-py2.py3-none-any.whl [1.5 MB] |████████████████████████████████| 1.5 MB 1.3 MB/s Installing collected packages: pip Attempting uninstall: pip Found existing installation: pip 20.2.3 Uninstalling pip-20.2.3: Successfully uninstalled pip-20.2.3
82 cục bộ để tăng tốc tải lại trong quá trình phát triển. to speed up reloading during development.1from browser import ajax 2 3def on_complete[req]: 4 print[req.text] 5 6language = "fr" 7 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}", 9 blocking=True, 10 oncomplete=on_complete]
- Bắt đầu một máy chủ cục bộ khi bạn
30 mã Python. when you{"code":"fr","hello":"Salut"}
30 Python code.{"code":"fr","hello":"Salut"}
- Mở Thanh tra từ phần mở rộng khi khắc phục sự cố mở rộng Chrome. when troubleshooting a Chrome extension.
Một trong những tính năng của Python là Repred [vòng lặp Read-Eval]. Bảng điều khiển Brython trực tuyến cung cấp một nền tảng để thử nghiệm, kiểm tra và gỡ lỗi hành vi của một số đoạn mã.
Khám phá các lựa chọn thay thế cho Brython
Brython là một lựa chọn duy nhất để viết mã Python trong trình duyệt. Một vài lựa chọn thay thế có sẵn:
- Skulpt
- Transcrypt
- Pyodide
- PyPy.js
Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.
Làm thế nào để các khung này so sánh?
Skulpt
Transcrypt
Pyodide
Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.
Transcrypt
Pyodide
Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.
Pyodide
Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.
Làm thế nào để các khung này so sánh?
PyPy.js
Skulpt biên dịch mã python cho javascript trong trình duyệt. Việc biên dịch diễn ra sau khi trang được tải, trong khi trong Brython, phần tổng hợp diễn ra trong quá trình tải trang.
Mặc dù nó không có chức năng tích hợp để thao túng DOM, Skulpt rất gần với Brython trong các ứng dụng của nó. Điều này bao gồm sử dụng giáo dục và các ứng dụng Python toàn diện, như được chứng minh bởi Anvil.
Skulpt là một dự án được duy trì hướng tới Python 3. Brython chủ yếu ngang hàng với CPython 3.9 cho các mô -đun tương thích với việc thực hiện trong trình duyệt.
Transcrypt bao gồm một công cụ dòng lệnh để biên dịch mã Python với mã JavaScript. Việc biên dịch được cho là đi trước thời hạn [AOT]. Mã kết quả sau đó có thể được tải vào trình duyệt. Transcrypt có một dấu chân nhỏ, khoảng 100kb. Nó nhanh chóng và hỗ trợ thao tác Dom.
Sự khác biệt giữa Skulpt và Brython là Transcrypt được biên dịch cho JavaScript với trình biên dịch Transcrypt trước khi được tải xuống và sử dụng trong trình duyệt. Điều này cho phép tốc độ và kích thước nhỏ. Tuy nhiên, nó ngăn chặn Transcrypt không được sử dụng như một nền tảng cho giáo dục như các nền tảng khác.
Pyodide là một bản tổng hợp WebAssugging của trình thông dịch CPython. Nó diễn giải mã Python trong trình duyệt. Không có giai đoạn tổng hợp JavaScript. Mặc dù pyodide, như pypy.js, yêu cầu bạn phải tải xuống một lượng dữ liệu đáng kể, nhưng nó được tải với các thư viện khoa học như Numpy, Pandas, Matplotlib, v.v.
Bạn có thể thấy Pyodide là một môi trường máy tính xách tay Jupyter chạy hoàn toàn trong trình duyệt thay vì được phục vụ bởi một máy chủ back-end. Bạn có thể thử nghiệm với pyodide bằng một ví dụ trực tiếp.
- Pypy.js sử dụng trình thông dịch Pypy Python được biên dịch cho JavaScript với EMScripten, làm cho nó tương thích để chạy trong trình duyệt. in a local environment
- Ngoài tình trạng không hoạt động hiện tại của dự án, Pypy.js là một gói lớn, khoảng 10 MB, bị cấm đối với các ứng dụng web điển hình. Bạn vẫn có thể sử dụng pypy.js như một nền tảng để học Python trong trình duyệt bằng cách mở trang chủ Pypy.js. in your front-end web applications
- Pypy.js được tổng hợp với javascript với eMscripten. Pyodide tiến thêm một bước, tận dụng EMScripten và WASM đặc biệt để biên dịch các phần mở rộng Python C như Numpy to Webassugging.DOM
- Theo văn bản này, pypy.js dường như không được duy trì. Đối với một cái gì đó trong cùng một tĩnh mạch liên quan đến quá trình biên dịch, hãy xem xét pyodide.JavaScript
- Sự kết luậnbrowser extensions
- Trong hướng dẫn này, bạn đã thực hiện một cuộc lặn sâu vào một số khía cạnh của việc viết mã Python trong trình duyệt. Điều này có thể đã mang lại cho bạn một số mối quan tâm trong việc thử Python cho sự phát triển phía trước.alternatives to Brython
Trong hướng dẫn này, bạn đã học được cách:
Cài đặt và sử dụng Brython trong môi trường địa phương