Wie war es früher, JavaScript zu lernen?-js-Tutorial-php.cn

Hey, ich habe kürzlich ein Webprojekt erhalten, aber um ehrlich zu sein, hatte ich in den letzten zwei Jahren nicht viel Kontakt mit der Webprogrammierung. Ich habe gehört, dass sich die Webtechnologie geändert hat. Ich habe gehört, dass Sie hier der Webentwickler sind, der sich am besten mit neuen Technologien auskennt?

Um genau zu sein, bin ich ein „Front-End-Ingenieur“. Aber Sie haben die richtige Person gefunden. Ich bin so vertraut mit der diesjährigen Technologie, Front-End-Visualisierung, Musikplayern und Drohnen, die Fußball spielen können, fragen Sie einfach. Ich habe gerade eine JS-Konferenz und eine React-Konferenz besucht und es gibt keine neue Technologie, die ich nicht kenne.

Fantastisch. In diesem Fall möchte ich eine Webseite entwickeln, auf der die neuesten Updates von Benutzern angezeigt werden. Ich denke, ich sollte die Daten über die Backend-Schnittstelle abrufen und dann eine Tabelle verwenden, um die Daten anzuzeigen, und der Benutzer kann die Daten sortieren. Wenn sich die Daten auf dem Server ändern, muss ich auch diese Tabelle aktualisieren. Meine Idee ist, dafür jQuery zu verwenden.

Verwenden Sie kein jQuery! Heutzutage verwendet niemand mehr jQuery. Wir schreiben das Jahr 2016 und Sie sollten unbedingt React verwenden.

Oh, okay, was ist React?

React ist eine sehr leistungsstarke Bibliothek, geschrieben von talentierten Leuten bei Facebook. Dadurch werden Seiten besser kontrollierbar, äußerst leistungsfähig und benutzerfreundlicher.

Klingt wirklich gut. Kann ich React verwenden, um Daten vom Server anzuzeigen?

Natürlich müssen Sie nur zwei Abhängigkeiten hinzufügen, eine ist React und die andere ist React DOM

Ähm, warte, warum gibt es zwei Bibliotheken?

React ist die Bibliothek, von der ich spreche, und React DOM wird zum Betreiben von DOM verwendet. Da diese DOMs in JSX geschrieben sind, benötigen sie eine spezielle Bibliothek, um sie zu bearbeiten.

JSX? Was ist JSX?

JSX ist eine Erweiterung von JS. Es sieht ähnlich aus wie XML und kann zum Schreiben von HTML verwendet werden. Sie können sich JSX als eine elegantere Art des HTML-Schreibens vorstellen.

Warum nicht HTML verwenden...?

Wir schreiben jetzt das Jahr 2016 und es gibt niemanden, der direkt HTML schreibt.

Ja. Okay, kann ich nach dem Hinzufügen dieser beiden Abhängigkeiten mit der Verwendung von React beginnen?

Nein. Sie müssen Babel hinzufügen, bevor Sie React verwenden können.

Babel ist eine weitere Bibliothek?

Nun, Babel ist ein Übersetzungstool, das das von Ihnen geschriebene JS in jede Version von JS übersetzen kann. Sie müssen Babel nicht verwenden, aber wenn nicht, müssen Sie die ES5-Syntax schreiben. Wissen Sie, es ist 2016, wie kann man die ES2016+-Syntax nicht verwenden? ES2016+ ist so cool.

Was ist ES5? Was ist ES2016+? Mir ist etwas schwindelig.

ES5 ist ECMAScript 5. Die meisten Leute werden ES5 verwenden, da die meisten Browser ES5 unterstützen.

Was ist ECMAScript...

Wie Sie wissen, wurde JS 1995 geboren und der JS-Standard wurde 1999 formuliert. Damals hieß JavaScript noch Livescript und konnte nur in Netscape-Browsern ausgeführt werden. Es war eine chaotische Zeit, aber jetzt haben wir 7 Versionen der JS-Spezifikation.

7 Versionen? Was ist mit ES5 und ES2016+?

sind die 5. bzw. 7. Version.

Hey, was ist mit der sechsten Version?

Sie sprechen von ES6. Jede Version ist eine Obermenge der vorherigen Version, sodass Sie einfach die neueste ES2016+ verwenden können.

