Tôi có thể chạy Python trong Chrome không?
If you’re a web developer who prefers writing Python over JavaScript, then Brython, a Python implementation that runs in the browser, may be an appealing option Show
JavaScript là ngôn ngữ thực tế của phát triển web front-end. 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 In this tutorial, you’ll learn how to
As an intermediate Python developer familiar with web development, you’ll get the most out of this tutorial if you also have some knowledge of HTML and JavaScript. For a JavaScript refresher, check out Python vs JavaScript for Pythonistas You can download the source material for the examples in this tutorial by clicking the link below Get the Source Code. Click here to get the source code you’ll use to learn about using Brython to run Python in the browser in this tutorial Running Python in the Browser. The BenefitsAlthough JavaScript is the ubiquitous language of front-end web development, the following points may apply to you
Whatever the reason, many developers would prefer a Python-based alternative to JavaScript for leveraging the power of the browser There are several benefits of running Python in the browser. It allows you to
One side effect of using Python in the browser is a loss of performance compared to the same code in JavaScript. However, this drawback doesn’t outweigh any of the benefits outlined above Remove adsTriển khai phát triển web đẳng cấuJavaScript đẳng cấu hoặc JavaScript phổ quát, 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 dựa trên JavaScript, cụ thể là máy chủ Node. 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 Brython cho phép bạn xây dựng giao diện người dùng bằng 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, chẳng hạn như mã sau chuẩn hóa và xác thực số điện thoại của Hoa Kỳ
2 loại bỏ mọi ký tự không phải chữ và số, trong khi 3 trả về 4 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. The same code can be shared between processes running on a Python server and a client built with BrythonAccessing Web APIsInternet browsers expose standardized web APIs to JavaScript. These standards are part of the HTML Living Standard. Some web API examples include
Brython allows you to both use the web APIs and interact with JavaScript. You’ll work with some of the web APIs in Prototyping and JavaScript LibrariesPython is often used to prototype snippets of code, language constructs, or bigger ideas. With Brython, this common coding practice becomes available in your browser. For example, you can use the Brython console or the interactive editor to experiment with a snippet of code Open the online editor and type the following code
Here’s how this code works
Click Run above the output pane to see the following result
Try modifying the language from 3 to 4 and observe the result. The language codes supported by this API are listed in the HelloSalut documentationNote. HelloSalut is one of the public APIs available on the Internet and listed in the Public APIs GitHub project You can modify the code snippet in the online editor to consume a different public API. For example, try to fetch a from the Public APIs project
Copy the code above into the online Brython editor and click Run to display the result. Here’s an example in JSON format
Because the endpoint fetches a random project, you’ll probably get a different result. For more information about the JSON format, check out Working With JSON Data in Python You can use prototyping to try out regular Python code as you would in the Python interpreter. Because you’re in the context of a browser, Brython also provides ways to
As a shortcut, you can take advantage of most of the features described above by opening the console or editor available on the Brython website. This doesn’t require you to install or run anything on your local computer. Instead, it gives you an online playground to interact with both Python and web technologies Remove adsTeaching Python to StudentsBrython is both a Python compiler and an interpreter written in JavaScript. As a result, you can compile and run Python code in the browser. A good example of this feature is demonstrated by the online editor available on the Brython website With the online editor, Python is running in the browser. There’s no need to install Python on a machine, and there’s no need to send code to the server to be executed. The feedback is immediate for the user, and this approach doesn’t expose the back end to malicious scripts. Students can experiment with Python on any device with a working browser, such as phones or Chromebooks, even with a spotty internet connection Taking Performance Into AccountThe Brython site notes that the implementation’s execution speed is comparable to CPython. But Brython is executed in the browser, and the reference in this environment is JavaScript baked into the browser engine. As a result, expect Brython to be slower than hand-written, well-tuned JavaScript Brython compiles Python code into JavaScript and then executes the generated code. These steps have an impact on overall performance, and Brython may not always meet your performance requirements. In some cases, you may need to delegate some code execution to JavaScript or even WebAssembly. You’ll see how to build WebAssembly and how to use the resulting code in Python in the section on However, don’t let perceived performance detract you from using Brython. For example, importing Python modules may result in downloading the corresponding module from the server. To illustrate this situation, open the Brython console and execute the following code >>>
The delay until the prompt is displayed (390 ms on a test machine) is noticeable. This is due to Brython having to download 5 and its dependencies and then compile the downloaded resources. However, from that point on, there’s no delay while executing functions available in 5. For example, you can generate a , UUID version 4, with the following code>>>
Calling 7 generates a object, whose string representation is printed in the console. Calling 7 returns immediately and is much quicker than the initial import of the 5 moduleHaving FunIf you’re reading this tutorial, then you’re probably interested in writing Python code in the browser. Seeing Python code executed in the browser is exciting for most Pythonistas and awakes a sense of fun and endless possibility The author of Brython, Pierre Quentel, and the contributors to the project also kept the fun of Python in mind while undertaking the huge task of making this language compatible with the web browser To prove it, point your browser to the Brython interactive console, and at the Python prompt, type the following
Similar to the experience of Python on your local machine, Brython compiles and executes the instructions on the fly and prints The Zen of Python. It takes place in the browser and the Python code execution does not require any interaction with a back-end server You can also try another classic Python Easter egg in the same browser environment with the following code
Brython embraces the same bits of humor that you’ll find in the Python reference implementation Now that you’re familiar with the basics of working with Brython, you’ll explore more advanced features in the following sections Remove adsInstalling BrythonExperimenting with Brython’s online console is a good start, but it won’t allow you to deploy your Python code. There are several different options for installing Brython in a local environment Instructions for each of these methods are outlined below, but feel free to skip directly to your preferred approach if you’ve already made a decision CDN InstallationMạng phân phối nội dung (CDN) là mạng 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. You can install Brython libraries from a few different CDNs
You may choose this installation if you want to deploy a static website and add some dynamic behaviors to your pages with minimum overhead. You can think of this option as a substitute for jQuery, except using Python rather than JavaScript To illustrate the use of Brython with a CDN, you’ll use CDNJS. Tạo một tệp có mã HTML sau
Dưới đây là các yếu tố chính của trang HTML này
Save the file as 08, then double-click the file to open it with your default Internet browser. The browser displays a message box with 07 Click OK to close the message boxTo reduce the size of the downloaded file, especially in production, consider using the minimized version of 01 0The minimized version will reduce the download time and perceived latency from the user’s standpoint. In , you’ll learn how Brython is loaded by the browser and how the above Python code is executed GitHub InstallationThe GitHub installation is very similar to the CDN installation, but it allows you to implement Brython applications with the latest development version. You can copy the previous example and modify the URL in the 11 element to get the following 08 1After saving this file in a local directory, double-click 08 to render in the browser the same page you obtained with the CDN installRemove adsCài đặt PyPISo far, you haven’t needed to install anything in your local environment. Instead, you’ve indicated in the HTML file where the browser can find the Brython package. When the browser opens the page, it downloads the Brython JavaScript file from the appropriate environment, from either a CDN or GitHub Brython is also available for local installation on PyPI. The PyPI installation is for you if
Installing Brython from PyPI installs 15, a command-line tool that you can use to automate functions like generating a project template or packaging and bundling modules to simplify deployment of a Brython projectFor more details, you can consult the local installation documentation to see the capabilities of 16 that are available in your environment after installation. 16 is available only with this type of installation. It isn’t available if you install from a or with . You’ll see 16 in action later in the tutorialBefore installing Brython, you want to create a Python virtual environment for this project On Linux or macOS, execute the following commands 2On Windows, you can proceed as follows 3You’ve just created a dedicated Python environment for your project and updated 14 with the latest versionIn the next steps, you’ll install Brython and create a default project. The commands are the same on Linux, macOS, and Windows 4You’ve installed Brython from PyPI, created an empty folder named 20, and generated the default project skeleton by executing the 16 copied in your virtual environment during the installationIn the 20 folder, 23 created a project template and generated the following filesFileDescription 24Documentation on how to run a Python HTTP server and open 25 01Core Brython engine (compiler, runtime, and browser interface) 27Brython standard library 25Source code of the Brython demo HTML page 08Basic example that you can use as a starting page for a project 30Unicode Character Database (UCD) used by 31To test this newly created web project, you can start a local Python web server with the following commands 5When you execute 32, Python starts a web server on port 8000. The expected default page is 08. Point your internet browser to 34 to display a page with the text 35For a more complete example, you can change the URL in the browser’s address bar to 36. You should see a page similar to the Brython demo pageWith this approach, the Brython JavaScript files are loaded directly from your local environment. Notice the 37 attribute in the 11 element of 08 6The HTML above is indented to enhance readability in this tutorial. The command 40 does not indent the initial HTML template that it generatesThe HTML file introduces a few new Brython features
The operator 47 is used to add a child node to an element of the DOM. You’ll see in more details on using Brython-specific operators in Remove adsnpm InstallationIf you’re well versed in the JavaScript ecosystem, then the npm installation might appeal to you. Node. js and npm are required before performing this install Installing with npm will make the JavaScript Brython modules available in your project like any other JavaScript modules. You’ll then be able to take advantage of your favorite JavaScript tooling to test, package, and deploy the Brython interpreter and libraries. This installation is ideal if you already have existing JavaScript libraries installed with npm Note. If you don’t have Node. js and npm installed on your system, then consider reading the rest of this section for information only, as you can safely skip the installation itself. The remainder of the tutorial doesn’t depend on the npm installation method for any of the examples Assuming that you have npm installed on your system, create a default 52 file by invoking 53 in an empty directory 7To integrate Brython into your project, execute the following command 8You can ignore the warnings and note that Brython was added to your project. To confirm, open 52 and make sure you have a 55 property pointing to an object containing a 56 entry 9As for the previous examples, you can create the following 08 and open it with your browser. A web server isn’t needed for this example because the browser is able to load the JavaScript file 58 locally 0The browser renders 08 and loads 01 from the 61 URL in 08. In this example, you’ve seen a different way to install Brython that takes advantage of the JavaScript ecosystem. For the remainder of the tutorial, you’ll write code that relies on the CDN installation or the PyPI installationRecap of Brython Installation OptionsBrython có một chân trong thế giới Python và một chân khác trong JavaScript. The different installation options illustrate this cross-technology situation. Pick the installation that feels the most compelling to you based on your background The following table provides you with some guidance Type of InstallationContextCDNYou want to deploy a static website and add some dynamic behaviors to your pages with minimum overhead. You can think about this option as a substitute for jQuery, except using Python rather than JavaScript. GitHub Điều này tương tự như cài đặt CDN, nhưng bạn muốn thử nghiệm với phiên bản mới nhất của Brython. PyPIYour background is in Python. You’re familiar with 14 and how to create Python virtual environments. 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 cục bộ 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ôi trường khép kín không cần truy cập Internet. npmNền của bạn bằng 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 cục bộ 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ôi trường khép kín không cần truy cập InternetBả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 hoạt động của Brython Hiểu cách hoạt động của BrythonChuyến tham quan của bạn về các cách khác nhau để cài đặt Brython đã cung cấp cho bạn một số manh mối cấp cao về cách hoạt động của quá trình triển khai. Dưới đây là tóm tắt về một số đặc điểm mà bạn đã khám phá cho đến nay trong hướng dẫn này
Trong các phần sau, bạn sẽ có cái nhìn chi tiết hơn về cách hoạt động của Brython Remove adsThành phần cốt lõi của BrythonCốt lõi của Brython được chứa trong 01 hoặc trong 70, phiên bản thu nhỏ của động cơ Brython. Cả hai đều bao gồm các thành phần chính sau
Bạn sẽ thấy từng thành phần này hoạt động khi bạn làm việc qua các ví dụ trong hướng dẫn này Thư viện tiêu chuẩn BrythonBây giờ bạn đã có ý tưởng tổng thể về tệp Brython cốt lõi, 01, bạn sẽ tìm hiểu về tệp đồng hành của nó, 27 27 hiển thị thư viện chuẩn Python. Khi tệp này được tạo, Brython biên dịch thư viện chuẩn Python thành JavaScript và nối kết quả vào gói 27Brython được dự định càng gần càng tốt với CPython, triển khai 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à Nội bộ CPython Vì Brython đang chạy trong ngữ cảnh của trình duyệt web nên 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 đó, không thể mở tệp bằng 84. Các chức năng không liên quan đến trình duyệt web có thể không được triển khai. Ví dụ: mã bên dưới đang chạy trong môi trường Brython>>> 1đưa ra một ngoại lệ vì việc xóa một tệp cục bộ khỏi môi trường trình duyệt là không an toàn và API Mục nhập Tệp và Thư mục chỉ là một đề xuất dự thảo Brython chỉ hỗ trợ các mô-đun Python gốc. Nó không hỗ trợ các mô-đun Python được xây dựng bằng C trừ khi chúng được triển khai lại bằng JavaScript. Ví dụ: 86 được viết bằng C trong CPython và được triển khai bằng JavaScript trong Brython. Bạn có thể tham khảo danh sách các mô-đun trong bản phân phối Brython để so sánh với việc triển khai CPythonBạn cần bao gồm 27 hoặc 88 để nhập các mô-đun từ thư viện chuẩn PythonBrython trong hành độngTại thời điểm này, bạn có thể tự hỏi Brython hoạt động như thế nào trong một trình duyệt chỉ biết đến công cụ JavaScript của nó. 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 trên, bạn đã xem ví dụ sau 2Khi tải và phân tích cú pháp trang HTML, 02 thực hiện các bước sau
Trong ví dụ trên, mã Python được nhúng trong tệp HTML 3Một tùy chọn khác là tải xuống mã Python từ một tệp riêng 4Trong trường hợp này, tệp Python sẽ trông như thế này 5Tách mã Python khỏi mã HTML là một cách tiếp cận rõ ràng hơn và cho phép bạn tận dụng các lợi ích và chức năng của trình chỉnh sửa mã. Hầu hết các trình soạn thảo đều hỗ trợ JavaScript nhúng trong HTML, nhưng chúng không hỗ trợ Python nội tuyến trong HTML Remove adsNội bộ của BrythonPhần này cung cấp thông tin chi tiết hơn về 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, xin vui lòng bỏ qua phần này, vì nó không cần thiết để hiểu phần còn lại của hướng dẫn. Để minh họa quy trình này và xem qua nội bộ của Brython, hãy thực hiện các bước sau
Trong trình duyệt JavaScript REPL, nhập và thực thi đoạn mã sau 6 92 phân tích cú pháp và biên dịch mã Python được cung cấp thành JavaScript, sau đó thực thi JavaScript trong trình duyệt web. Bạn sẽ nhận được kết quả sauÁp dụng 91 cho bản in mã Brython 94 trong bảng điều khiển trình duyệt. Hàm JavaScript trả về 95, đây là giá trị trả về mặc định cho một hàm trong JavaScriptKhi 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 hàm trong mô-đun JavaScript 72. Ví dụ này chỉ được cung cấp để chứng minh cách Brython hoạt động đằng sau hậu trường. Biết về 72 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 trường hợp ngoại lệ có thể được hiển thị trong bảng điều khiển của trình duyệtĐối tượng JavaScript 72 có sẵn trong phạm vi toàn cầu của JavaScript và bạn có thể truy cập nó bằng bảng điều khiển JavaScript của trình duyệtSử dụng Brython trong Trình duyệtTại thời điểm này, bạn đã có đủ 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ẽ triển khai 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 Get the Source Code. Click here to get the source code you’ll use to learn about using Brython to run Python in the browser in this tutorial Bạn sẽ bắt đầu bằng cách học cách thao tác DOM bằng Python và HTML API DOM ở BrythonĐể thử nghiệm các thao tác DOM có sẵn trong Brython, bạn sẽ tạo 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 và đặt tên là 08 7HTML ở trên tải các tài nguyên tĩnh, xác định bố cục giao diện người dùng và bắt đầu quá trình biên dịch Python
Mã Python được liên kết, 00, như sau 8Mã Python hiển thị định nghĩa hàm gọi lại và cơ chế thao tác DOM
Để thao tác với DOM, Brython sử dụng hai toán tử
Bạn có thể thấy cả hai toán tử trong câu lệnh sau được lấy từ 18 9Bạn có thể đọc đoạn mã trên là “thêm vào phần tử bảng một phần tử đầu bảng chứa một phần tử hàng của 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 dưới dạng mã HTML sau 0Mã HTML hiển thị cấu trúc lồng nhau cho hàng tiêu đề của phần tử bảng. Đây là một định dạng dễ đọc hơn của cùng một mã 1Để quan sát kết quả trong bảng điều khiển Brython, bạn có thể nhập khối mã sau >>> 2Để thực thi mã đầy đủ, bạn cần khởi động 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 08 và 00 3Sau khi khởi động máy chủ web, hãy trỏ trình duyệt của bạn tới 34. Trang trông như thế nàyBạn sẽ mở rộng ví dụ này trong phần này bằng cách cho phép dữ liệu được lưu trữ giữa các lần tải lại trang Remove adsnhập khẩu ở brythonBạn có thể sử dụng 36 để truy cập các mô-đun Python hoặc mô-đun Brython được biên dịch thành JavaScriptCác mô-đun Python là các tệp có phần mở rộng 37 trong thư mục gốc của dự án của bạn hoặc, đối với gói Python, trong thư mục con chứa tệp 38. Để nhập các mô-đun Python vào mã Brython của bạn, bạn cần khởi động một máy chủ web. Để biết thêm về các mô-đun Python, hãy xem Mô-đun và Gói Python – Giới thiệuĐể khám phá cách nhập mô-đun Python vào mã Brython của bạn, hãy làm theo hướng dẫn được mô tả trong phần trên, tạo và kích hoạt môi trường ảo Python, cài đặt Brython và sửa đổi 08 như sau 4Tệp HTML ở trên hiển thị các mô-đun được nhập từ công cụ lõi ( 05), từ thư viện chuẩn (_______13_______41) và từ mô-đun Python cục bộ ( 42). Đây là nội dung của 43 5Mô-đun này thực hiện 44, một trong những. 44 trả về n phần tử đầu tiên của một lần lặp đã cho. Nó dựa trên 47If you try to open 08 from the file system with your browser, then you’ll get the following error in the browser console 6Nhập mô-đun Python yêu cầu khởi động 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 tới 34. Bạn sẽ thấy trang HTML sauVới một máy chủ web đang chạy, trình duyệt có thể tìm nạp mô-đun 43 khi 51 được thực thi. Kết quả của cả hai giá trị, 52 và 53, được chèn vào tệp HTML bằng hai dòng cuối cùng của tập lệnh Python được nhúng và được trình duyệt hiển thịGiảm kích thước nhập khẩuTrong 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à để biên dịch trước các mô-đun Python thành JavaScript, bạn có thể sử dụng 16 với tùy chọn 55 7Điều này sẽ tạo ra 56 và bạn có thể sửa đổi phần tử 11 của 08 như sau 8Dòng 4 thay đổi nguồn kịch bản ban đầu từ 27 thành 56Mở 08 bằng trình duyệt của bạn hoặc trỏ trình duyệt đến máy chủ cục bộ sẽ hiển thị cùng một trang HTML. Lưu ý những điểm sau
Công cụ dòng lệnh 65 cung cấp giải pháp xóa mã không cần thiết khỏi thư viện 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à dẫn đến việc tải xuống tài nguyên nhỏ hơnGhi chú. Tương tự như việc nhập mô-đun Python, việc tải mô-đun Python bằng phần tử HTML 61 yêu cầu bạn khởi động máy chủ web. Hãy xem xét phần tử HTML 61 sau đây 9Khi chức năng Brython được thực thi và tải nội dung 61 trỏ đến tệp Python, nó sẽ cố gắng thực hiện lệnh gọi Ajax chỉ có thể được thực hiện khi máy chủ web đang chạy. Nếu bạn cố mở tệp từ hệ thống tệp thì một lỗi tương tự như sau sẽ hiển thị trong bảng điều khiển JavaScript của trình duyệt 0Bảo vệ an ninh ngăn bạn tải 00 từ hệ thống tệp cục bộ. Bạn có thể giải quyết vấn đề này bằng cách chạy một máy chủ tệp cục bộ. Để biết thêm thông tin về hành vi này, hãy xem tài liệu BrythonRemove adsTương tác với JavaScriptBrython 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ể xảy ra, nhưng không phổ biến. Bạn sẽ thấy một ví dụ về JavaScript gọi một hàm Python trong phần JavaScriptCho đến thời điểm này, bạn đã trải qua một vài tình huống trong đó mã Python tương tác với mã JavaScript. Đặc biệt, bạn đã có thể hiển thị hộp thông báo bằng cách gọi 70Bạn có thể thấy hoạt động của 71 trong ba ví dụ sau đang chạy trong bảng điều khiển Brython, không phải trong trình biên dịch CPython tiêu chuẩn>>> 1Hoặc bạn có thể sử dụng 79>>> 2Hoặc bạn có thể sử dụng 73>>> 3Do lớp mới được hiển thị bởi Brython và bản chất toàn cầu của cả 06 và 79, bạn có thể gọi 71 trên 77 hoặc thậm chí trên 78Dưới đây là các mô-đun chính của Brython cho phép truy cập vào các hàm JavaScript Mô-đunBối cảnhVí dụ 05Chứa tên và mô-đun tích hợp 70 81Truy cập DOM 82 83 84Creates HTML elements 85 77Accesses 87 functions and objects 88 89 90Accesses objects defined in JavaScript 91 92Ngoài các hàm JavaScript và API có sẵn trong trình duyệt, bạn cũng có thể truy cập vào các hàm JavaScript mà bạn đã viết. Ví dụ sau minh họa cách truy cập hàm JavaScript tùy chỉnh từ Brython 4Đây là cách nó hoạt động
Bạn có thể sử dụng tính năng tương tự để truy cập các thư viện JavaScript. Bạn sẽ thấy cách thức trong phần , 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 API trình duyệt webTrình duyệt hiển thị API web mà bạn có thể truy cập từ JavaScript và Brython có quyền truy cập vào cùng 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 lần tải lại 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 96 trong ví dụ sắp tớiNhư bạn đã biết trước đó, máy tính Base64 tạo một từ điển chứa chuỗi đầu vào được ánh xạ tới giá trị được mã hóa Base64 của chuỗi này. Dữ liệu vẫn còn trong bộ nhớ sau khi trang được tải nhưng sẽ bị xóa khi bạn tải lại trang. Lưu dữ liệu vào 96 sẽ giữ nguyên từ điển giữa các lần tải lại trang. 96 là kho lưu trữ khóa-giá trịĐể truy cập 96, bạn cần nhập 01. Để theo kịp quá trình triển khai ban đầu, bạn sẽ tải và lưu dữ liệu từ điển vào 96 ở định dạng JSON. Chìa khóa để lưu và tìm nạp dữ liệu sẽ là 03. Mã đã sửa đổi bao gồm các lần nhập mới và hàm 04 5 04 được thực thi khi mã Python được tải. Nó tìm nạp dữ liệu JSON từ 96 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. If it doesn’t find 03 in 96, then it creates an empty dictionary for key 03 in 96 and returns an empty dictionaryBạn có thể xem mã Python đầy đủ kết hợp với 04 bằng cách mở rộng hộp bên dưới. Nó cho thấy cách sử dụng API web 96 làm bộ lưu trữ liên tục thay vì dựa vào bộ nhớ tạm thời trong bộ nhớ, như trong lần triển khai trước của ví dụ nàyMã nguồn hoàn chỉnh với quyền truy cập vào localStorageHiển thị/Ẩn Đoạn mã sau cho biết cách quản lý dữ liệu bằng trình duyệt 96 6Các dòng mới được đánh dấu. Từ điển toàn cầu 19 được điền bởi 04 khi tệp được tải và xử lý khi gọi 02. Khi trang được tải lại, dữ liệu được lấy từ 96Mỗi khi một giá trị Base64 mới được tính toán, nội dung của 19 đượ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 kho lưu trữ là 03Bạn có thể truy cập tất cả các chức năng API web từ 05 và các mô-đun con khác. Tài liệu cấp cao về cách 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 webTrong một số trường hợp, bạn có thể phải chọn giữa các hàm Python quen thuộc và các hàm từ API web. Ví dụ: trong mã ở trên, bạn sử dụng mã hóa Python Base64, 21, nhưng bạn có thể đã sử dụng mã hóa của JavaScript 22>>> 7Bạn có thể kiểm tra cả hai biến thể trong bảng điều khiển trực tuyến. Việc sử dụng 23 sẽ chỉ hoạt động trong ngữ cảnh Brython, trong khi đó, 21 có thể được thực thi với triển khai Python thông thường như CPython. Lưu ý rằng trong phiên bản CPython, 21 lấy a làm loại đối số, trong khi JavaScript 23 lấy một chuỗiNếu hiệu suất là mối quan tâm, thì hãy cân nhắc sử dụng phiên bản JavaScript Remove adsKhung giao diện người dùng webCá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 trong bộ công cụ dành cho nhà phát triển giao diện người dùng và Brython tích hợp hoàn hảo 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 bạn sẽ xây dựng là một biểu mẫu tính toán giá trị băm của một chuỗi. Đây là ảnh chụp màn hình của trang HTML đang chạy 28 của trang HTML xác định các liên kết và mẫu một cách khai báo 8Nếu bạn không quen thuộc với Vue, thì bạn sẽ nhanh chóng tìm hiểu một số đ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
Mã Python tương ứng mô tả Vue và logic nghiệp vụ kèm theo 9Bản chất khai báo của Vue. js được hiển thị trong tệp HTML với các mẫu và chỉ thị Vue. Nó cũng được thể hiện trong mã Python với khai báo thành phần Vue trên dòng 11 và dòng 28 đến 35. Kỹ thuật khai báo này kết nối các giá trị nút của DOM với dữ liệu Vue, cho phép hành vi của khung Điều này giúp loại bỏ một số mã soạn sẵn mà bạn phải viết trong ví dụ trước. Chẳng hạn, lưu ý rằng bạn không phải chọn các phần tử từ DOM với biểu thức như 40. Tạo ứng dụng Vue và gọi 41 xử lý ánh xạ của thành phần Vue tới các phần tử DOM tương ứng và liên kết của các hàm JavaScriptTrong Python, việc truy cập các trường đối tượng Vue yêu cầu bạn tham chiếu đến đối tượng Vue bằng 91
Nếu phần giới thiệu Vue kết hợp với Brython này đã thu hút sự quan tâm của bạn, thì bạn có thể muốn xem dự án vuepy, cung cấp đầy đủ các liên kết Python cho Vue. js và sử dụng Brython để chạy Python trong trình duyệt WebLắp rápTrong một số trường hợp, bạn có thể sử dụng WebAssugging để cải thiện hiệu suất của Brython hoặc thậm chí là JavaScript. WebAssembly, hay 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ể cải thiện hiệu suất so với JavaScript trong trình duyệt và là mục tiêu biên dịch 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 Trong ví dụ sau minh họa cách sử dụng WebAssugging, bạn sẽ triển khai một hàm trong Rust và sẽ gọi nó từ Python Đây không phải là một hướng dẫn kỹ lưỡng về Rust. Nó chỉ làm trầy xước bề mặt. Để biết thêm chi tiết về Rust, hãy xem tài liệu về Rust Bắt đầu bằng cách cài đặt Rust bằng cách sử dụng 48. Để biên dịch các tệp Wasm, bạn cũng cần thêm mục tiêu 49 0Tạo một dự án bằng cách sử dụng 50, được cài đặt trong quá trình cài đặt Rust 1Lệnh trên tạo một dự án khung trong thư mục có tên 51. Trong thư mục này, bạn sẽ tìm thấy 52, tệp cấu hình bản dựng Rust 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 đánh dấu 2Sửa đổi 53 bằng cách thay thế nội dung của nó bằng nội dung sau 3Trong thư mục gốc của dự án, nơi có 52, hãy biên dịch dự án của bạn 4Tiếp theo, tạo một thư mục 20 với 08 sau 5Dòng 6 ở trên tải 00 sau từ cùng một thư mục 6Các dòng được đánh dấu là chất keo cho phép Brython truy cập chức năng Rust 58
Trong cùng thư mục 20, sao chép 59 từ 67 7Bố cục thư mục dự án trông như thế này 8Điều này cho thấy cấu trúc thư mục của dự án Rust được tạo bằng 68. Để rõ ràng, 69 được lược bỏ một phầnBây giờ hãy bắt đầu một máy chủ trong 20 3Cuối cùng, trỏ trình duyệt Internet của bạn tới 34. Trình duyệt của bạn sẽ hiển thị một trang như sauDự án này cho thấy cách tạo một WebAssembly mà bạn có thể sử dụng từ JavaScript hoặc Brython. Do chi phí hoạt động đáng kể phát sinh từ việc 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 lựa chọn. Điều này chủ yếu hữu ích nếu bạn đã có mã Wasm để tương tác, mã bạn đã tạo hoặc thư viện Wasm hiện có Một lợi ích khác có thể có của việc sử dụng Rust để tạo WebAssugging là khả năng truy cập vào các thư viện 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à không thể sử dụng với Brython. Nếu một thư viện như vậy tồn tại trong Rust, thì bạn có thể xem xét việc tạo một tệp Wasm để sử dụng nó với Brython Áp dụng phát triển không đồng bộ ở BrythonLậ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 sẽ thực hiện A trước, sau đó là B và cuối cùng là C. Mỗi câu lệnh chặn dòng chảy của chương trình trước khi chuyển nó sang câu lệnh tiếp theo Hãy tưởng tượng một kỹ thuật mà A sẽ được thực thi trước, B sẽ được gọi nhưng không được thực thi ngay lập tức và sau đó C sẽ được thực thi. Bạn có thể nghĩ về B như một việc được thực hiện trong tương lai. Vì B không bị chặn nên nó được coi là không đồng bộ. Để biết thêm thông tin cơ bản về lập trình không đồng bộ, bạn có thể xem Bắt đầu với các tính năng không đồng bộ trong Python JavaScript đang và dựa vào quá trình xử lý không đồng bộ, đặc biệt khi có liên quan đến truyền thông 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 chức năng 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
Khi JavaScript đã phát triển, các cuộc gọi lại đã dần dần được thay thế bằng các lời hứa hoặc chức năng không đồng bộ. Trong hướng dẫn này, bạn sẽ học cách sử dụng các lời hứa từ Brython và cách sử dụng các mô-đun 72 và 73, những mô-đun tận dụng bản chất không đồng bộ của JavaScriptKhông thể sử dụng mô-đun 76 từ thư viện CPython trong ngữ cảnh trình duyệt và được thay thế trong Brython bằng 73Lời hứa JavaScript ở BrythonTrong JavaScript, một lời hứa là một đối tượng có thể tạo ra kết quả trong tương lai. Giá trị được tạo ra sau khi hoàn thành sẽ là giá trị hoặc lý do xảy ra lỗi Đây là một ví dụ minh họa cách sử dụng đối tượng JavaScript 78 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>>> 0Trong bảng điều khiển web, bạn có thể nhận phản hồi ngay lập tức về việc thực thi mã Python
Trong ví dụ trên, thời gian chờ mô phỏng giả tạo một chức năng chạy dài. Việc sử dụng thực sự một lời hứa có thể liên quan đến một cuộc gọi mạng. Sau 85 giây, lời hứa hoàn thành thành công với giá trị 86Nếu chức năng thực thi, 82, phát hiện lỗi, thì nó có thể gọi 88 với lý do lỗi làm đố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, 89, trên đối tượng 78, như sau>>> 1Bạn có thể thấy hành vi hoàn thành thành công lời hứa trong hình ảnh sau Khi bạn chạy mã trong bảng điều khiển, bạn có thể thấy rằng đối tượng 78 được tạo trước và sau khi hết thời gian chờ, hộp thông báo sẽ hiển thịAjax ở BrythonCác hàm không đồng bộ đặc biệt hữu ích khi các hàm đủ điều kiện là ràng buộc I/O. Điều này trái ngược với các chức năng gắn với CPU. Chức năng liên kết I/O là chức năng dành phần lớn thời gian chờ đầu vào hoặc đầu ra kết thúc, trong khi chức năng liên kết CPU là tính toán. Gọi một API qua mạng hoặc truy vấn cơ sở dữ liệu là một thao tác thực thi theo giới hạn I/O, trong khi việc tính toán một chuỗi các số nguyên tố là do CPU giới hạn Brython's 72 hiển thị các hàm HTTP như 93 và 94, theo mặc định, là không đồng bộ. Các chức năng này nhận tham số 9 có thể được đặt thành 4 để hiển thị đồng bộ chức năng tương tựĐể gọi HTTP 97 không đồng bộ, hãy gọi 7 như sau 2Để tìm nạp API ở chế độ chặn, hãy đặt tham số 9 thành 4 3Đoạn mã sau cho thấy sự khác biệt giữa việc thực hiện lệnh gọi Ajax chặn và lệnh gọi Ajax không chặn 4Đoạn mã trên minh họa cả hai hành vi, đồng bộ và không đồng bộ
Khi bạn chạy ví dụ đầy đủ và nhấp vào Nhận không đồng bộ và Nhận chặn, 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, 01 được thực thi đầy đủ và kết quả của lệnh gọi API diễn ra không đồng bộ. Trong tình huống thứ hai, kết quả của lệnh gọi API được hiển thị trước khi quay lại từ 08IO không đồng bộ ở BrythonVới 76, Python 3. 4 bắt đầu bộc lộ các khả năng không đồng bộ mới. Trong Trăn 3. 5, hỗ trợ không đồng bộ đã được làm phong phú thêm với. Do không tương thích với vòng lặp sự kiện của trình duyệt, Brython triển khai 73 để thay thế cho tiêu chuẩn 76Mô-đun Brython 73 và mô-đun Python 76 đều hỗ trợ sử dụng các từ khóa 15 và 16 và chia sẻ các chức năng chung, chẳng hạn như 23 và 24. Cả hai mô-đun đều triển khai các chức năng riêng biệt khác liên quan đến ngữ cảnh thực thi tương ứng của chúng, môi trường ngữ cảnh CPython cho 76 và môi trường trình duyệt cho 73quân đoànBạn có thể sử dụng 23 và 24 để tạo. Để minh họa hành vi của các coroutine được triển khai trong Brython, bạn sẽ triển khai một biến thể của ví dụ coroutine có sẵn trong 5Ngoại trừ dòng 36 đầu tiên, mã này giống với mã bạn tìm thấy trong tài liệu CPython. Nó thể hiện việc sử dụng các từ khóa 15 và 16 và cho thấy 23 và 24 trong hành động
Lưu ý rằng trong ngữ cảnh của trình duyệt, 45 tận dụng vòng lặp sự kiện JavaScript bên trong. Hàm này khác với hàm liên quan 46 trong CPython, hàm này quản lý hoàn toàn vòng lặp sự kiệnĐể thực thi mã này, hãy dán mã 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 kết quả tương tự như ảnh chụp màn hình sau Đầu tiên, tập lệnh được thực thi, sau đó hiển thị 47 và cuối cùng hiển thị 48Để biết thêm chi tiết về coroutines trong Python, bạn có thể xem Async IO trong Python. 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 bao gồm mẫu này. Trong JavaScript, vòng lặp sự kiện thực 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 hàm được hiển thị bởi 76Ví dụ trên là một bài tập có chủ ý để giữ mã chính xác như trong ví dụ về tài liệu Python. Trong khi viết mã trong trình duyệt bằng Brython, bạn nên sử dụng rõ ràng 73, như bạn sẽ thấy trong phần sauCác chức năng dành riêng cho webĐể thực hiện lệnh gọi không đồng bộ tới API, như trong phần trước, bạn có thể viết một hàm như sau 6Lưu ý việc sử dụng các từ khóa 15 và 16. Chức năng cần được xác định là 15 để sử dụng cuộc gọi với 16. Trong quá trình thực hiện chức năng này, khi đạt đến cuộc gọi tới 55, chức năng này sẽ trao quyền điều khiển trở lại vòng lặp sự kiện chính trong khi chờ cuộc gọi mạng, 56, hoàn tất. Phần còn lại của việc thực hiện chương trình không bị chặnĐây là một ví dụ về cách gọi 57 7Hàm 45 thực thi quy trình đăng quang 57. Nó không chặnMột ví dụ mã hoàn chỉnh hơn cho thấy cách sử dụng các từ khóa 15 và 16 và cách mà ____17_______45 và 56 bổ sung cho nhau 8Như trong các phiên bản Python 3 gần đây nhất, bạn có thể sử dụng các từ khóa 15 và 16
Để chạy toàn bộ ví dụ, bạn cần khởi động máy chủ web. Bạn có thể khởi động máy chủ web phát triển Python với 74. Nó khởi động một máy chủ web cục bộ trên cổng 8000 và trang mặc định 08Ảnh chụp màn hình hiển thị trình tự các bước được thực hiện sau khi nhấp vào Async Get. Sự kết hợp giữa việc sử dụng mô-đun 36 và các từ khóa 15 và 16 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 thúc đẩyPhân phối và đóng gói một dự án BrythonPhương pháp bạn sử dụng để cài đặt Brython có thể ảnh hưởng đến cách thức và vị trí bạn có thể triển khai dự án Brython của mình. Cụ thể, để triển khai lên PyPI, tùy chọn tốt nhất trước tiên là cài đặt Brython từ PyPI, sau đó tạo dự án của bạn với 16. Tuy nhiên, việc triển khai web thông thường tới máy chủ riêng hoặc tới nhà cung cấp đám mây có thể tận dụng bất kỳ phương pháp cài đặt nào bạn chọnBạn có một số tùy chọn triển khai
Bạn sẽ khám phá từng điều 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 tệp phụ thuộc tĩnh, CSS, JavaScript, Python và 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 tệp JavaScript của bạn. Tất cả các tệp có thể được triển khai nguyên trạng trên nhà cung cấp mà bạn chọn. Bạn có thể tham khảo Hướng dẫn phát triển web và Tự động triển khai Django với Fabric và Ansible để biết chi tiết về cách triển khai các ứng dụng Brython của mình Nếu bạn quyết định sử dụng 65 để biên dịch trước mã Python của mình, thì các tệp bạn triển khai sẽ không có bất kỳ mã nguồn Python nào, chỉ có 01 và 56. Bạn cũng sẽ không bao gồm 27 vì các mô-đun bắt buộc sẽ được bao gồm trong 56 rồiTriển khai cho PyPIKhi bạn cài đặt Brython từ PyPI, bạn có thể sử dụng 16 để tạo gói có thể triển khai cho 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 từ PyPISau khi làm theo hướng dẫn trong phần trên, hãy thực hiện lệnh sau trong dự án 20 mới của bạn 9Bạn sẽ được nhắc trả lời một số câu hỏi nhằm tạo 87, bạn có thể sửa đổi câu hỏi này sau. Sau khi hoàn thành lệnh, bạn sẽ có một thư mục có tên là 88 chứa các tệp bạn cần để tạo gói có thể cài đặtBạn có thể kiểm tra việc cài đặt gói mới này cục bộ như sau 0Sau đó, 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 20 bằng cách thực hiện lệnh sau 1Lưu ý rằng lệnh 20 hoạt động chính xác như Brython thực hiện sau lần cài đặt đầu tiên. Bạn vừa tạo gói Brython có thể cài đặt tùy chỉnh có thể được triển khai cho PyPI. Để biết mô tả kỹ lưỡng về cách triển khai gói của bạn lên PyPI, hãy xem Cách xuất bản Gói Python mã nguồn mở lên PyPISau khi triển khai lên PyPI, bạn có thể cài đặt gói Brython của mình với 14 trong môi trường ảo Python. Bạn sẽ có thể tạo ứng dụng tùy chỉnh mới của mình bằng lệnh mới mà bạn đã tạo 2Tóm lại, đây là các bước để triển khai lên PyPI
Các phương thức cài đặt khác—CDN, GitHub và npm—không bao gồm 16 và do đó không phù hợp để chuẩn bị gói PyPITriển khai tới CDNGiống như 01 và 96 có sẵn trên máy chủ CDN, bạn cũng có thể triển khai nội dung tĩnh, hình ảnh, kiểu và tệp JavaScript của mình, bao gồm tệp Python hoặc 56, cho CDN. Ví dụ về CDN bao gồm
Nếu ứng dụng của bạn là mã nguồn mở thì bạn có thể nhận hỗ trợ CDN miễn phí. Ví dụ bao gồm CDNJS và jsDelivr Tạo tiện ích mở rộng của Google ChromeTiện ích mở rộng của Chrome là các thành phần được xây dựng bằng công nghệ web và được tích hợp vào Chrome để tùy chỉnh môi trường duyệt web của bạn. Typically, the icons of these extensions are visible at the top of the Chrome window, to the right of the address bar Tiện ích mở rộng công khai có sẵn trên cửa hàng Chrome trực tuyến. Để tìm hiểu, bạn sẽ cài đặt các tiện ích mở rộng của Google Chrome từ các tệp cục bộ Trước khi triển khai tiện ích mở rộng của Google Chrome trong Brython, trước tiên bạn sẽ triển khai phiên bản JavaScript rồi dịch phiên bản đó sang Brython Xin chào thế giới mở rộng trong JSKhi mới bắt đầu, bạn sẽ triển khai tiện ích mở rộng sẽ thực hiện các tác vụ sau
Ả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 98 để định cấu hình tiện ích mở rộng 3Trường quan trọng cho ví dụ này là tệp bật lên mặc định, 99, 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 về định dạng tệp ManifestTrong cùng một thư mục, tạo tệp 99 được sử dụng để xác định giao diện người dùng của tiện ích mở rộng 4Tệp HTML bao gồm một liên kết đến logic nghiệp vụ JavaScript của tiện ích mở rộng và mô tả giao diện người dùng của nó
Bạn cũng cần tạo 01 5Logic chính của mã JavaScript bao gồm việc khai báo một trình xử lý 22 được liên kết với trường 06 của bộ chứa HTML
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ộ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, bạn cần thực hiện các bước sau
Nếu không có lỗi 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ó chữ J ở phía bên tay 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, hãy 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 có 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 báo lỗi màu đỏ ở bên phải nút Xóa của thẻ mở rộng 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 rễ. Sau khi sửa, hãy tải lại tiện ích mở rộng bằng cách nhấp vào mũi tên hình tròn ở dưới cùng bên phải của thẻ tiện ích mở rộng, sau đó lặp lại quy trình cho đến khi tiện ích hoạt động như bạn mong đợi Để kiểm tra tiện ích mở rộng mới cài đặt của bạn, bạn có thể nhấp vào biểu tượng J hiển thị ở phía bên tay phải của thanh công cụ trình duyệt. Nếu biểu tượng không hiển thị, hãy nhấp vào 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 đinh ghim được căn chỉnh với tiện ích mở rộng JS Hello World mà bạn vừa cài đặt Xin chào thế giới mở rộng trong PythonNế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à để làm quen với quá trình tạo và cài đặt tiện ích mở rộng của Chrome. Các bước sẽ tương tự với Brython, với một vài điểm khác biệt mà bạn sẽ tìm hiểu 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 6Lưu ý rằng bạn cũng phải bao gồm một tài sản mới, 11. Điều này là cần thiết để có thể thư giãn trong hệ thống tiện ích mở rộng chrome. Nhớ lấyĐây không phải là thứ bạn đã giới thiệu và bạn có thể kiểm soát ở Brython. Bạn sẽ cần kích hoạt bằng cách sử dụng 91 nếu bạn muốn sử dụng Brython làm ngôn ngữ cho tiện ích mở rộng trình duyệt của mình. Nếu bạn không thêm 15 vào 11 thì bạn sẽ thấy lỗi sau 7The HTML file will also have a few updates, as follows 8Mã HTML rất giống với mã bạn đã sử dụng để tạo tiện ích mở rộng của Chrome bằng JavaScript. Một vài chi tiết đáng chú ý
Một ràng buộc bảo mật khác ngăn cản bạn gọi 02 trong trường hợp 24 của thẻ 28. Giải pháp thay thế là thêm một trình nghe vào tài liệu và chỉ báo cho trình duyệt thực thi 02 sau khi nội dung của tài liệu được tải 9Cuối cùng, bạn có thể thấy logic chính của ứng dụng này trong đoạn mã Python sau 0Cùng với đó, bạn đã sẵn sàng tiến hành cài đặt và thử nghiệm như bạn đã làm đối với tiện ích mở rộng JavaScript chrome Kiểm tra và gỡ lỗi BrythonHiện tại không có thư viện thuận tiện để kiểm tra đơn vị mã 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. Có thể tận dụng khung kiểm tra đơ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, Selenium 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ị PythonCác khung kiểm tra đơn vị Python, chẳng hạn như 27 và 28 tích hợp sẵn, không hoạt động 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 ngữ cảnh của CPython. Không thể kiểm tra bất kỳ mô-đun nào dành riêng cho Brython như 05 bằng các công cụ như vậy tại dòng lệnh. Để biết thêm thông tin về kiểm tra đơn vị Python, hãy xem Bắt đầu với kiểm tra bằng PythonselenSelenium là một framework để tự động hóa các trình duyệt. Nó không liên quan đến 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ể xem Tự động hóa web hiện đại với Python và Selenium để biết thêm thông tin về khung này Kiểm tra đơn vị JavaScriptCó 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 chúng không nhất thiết phải phù hợp để kiểm tra đơn vị mã Python chạy trong trình duyệt. Một tùy chọn yêu cầu hiển thị toàn cầu các hàm Brython cho JavaScript, điều này đi ngược lại các phương pháp hay nhất Để minh họa tùy chọn hiển thị hàm Brython cho JavaScript, bạn sẽ sử dụng QUnit, bộ kiểm tra đơn vị JavaScript có thể chạy độc lập trong tệp HTML 1Trong một tệp HTML, bạn đã viết mã Python, mã JavaScript và kiểm tra JavaScript để xác thực các chức năng từ cả hai ngôn ngữ được thực thi trong trình duyệt
Bạn không cần khởi động máy chủ web để thực hiện bài kiểm tra đơn vị. Mở 08 trong trình duyệt và bạn sẽ thấy như sauTrang hiển thị hai bài kiểm tra thành công, 38 và 39, và một bài kiểm tra không đạt, 40Việc hiển thị hàm Python với JavaScript cho thấy cách bạn có thể sử dụng khung kiểm tra đơn vị JavaScript để thực thi Python trong trình duyệt. Mặc dù có thể thử nghiệm, nhưng nói chung, nó không được khuyến nghị vì nó có thể xung đột với các tên JavaScript hiện có Gỡ lỗi trong BrythonKhi viết bài 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 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 làm bạn nản lòng khi sử dụng Brython. Dưới đây là một số mẹo giúp gỡ lỗi và khắc phục sự cố mã Brython của bạn
Một trong những điểm hay của Python là REPL (vòng lặp đọc-eval-in). 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 BrythonBrython không phải là 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
Mỗi triển khai tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng thay thế JavaScript bằng cách cung cấp quyền truy cập vào cùng một API web và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp và thành ngữ Python. Nó được đóng gói dưới dạng 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 Ghi chú. Tại PyCon US 2022, một giải pháp thay thế mới đã được công bố. PyScript. Để có hướng dẫn về khung mới này, bạn có thể xem Cái nhìn đầu tiên về PyScript. Python trong Trình duyệt web Làm thế nào để các khuôn khổ so sánh? điêu khắcSkulpt biên dịch mã Python thành JavaScript trong trình duyệt. Quá trình biên dịch diễn ra sau khi trang được tải, trong khi ở Brython, quá trình biên dịch diễn ra trong khi tải trang Mặc dù không có chức năng tích hợp để thao tác 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 việc sử dụng giáo dục và các ứng dụng Python toàn diện, như Anvil đã minh họa Skulpt là một dự án được duy trì hướng tới Python 3. Brython gần như ngang bằng với Python 3. 9 cho các mô-đun tương thích với việc thực thi trong trình duyệt chuyển mãTranscrypt bao gồm một công cụ dòng lệnh để biên dịch mã Python thành mã JavaScript. Quá trình 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ó dung lượng nhỏ, khoảng 100KB. Nó nhanh và hỗ trợ thao tác DOM Sự khác biệt giữa Skulpt và Brython là Transcrypt được biên dịch sang JavaScript bằng 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 không cho Transcrypt được sử dụng làm nền tảng cho giáo dục như các nền tảng khác pyoduaPyodide là một phầ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 biên dịch JavaScript. Mặc dù Pyodide, như PyPy. js, yêu cầu bạn tải xuống một lượng dữ liệu đáng kể, 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ôi trường Jupyter Notebook chạy hoàn toàn trong trình duyệt chứ không phải được phục vụ bởi máy chủ phụ trợ. Bạn có thể thử nghiệm với Pyodide bằng ví dụ trực tiếp PyPy. jsPyPy. js sử dụng trình thông dịch PyPy Python được biên dịch sang JavaScript bằng emscripten, làm cho nó tương thích để chạy trong trình duyệt Ngoài trạng thái 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, không phù hợp với các ứng dụng web thông thường. Bạn vẫn có thể sử dụng PyPy. js làm nền tảng để học Python trong trình duyệt bằng cách mở PyPy. trang chủ js PyPy. js được biên dịch thành JavaScript với emscripten. Pyodide tiến thêm một bước, tận dụng đặc biệt là emscripten và Wasm để biên dịch các phần mở rộng Python C như NumPy thành WebAssugging Khi viết bài này, PyPy. js dường như không được duy trì. For something in the same vein regarding the compilation process, consider Pyodide Phần kết luậnTrong hướng dẫn này, bạn đã tìm hiểu sâu về 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ể khiến bạn quan tâm đến việc dùng thử Python để phát triển giao diện người dùng Trong hướng dẫn này, bạn đã học cách
Ngoài việc truy cập các tính năng thường dành riêng cho JavaScript, một trong những ứng dụng tốt nhất của Brython là công cụ học tập và giảng dạy. Bạn có thể truy cập trình chỉnh sửa Python và bảng điều khiển chạy trong trình duyệt của mình để bắt đầu khám phá nhiều cách sử dụng Brython ngay hôm nay Để xem lại các ví dụ bạn đã thấy trong hướng dẫn này, bạn có thể tải xuống mã nguồn bằng cách nhấp vào liên kết bên dưới Get the Source Code. Click here to get the source code you’ll use to learn about using Brython to run Python in the browser in this tutorial Đánh dấu là đã hoàn thành 🐍 Thủ thuật Python 💌 Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python Gửi cho tôi thủ thuật Python » Giới thiệu về André Burgaud Andre là một kỹ sư phần mềm dày dặn đam mê công nghệ và ngôn ngữ lập trình, đặc biệt là Python » More about AndreEach tutorial at Real Python is created by a team of developers so that it meets our high quality standards. The team members who worked on this tutorial are Aldren David Jon Joanna Gia-cốp Master Real-World Python Skills With Unlimited Access to Real Python Tham gia với chúng tôi và có quyền truy cập vào hàng nghìn hướng dẫn, khóa học video thực hành và cộng đồng các Pythonistas chuyên gia Level Up Your Python Skills » Master Real-World Python Skills Join us and get access to thousands of tutorials, hands-on video courses, and a community of expert Pythonistas Level Up Your Python Skills » What Do You Think? Đánh giá bài viết này Tweet Share Share EmailWhat’s your #1 takeaway or favorite thing you learned? How are you going to put your newfound skills to use? Leave a comment below and let us know Commenting Tips. The most useful comments are those written with the goal of learning from or helping out other students. and get answers to common questions in our support portal |