Webentwicklung ist so interessant! Aber JavaScript ist... entmutigend.
Alles andere in der Webentwicklung ist für Sie ein Kinderspiel, aber wenn Sie tiefer in JavaScript eintauchen, werden Sie nicht umhin können, das tragische Gefühl zu verspüren: „Alle sind wach, aber Sie sind allein.“ - Genau wie bei anderen Jeder kennt einige wichtige Grundwissensinhalte, die Sie nicht kennen, und diese Inhalte können Ihnen helfen, das gesamte Wissen zu verstehen.
Die Wahrheit ist, dass Ihnen tatsächlich einige wichtige Teile zur Lösung des Problems fehlen.
Außerdem ist die Frontend-Entwicklung tatsächlich verrückt geworden.
Stellen Sie sich einen Stuhl hoch und setzen Sie sich. Es ist Zeit, eine JavaScript-Anwendung zu schreiben.
Der erste Schritt besteht darin, Ihre lokale Entwicklungsumgebung vorzubereiten und auszuführen. Also Gulp oder Grunt, warte, nein... NPM-Skripte auch!
WebPACK oder Browserify verwenden? Require.js? Upgrade auf ES6? Oder Babel zu sehr zu Ihrer Vorverarbeitung hinzufügen?
BDD oder regelmäßige Unit-Tests? Welches Assertion-Framework sollte verwendet werden? Natürlich wäre es schön, die Tests über die Befehlszeile auszuführen, also würde PhantomJS vielleicht auch funktionieren?
Angular oder React? Glut? Rückgrat?
Sie haben einige React-Dokumentationen gelesen: „Redux ist ein vorhersehbarer Zustandscontainer für JavaScript-Apps.“ So eins brauchst du auf jeden Fall.
Lassen Sie mich Ihnen helfen zu verstehen, warum ich sage, dass das alles so verrückt ist. Beginnen wir mit einem Beispiel und gehen dann zu hübschen Bildern über.
Dies ist eine „Hallo Welt!“-Anwendung für React.
// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Noch nicht ganz fertig.
$ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
Hier fehlen tatsächlich ein paar Schritte, wie die Installation von browserify und was Sie eigentlich tun müssen, um es im Web zum Laufen zu bringen, wenn Sie das getan haben, denn das erzeugt eigentlich keine Welchen Inhalt hat die Seite? ¯ _（ツ）_ /¯
Nachdem Sie dies abgeschlossen haben, benötigen Sie schließlich eine Datei namens bundle.js, die die neue React Hello World-Anwendung enthält – Das Programm hat 19.374 Zeilen von Code. Und Sie müssen nur Browserify, Babelify und React-Dom installieren und Tausende unbekannter Codezeilen berücksichtigen.
Marc ist fast bereit, seine „Hello World“-React-App zu implementieren pic.twitter.com/ptdg4yteF1
—— Thomas Fuchs (@thomasfuchs) 12. März 2016
Schreiben wir eine Hello World-App mit einfachem JavaScript-Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Hello World</title>
</head>
<body>
<p id="container"></p>
<script>
document.body.onload = function(){
var container = document.getElementById("container");
container.innerHTML = '<h1>"Hello, world!"</h1>';
}
</script>
</body>
</html>Das ist es. 18 Zeilen Code. Sie können die Datei index.html kopieren/einfügen, darauf doppelklicken und sie in Ihren Browser laden. Beenden.
Wenn Sie an diesem Punkt denken: „Warten Sie, React kann mehr als diese kleine Sache, die Sie gerade geschrieben haben, und auf diese Weise können Sie keine JavaScript-App schreiben!“ Zeit) stimmt, aber man muss noch einen kleinen Schritt machen, um zu verstehen, warum alles verrückt ist.
Hier sind die Bilder, die ich versprochen habe.
Die überwiegende Mehrheit der JavaScript-Webanwendungen, an denen Sie arbeiten werden, wird irgendwo in der Mitte der Glockenkurve liegen. Und wenn Sie mit einem vollständigen React-Stack beginnen, überarbeiten Sie Ihre Anwendung von Anfang an massiv.
Deswegen spielt alles verrückt. Die meisten dieser Tools halten Sie für notwendig, um Probleme zu lösen, aber Sie sind noch nie auf ein solches Problem gestoßen und werden auch in Zukunft nie auf ein solches Problem stoßen.
Gleiches Bild:
Da standardmäßig jeder seine Apps überdesignt und dies erkennt, ist der Stand der Javascript-Entwicklung zu ausführlich geworden.
Wie sollte man eine JavaScript-Anwendung starten? Sollte ich ein Tool wie React oder Angular verwenden? Sollte ich einen Paketmanager verwenden? Wenn nicht, was sollten Sie tun? Ist ein Test notwendig? Soll das Markup in Javascript generiert werden? All dies sind Fragen, die Sie sich stellen sollten, bevor Sie einen riesigen Technologie-Stack auf den Markt bringen, der standardmäßig mitgeliefert wird.
Wenn Sie eine JavaScript-Anwendung starten, besteht der Schlüssel darin, einen Punkt auf der Glockenkurve auszuwählen, der knapp über dem Komplexitätsgrad liegt, den die App Ihrer Meinung nach irgendwann erreichen wird.
Ich werde nicht lügen, es braucht Erfahrung, um das zu bestätigen. Aber es gibt hier einen ziemlich großen Sweet Spot, mit dem Sie die meisten JavaScript-Apps starten können: jQuery plus clientseitige Vorlagen und supereinfache Build-Tools zum Verketten und Minimieren von Produktdateien (vorausgesetzt, Ihre Backend-Architektur verfügt nicht bereits darüber), wenn Sie fertig sind ).
Wenn Sie wissen, wie man eine Javascript-App richtig erstellt, werden Sie beginnen zu verstehen, wie, wann und warum Sie ein Framework oder npm/requir/webPack oder ES6 verwenden, wann Sie Tests schreiben und wann Sie sich die Mühe machen sollten, Ihre zu erstellen Tests lokaler Ausführung vs. Ausführung im Browser usw., all diese Fragen tauchen auf.
Möchten Sie diese Lücken mit Ihrem JavaScript-Entwicklungswissen schließen? Möchten Sie vermeiden, dass Sie sich überfordert fühlen und dabei Ihre JavaScript-Anwendungen massiv überarbeiten? Darauf werde ich mich später konzentrieren, also bleiben Sie dran!
Das obige ist der detaillierte Inhalt vonWarum die JavaScript-Entwicklung so wahnsinnig detaillierter Code ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