Ja. Warum nicht ES6 verwenden?

Nun, Sie können ES6 verwenden, aber Sie werden nicht in der Lage sein, die coole Syntax von Async und Wait zu verwenden. Es ist besser, ES2016+ zu verwenden. Mit ES6 können Sie Generatoren nur zur Steuerung des asynchronen Aufgabenablaufs verwenden.

Ich weiß nicht, wovon du sprichst ... du hast zu viele Substantive gesagt, die ich nicht verstehe. Ich möchte nur einige Daten vom Server abrufen. Nachdem ich jQuery von CDN eingeführt habe, kann ich dies jetzt nicht tun.

Bruder, wir schreiben das Jahr 2016 und niemand verwendet jQuery, okay? Jeder weiß, dass die Verwendung von jQuery nur „Spaghetti“-Code erzeugt (nicht wartbar)

Okay, jetzt muss ich also drei Bibliotheken laden, um die Daten abzurufen und anzuzeigen.

Ja, Sie können tatsächlich den „Module Manager“ verwenden, um diese drei Bibliotheken in eine Datei zu „packen“.

Oh, was ist ein Modulmanager...

Modulmanager sind für verschiedene Plattformen unterschiedlich. Der Front-End-Modulmanager bezieht sich im Allgemeinen auf etwas, das AMD- oder CommonJS-Module verwaltet.

Okay... nun, was sind AMD und CommonJS?

sind zwei Definitionen. Wir haben viele Möglichkeiten, die Interaktion mehrerer Bibliotheken oder Klassen in JS zu beschreiben, z. B. Exporte und Anforderungen. Sie können JS gemäß der AMD- oder CommonJS-API schreiben und diese dann mit Browserify verpacken.

Klingt vernünftig. Aber was ist Browserify?

ist ein Tool, mit dem JS-Dateien in Form von CommonJS gepackt und im Browser ausgeführt werden. Die Leute, die NPM-Repositorys verwenden, haben CommonJS erfunden.

Was ist ein NPM-Repository...

ist ein öffentliches Repository, das zum Platzieren abhängiger Module verwendet wird.

Ist es wie ein CDN?

Nicht dasselbe. Es ist eher eine Datenbank, in der jeder Code posten und herunterladen kann. Sie können diese Codes lokal herunterladen, um sie während der Entwicklung zu verwenden, oder sie bei Bedarf auf ein CDN hochladen.

Klingt nach Bower!

Ja, aber wir schreiben das Jahr 2016 und niemand verwendet mehr Bower...

Okay, ich verstehe, also sollte ich npm verwenden, um Abhängigkeiten zu installieren.

Das stimmt. Lassen Sie mich Ihnen ein Beispiel geben. Wenn Sie React verwenden möchten, können Sie React direkt mit npm installieren und dann React in Ihren Code importieren. Die meisten JS-Bibliotheken können auf diese Weise installiert werden.

Nun, Angular funktioniert auch.

Angular ist so 2015. Aber Angular ist dieses Jahr nicht tot, es gibt auch VueJS und RxJS usw. Möchten Sie sie lernen?

Lassen Sie uns React verwenden. Ich habe gerade genug gelernt. Also installiere ich React mit npm und verpacke es mit Browerify?

Ja.

Das scheint etwas zu kompliziert zu sein.

In der Tat. Aus diesem Grund sollten Sie ein Aufgabenverwaltungstool wie Grunt, Gulp oder Broccoli verwenden, das Browserify automatisch ausführen kann. Nein, Sie können Mimosa jetzt verwenden.

Wovon redest du...

Aufgabenverwaltungstool. Aber wir nutzen es nicht mehr. Wir haben es letztes Jahr noch verwendet und später in Makefiles geändert, aber jetzt verwenden wir alle Webpack.

Ich dachte, dass nur C/C++-Projekte Makefiles verwenden würden.

Ja, aber natürlich machen wir in der Webentwicklung die Dinge gerne zuerst kompliziert und kehren dann zum einfachsten Zustand zurück. Wir machen das jedes Jahr. Schauen Sie zu, in weniger als zwei Jahren werden wir in der Lage sein, Kompilationen im Internet zu schreiben.

