Hallo, ich heiße Kamibayashi, ryo_grid von Ory Lab (http://orylab.com).

Nun, alle zusammen! Schreibst du JavaScript? Ich schreibe es auch. Ich habe jedoch schon lange Code in C, Java, Ruby, Python usw. geschrieben, daher bin ich mit den JavaScript-Sprachspezifikationen nicht vertraut.

Als ich nach einer Option suchte, um eine andere Sprache als JS im Web-Frontend zu verwenden, fand ich ein im Browser JS implementiertes Python-Verarbeitungssystem namens Brython (= funktioniert im Browser), also habe ich es versucht. Es war.

Brython - A Python 3 implementation for client-side web programming

Versuchen Sie es trotzdem

Ich schrieb, während ich durch das Meer des Netzes wanderte. Das Thema ist die BMI-Berechnung, eine häufige Aufgabe für Anfänger in der Programmierung.

Es scheint, dass HTML so geschrieben werden kann.

`index.html`


<!DOCTYPE html>
<html>
    <head>
        <title>Berechnen Sie den BMI mit Brython</title>
        <meta charset="utf-8">
        <script src="static/brython.js"></script>
        <script src="static/brython_stdlib.js"></script>	
    </head>
    <body onload="brython()">
　　　　 <script type="text/python" src="static/bmi.py"></script>
        <h1>Berechnen Sie den BMI mit Brython</h1>

        <p>Höhe(Meter)
        <input type="text" id="height" />
        <p>Körpergewicht(Kilogramm)
        <input type="text" id="weight" />
        <br><button id="execute">Es ist eine Berechnung!</button>

        <div id="result"></div>
    </body>
</html>

Laden Sie brython.js, das dem Verarbeitungssystem entspricht, und brython_stdlib.js, das wahrscheinlich der Standard-Python-Bibliothek entspricht, in den Kopfabschnitt. Rufen wir dann die brython () -Methode beim Laden des Body-Abschnitts auf. Fügen Sie danach ein Eingabeformular und eine Schaltfläche ein und setzen Sie ein div-Tag mit der ID "result", um das Ergebnis nach DOM-Operation anzuzeigen.

Schreiben Sie den Python-Code in eine separate Datei und laden Sie ihn mit dem Skript-Tag type = "text / python". Obwohl es sich hier um eine separate Datei handelt, können Sie anscheinend auch Python-Code schreiben, z. B. JS solide in HTML schreiben.

Die oben geladene Python-Datei sieht folgendermaßen aus: Es ist Python wie es grammatikalisch ist.

`bmi.py`


#!/usr/bin/env python
# -*- coding: utf-8 -*-

from browser import document

def calc_bmi():
    weight = float(document["weight"].value)
    height = float(document["height"].value)
    
    bmi = str(weight/(height*height))
    rslt = document["result"]
    rslt.text = bmi
    
execute_btn = document["execute"]
execute_btn.bind("click", calc_bmi)

Der Prozess, den wir ausführen, besteht darin, das DOM der Schaltfläche mit der ID "execute" in der Variablen execute_btn zu speichern und die Funktion calc_bmi als einen Prozess zu registrieren, der beim Ereignis "click" über sie ausgelöst wird. Es scheint, dass das DOM mit dem Dokumentmodul des Browserpakets abgerufen werden kann.

Die Funktion calc_bmi ruft den Eingabewert aus dem Formular ab, berechnet den BMI und setzt das Ergebnis auf das div-Tag id = "result".

Und wenn Sie dies bewegen,

Ich fühle mich so. Es funktionierte!

Ich habe einen Satz dieses Codes unter https://github.com/ryogrid/LearnBrython abgelegt. Ich habe auch app.py hinzugefügt, das die Webserverfunktion bereitstellt. Wenn Sie also eine Python-Umgebung haben, können Sie diese sofort wie folgt ausführen.

git clone https://github.com/ryogrid/LearnBrython.git cd LearnBrython pip install flask python app.py => Let's access http://localhost:5000/

Es ist nicht wie Python, oder?

Der Code, den ich oben geschrieben habe, ist nicht sehr Python-ähnlich, aber offiziell scheint die gesamte Python-Syntax unterstützt zu werden.

https://brython.info/static_doc/en/syntax.html

Es scheint, dass auch eine gute Anzahl von Standardbibliotheken unterstützt wird. Es ist wunderbar.

https://brython.info/static_doc/en/stdlib.html

Ist es nicht eine Aufführung?

Ich hoffe, Sie werfen einen Blick auf die offizielle Galerie,

Gallery

Es scheint, dass die schwere Verarbeitung richtig funktioniert. Ich denke, es ist in Ordnung, wenn es sich nicht um eine Anwendung handelt, die sich wirklich um die Leistung kümmert.

Außerdem wird es am Anfang der FAQ erwähnt. Wenn Sie also mehr Details erfahren möchten, sollten Sie sich darauf beziehen.

https://brython.info/static_doc/en/faq.html

Was ist die Implementierung

Wenn man sich die Implementierung von Brython auf Github ansieht, scheint es, dass es nach der JIT-Kompilierung (Übersetzung) nach JS läuft, nicht nach einem Interpreter. Krafttechnik!

https://github.com/brython-dev/brython/blob/master/www/src/py2js.js

Wenn Sie kompilieren!

Kürzlich sind asm.js und WebAssembly erschienen, die als Assembler für Browser bezeichnet werden können. Durch das Generieren von Ausführungscode mit diesen wird anscheinend eine Leistung erzielt, die derjenigen nahe kommt, die beim Kompilieren in nativen Code erzielt wird.

Detaillierte Erläuterung der einfachen Sprache asm.js und WebAssembly

Brython kann schließlich solche Dinge unterstützen. Behalte es in Zukunft im Auge.

abschließend

Ich habe Python (Brython) als Web-Front-End-Implementierungssprache anstelle von JavaScript ausprobiert. Ich grabe mich auch etwas tiefer in Brython ein.

Es ist schwer zu beurteilen, ob es in kommerziellen Produkten verwendet werden kann, aber warum nicht als Hobbyprofi ausprobieren? Let's enjoy!

PS: Ich habe es diesmal nicht erwähnt, aber es scheint eine andere Python-Implementierung im Browser JS als Brython zu geben. Wenn Sie also interessiert sind, lesen Sie bitte Folgendes.

http://stromberg.dnsalias.org/~strombrg/pybrowser/python-browser.html

Lassen Sie uns JavaScript wegwerfen und ein Web-Frontend in Python schreiben!