Hey, was ist Webpack, das du gerade erwähnt hast?

Ein weiteres Modulverwaltungstool und ein Aufgabenverwaltungstool. Man kann es sich als eine aufgemotzte Version von Browserify vorstellen.

Oh, okay, warum ist Webpack die erweiterte Version?

Nun, vielleicht ist es nicht verstärkt. Webpack erklärt Ihnen, wie Sie Ihre Abhängigkeiten verwalten sollten. Webpack ermöglicht Ihnen die Verwendung verschiedener Modulmanager, nicht nur CommonJS, sondern unterstützt sogar ES6-Module.

Alles passiert hier und da, ich bin verwirrt.

Alle sind verwirrt, aber warten Sie einfach, bis SystemJS herauskommt.

Oh mein Gott, noch eine JS-Bibliothek, was zum Teufel ist das?

Haha, im Gegensatz zu Browserify und Webpack 1.x ist SystemJS ein dynamischer Modullader.

Moment mal, habe ich nicht gerade gesagt, dass alle Abhängigkeiten in eine Datei gepackt werden sollten?

Das sage ich, aber nachdem HTTP/2 populär geworden ist, ist es besser, es nicht zu paketieren.

Warum fügen wir dann nicht die drei Abhängigkeitsdateien von React direkt zur Seite hinzu?

Nein. Sie können diese Dateien von einem CDN laden, müssen sie aber trotzdem lokal mit Babel übersetzen.

Oh, so schlimm?

Ja, Sie können Babel nicht in der Produktionsumgebung ausführen. Sie sollten vor der Veröffentlichung in der Produktionsumgebung eine Reihe von Aufgaben ausführen, einschließlich Komprimierung, Verschleierung, Inline-CSS, verzögertes Laden von Skripten usw.

Ich verstehe, ich verstehe. Was soll ich tun, da ich ein CDN nicht direkt verwenden kann?

Ich werde erwägen, Webpack + SystemJS + Babel zu verwenden, um Typescript zu transpilieren.

Typoskript? Reden wir nicht über JavaScript? !

Typescript ist auch JavaScript. Es ist einfacher zu verwenden als JS und basiert auf ES6, dem ES6, über das wir gerade gesprochen haben.

ES2016+ ist bereits eine Obermenge von ES6, warum erscheint Typescript erneut?

Das ist es, Typescript ermöglicht es uns, „stark typisiertes“ JS zu schreiben und dadurch Laufzeitfehler zu reduzieren. Im Jahr 2016 ist es an der Zeit, dass JS starkes Tippen unterstützt.

Anscheinend kann Typescript das.

Flow kann das auch, der Unterschied besteht darin, dass Typescript kompiliert werden muss, während Flow nur die Syntax prüft.

Hey, Flow?

ist ein statischer Typprüfer, der von Leuten von Facebook geschrieben wurde. Mit OCaml geschrieben, ist die funktionale Programmierung sehr einfach.

OCaml? Funktionale Programmierung?

Heutzutage verwenden die Großen diese Dinge. Es ist 2016. Sie wissen schon, Konzepte wie funktionale Programmierung, Funktionen höherer Ordnung, Currying und reine Funktionen.

Ich weiß nicht, wovon du sprichst.

Niemand wusste es zuerst. Sagen wir es so: Alles, was Sie wissen müssen, ist, dass funktionale Programmierung besser ist als objektorientierte Programmierung, und 2016 haben wir auf funktionale Programmierung hingewiesen.

Warten Sie, ich habe im College objektorientierte Programmierung studiert und fand es ziemlich gut.

Java war ziemlich gut, bevor es von Oracle gekauft wurde. Ich meine, objektorientiert war früher gut, und einige Leute verwenden es immer noch, aber jetzt stellt jeder fest, dass die Zustandstransformation schwer aufrechtzuerhalten ist, also beginnt jeder, „unveränderliche Objekte“ und funktionale Programmierung zu verwenden. Haskell-Leute verwenden diese Dinge schon seit langem, aber zum Glück gibt es im Bereich der Webentwicklung Bibliotheken wie Ramda, die es uns ermöglichen, funktionale Programmierung mit JS durchzuführen.

Hast du gerade noch ein paar Substantive weggeworfen? Was ist Ramnda?

Es ist nicht Ramnda, es ist Ramda, was ein bisschen wie ein Lambda-Ausdruck ist. ist eine von David Chambers geschriebene Bibliothek.

Wer?

David Chambers, ein toller Kerl. blablabla

Ich muss dich unterbrechen. Diese Dinge sehen alle gut aus, aber ich denke, sie sind alle zu kompliziert und unnötig. Ich möchte nur die Daten abrufen und anzeigen. Ich bin mir ziemlich sicher, dass ich in diesem Fall das Wissen nicht benötige.

Zurück zu React, wie erhalte ich mit React Daten vom Server?

Nun, React bietet diese Funktion nicht, Sie können React nur zum Anzeigen von Daten verwenden.

Ich bin überzeugt. Wie komme ich also an die Daten?

Sie verwenden einfach die Fetch-API.

Was zum Teufel? Der Name dieser API ist schrecklich.

Das denke ich auch. Die Fetch-API ist eine vom Browser bereitgestellte asynchrone Anforderungsschnittstelle.

Oh, das ist AJAX.

AJAX verwendet nur das XMLHttpRequest-Objekt, aber die Fetch-API ermöglicht es Ihnen, den Promise-Stil zu verwenden, um asynchrone Anfragen zu initiieren, was Ihnen hilft, die „Callback-Hölle“ loszuwerden.

Rückrufhölle?

Ja, jedes Mal, wenn Sie eine asynchrone Anfrage stellen, müssen Sie warten, bis diese antwortet. Zu diesem Zeitpunkt müssen Sie eine Funktion innerhalb einer Funktion verwenden, und dieser verschachtelte Aufruf ist die Rückrufhölle.

Okay. Löst Promise dieses Problem?

Ja. Durch die Verwendung von Promises zum Verwalten von Rückrufen können Sie Code schreiben, der besser lesbar und einfacher zu testen ist. Sie können sogar mehrere Anfragen gleichzeitig stellen und warten, bis alle zurückkommen.

Kann Fetch dasselbe tun?

Ja. Voraussetzung ist jedoch, dass Ihre Benutzer eine neue Version des Browsers verwenden. Andernfalls müssen Sie eine Fetch-Polyfüllung hinzufügen oder Bibliotheken wie Request, Bluebird oder Axios verwenden.

Oh mein Gott, wie viele Bibliotheken brauche ich?

Das ist JS, es gibt Tausende von Bibliotheken, die das Gleiche tun. Wir kennen uns mit Bibliotheken aus und haben die besten Bibliotheken. Wir haben eine große Anzahl an Bibliotheken und Sie können alles bekommen, was Sie brauchen.

Was machen die Bibliotheken, die Sie gerade erwähnt haben?

Diese Bibliotheken betreiben XMLHttpRequest und geben Promise-Objekte zurück.

Es scheint, dass die Ajax-Methode von jQuery dasselbe tut...

Wir verwenden jQuery seit 2016 nicht mehr. Wenn Sie Fetch verwenden, müssen Sie möglicherweise ein Polyfill hinzufügen, andernfalls können Sie Bluebird, Request oder Axios verwenden. Verwenden Sie dann „await“ und „async“, um Promise zu verwalten, sodass asynchrone Aufgaben gesteuert werden können.

Dies ist das dritte Mal, dass Sie „Warten“ gesagt haben.

await ermöglicht es Ihnen, einen asynchronen Aufruf zu blockieren, wodurch Sie die asynchron zurückgegebenen Daten besser kontrollieren können, was die Lesbarkeit des Codes erheblich verbessert. Warten ist sehr einfach zu verwenden. Sie müssen lediglich die Konfiguration der Stufe 3 in Babel hinzufügen oder Syntax-Async-Funktionen und Transform-Async-to-Generator-Plug-Ins hinzufügen.

Klingt verrückt.

Nicht verrückt. Um „await“ zu verwenden, sind diejenigen, die Typescript kompilieren und es dann mit Babel übersetzen, verrückt.

Was zum Teufel? Typescript unterstützt das Warten nicht?

Es wird in der nächsten Version unterstützt.

Ich habe nichts zu sagen.

Sie sehen, es ist eigentlich ganz einfach. Verwenden Sie Typescript, um Code zu schreiben, verwenden Sie Fetch, um asynchrone Anforderungen zu initiieren, kompilieren Sie alle Codes in ES6 und verwenden Sie dann Babels Konfigurationselemente der Stufe 3, um ES6 in ES5 zu übersetzen. Der gesamte Code wird mit SystemJS geladen. Wenn Sie Fetch nicht verwenden können, fügen Sie eine Polyfüllung hinzu oder verwenden Sie Bluebird, Request oder Axios, damit Sie „await“ für die Verarbeitung von Promise verwenden können.

Zu sehen, dass unser Verständnis von „einfach“ anders ist. Okay, damit kann ich endlich die Daten abrufen und sie mit React anzeigen, oder?

Muss Ihre Seite Statusänderungen verarbeiten?

Hmm, das ist nicht nötig. Ich möchte nur die Daten zeigen.

Das ist gut, ansonsten muss ich euch Flux und einige Implementierungen von Flux, wie Flummox, Alt, Fluxible, erklären. Aber im Ernst, Sie sollten Redux verwenden.

Ich habe einfach ignoriert, was du gesagt hast. Auch hier möchte ich nur die Daten zeigen.

Nun, wenn Sie nur Daten anzeigen möchten, brauchen Sie React nicht. Sie benötigen lediglich eine Template-Engine.

Willst du Witze machen?

Ich sage dir nur, welche Techniken du anwenden kannst.

Hören Sie damit auf, im Ernst.

Ich würde sagen, dass ich, selbst wenn ich nur eine Template-Engine verwende, immer noch Typescript + SystemJS + Babel verwenden werde.

Ich möchte nur Daten auf der Seite anzeigen. Sagen Sie mir einfach, welche Template-Engine ich verwenden soll.

Es gibt viele, welche haben Sie verwendet?

Ähm, ich habe es so lange nicht benutzt, dass ich mich nicht mehr erinnern kann.

jTemplates, jQote oder Pure?

Ähm, ich erinnere mich nicht, gibt es noch etwas anderes?

Transparenz? JSRender? MarkupJS?

Noch mehr?

PlateJS? jQuery-tmpl?

Etwas so. Welche sind dem letzten ähnlicher?

Mustache, Unterstrich? Ich erinnere mich, dass sogar Lodash eine Template-Engine hatte, aber das war im Jahr 2014.

Ähm, vielleicht ist es eine neuere Bibliothek?

Jade? DustJS?

Nie verwendet

DotJS? EJS?

Nie verwendet.

Nunjucks? ECT?

Nie verwendet. Ich kann mich nicht erinnern, welches würden Sie verwenden, wenn Sie es wären?

Ich sollte native ES6-Vorlagenzeichenfolgen verwenden

Ich denke, nur ES6 unterstützt es.

Das stimmt.

Sie müssen Babel verwenden

Das ist richtig.

Für die Installation muss npm verwendet werden

Ja.

Sie müssen Browserify oder Webpack oder SystemJS verwenden

Ja.

Wenn ich Webpack nicht verwende, benötige ich auch ein Aufgabenverwaltungstool.

Das stimmt.

Aber da ich funktionale Programmierung und stark typisierte Sprachen verwenden möchte, muss ich zuerst Typescript oder Flow verwenden.

Das stimmt.

Wenn ich „await“ verwenden möchte, muss ich die Babel-Übersetzung verwenden.

Das stimmt.

Dann kann ich Fetch, Promise und alle möglichen coolen Sachen verwenden.

Nun, vergessen Sie nicht, Fetchs Polyfill hinzuzufügen, da Safari Fetch nicht unterstützt.

Weißt du was, lass uns aufhören, darüber zu reden. Ich mache es nicht mehr, ich mache kein Web mehr und ich möchte JS nicht mehr anfassen.

Es ist in Ordnung, in ein paar Jahren werden wir alle Elm oder WebAssembly verwenden.

Ich gehe zurück zum Backend, ich kann all diese Änderungen, Versionsaktualisierungen, Kompilierungen und Übersetzungen nicht ertragen. Die JS-Community ist verrückt, wenn sie glaubt, dass irgendjemand damit mithalten kann.