Vanille JavaScript und HTML. Keine Frameworks. Keine Bibliotheken. Kein Problem

Verwenden Sie Vue, React, Angular oder Svelte, um Anwendungen zu erstellen? Ich verwende und wenn ja, und ich bin sicher, dass Sie keine Anwendung schreiben mussten, die Informationen ohne diese wunderbaren Tools anzeigt.

Es war einmal, dass viele von uns Webanwendungen nur mit den im Browser integrierten Tools geschrieben haben. Obwohl uns moderne Tools dabei helfen, dies zu ignorieren (und viele andere Vorteile bieten), ist es dennoch nützlich zu wissen, was unter ihrer Haube vor sich geht.

Wenn Sie eine kleine Menge an Informationen anzeigen, müssen Sie möglicherweise HTML, JavaScript und das DOM ohne Tools verwenden. Ich habe kürzlich einige grundlegende Beispiele geschrieben, die die Grundlagen der Webentwicklung veranschaulichen und beim Erlernen der DOM-, HTML-, JavaScript- und Browser-Prinzipien helfen. Diese Erfahrung hat es mir ermöglicht zu verstehen, dass andere Entwickler - vielleicht Sie - gerne daran denken würden, wie Informationen ohne Bibliotheken angezeigt werden.

Es macht auch Spaß, ist nützlich und hilft, den Wert moderner Bibliotheken und Frameworks zu verstehen, die so viel für uns tun.

Schauen wir uns verschiedene Möglichkeiten an, um Informationen anzuzeigen. Und halten Sie diese Dokumentation bereit!

Beispielanwendung

Hier ist die Anwendung, die ich in meinem Artikel demonstriert habe. Es extrahiert eine Liste von Zeichen und zeigt sie an, wenn eine Taste gedrückt wird. Die Anwendung zeigt beim Abrufen der Liste auch einen Fortschrittsbalken an.

Die Werkzeuge

Es ist wichtig, die richtigen Werkzeuge auszuwählen. In dieser Übung müssen wir Informationen in einem Browser mit bestimmten Tools anzeigen, die uns allen zur Verfügung stehen. Keine Frameworks. Keine Bibliotheken. Kein Problem.

Wir verwenden nur HTML, TypeScript / JavaScript, CSS und das browserbasierte DOM (Document Object Model). Mal sehen, wie HTML angezeigt werden kann.

Hier erfahren Sie, wie Sie TypeScript mit VS-Code schreiben .

Wie Sie vielleicht bemerkt haben, verwende ich TypeScript . Die Funktionen des Sets tragen perfekt dazu bei, Fehler zu vermeiden, und ich nutze seine Fähigkeit, in jedes JavaScript-Format zu konvertieren. Wenn Sie möchten, können Sie reines JavaScript verwenden. In Zukunft werde ich einen Artikel darüber schreiben, wie man TypeScript transponiert .

Der Ansatz

Unsere Anwendung zeigt einen Fortschrittsbalken und eine Liste von Zeichen an. Beginnen wir mit dem einfachsten Indikator - und betrachten die verschiedenen Möglichkeiten, ihn anzuzeigen. Dann gehen wir zur Liste und sehen, wie sich die Situation ändert, wenn weitere Informationen angezeigt werden müssen.

Fortschrittsanzeige

Ein Indikator sollte angezeigt werden, während die Anwendung entscheidet, welche Zeichen aufgelistet werden sollen. Das heißt, zuerst ist der Indikator unsichtbar, dann drückt der Benutzer die Aktualisierungsschaltfläche, der Indikator erscheint und verschwindet wieder, nachdem die Liste angezeigt wurde.

Bei allen nachfolgend beschriebenen Methoden müssen die Elemente beim Erstellen platziert werden. Beispielsweise müssen sich irgendwo ein Indikator und eine Liste von Zeichen befinden. Eine Lösung besteht darin, auf ein vorhandenes Element zu verweisen, das sie bereits enthält. Oder Sie können auf ein Element verweisen und es durch neue Daten ersetzen.

Indikator mit internem HTML anzeigen

HTML erstellen und in ein anderes Element einfügen ist die älteste Lösung, aber es funktioniert! Wählen Sie das Element aus, in dem der Indikator angezeigt wird, und innerHtml Eigenschaft für die neuen Daten fest. Bitte beachten Sie, dass wir auch versuchen, den Code lesbar zu machen, indem wir Musterzeichenfolgen verwenden, um mehrere Zeilen zu überspannen.

 const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `; 

Einfach. Einfach. Warum kann dies nicht über einen Code gesagt werden? Na schau mal, wie schnell dieses Stück das Problem löst!

Sie haben wahrscheinlich bereits bemerkt, wie anfällig dieser Code ist. Ein Fehler in HTML - und das war's! Wir haben ein Problem. Und ist es wirklich lesbar? Ja, aber was passiert, wenn der HTML-Code zu kompliziert wird? Wenn Sie 20 Codezeilen mit Klassen, Attributen und Werten haben, dann haben Sie den Punkt. Ja, die Lösung ist nicht perfekt. Aber mit ein wenig HTML funktioniert es ganz gut und ich empfehle allen Fans, alles in einer Zeile zu schreiben, um es anzusehen.

Beachten Sie auch, wie sich Inline-Inhalte auf die Lesbarkeit und Stabilität des Codes auswirken können. Wenn Sie zum Beispiel Informationen innerhalb des Indikators für eine sich ändernde Download-Nachricht hinzufügen müssen, können Sie dies mithilfe eines Ersatzes tun, zum Beispiel ${message} . Dies ist weder gut noch schlecht, sondern bietet zusätzlichen Komfort beim Erstellen großer Vorlagenzeichenfolgen.

Eine letzte innerHTML : innerHTML kann die Anzeigegeschwindigkeit beeinflussen. Ich innerHTML mich nicht von innerHTML Optimierung hinreißen, sondern überprüfe die Leistung, da innerHTML der Grund für das Rendern und Rendern von Zyklen im Browser sein kann. Denken Sie daran.

Fortschrittsanzeige mithilfe der DOM-API

Mit der DOM-API können Sie die Sperrigkeit langer Zeilen verringern. Wir erstellen ein Element, fügen die erforderlichen Klassen und Attribute hinzu, legen die Werte fest und fügen sie dann dem DOM hinzu.

 const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl); 

Der Vorteil ist, dass Sie mehr Code schreiben und sich auf die API verlassen müssen. innerHTML , dass Tippfehler im Vergleich zu innerHTML die Wahrscheinlichkeit erhöhen, dass das System einen Fehler innerHTML , der dazu innerHTML , die Ursache des Problems zu finden und eine Lösung zu finden.

Und der Nachteil ist, dass sechs Codezeilen innerHTML Informationen auszugeben, die mit innerHTML als einzelne Zeile innerHTML .

Ist der DOM-API-Code zum Anzeigen des Indikators lesbarer als der Code mit innerHTML ? Ich würde streiten. Aber ist das nicht der Grund, warum der HTML-Code des Indikators sehr kurz und einfach ist? Möglicherweise. Wenn es 20 Zeilen innerHTML würde innerHTML viel schwieriger zu lesen sein ... jedoch auch der DOM-API-Code.

Zeichnen eines Indikators mithilfe von Vorlagen

Eine andere Möglichkeit besteht darin, ein <tmplate> zu erstellen und es zur Vereinfachung der Informationsausgabe zu verwenden.

Erstellen Sie <tmplate> und weisen Sie ihm eine ID zu. Die Vorlage wird nicht auf der HTML-Seite angezeigt, aber Sie können später einen Link zu ihrem Inhalt erstellen und diese verwenden. Dies ist sehr nützlich. Sie können HTML schreiben, wo immer dies angebracht ist: auf einer HTML-Seite mit allen nützlichen Funktionen eines HTML-Editors.

 <template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template> 

Der Code kann dann die Vorlage mit der document.importNode() -Methode aus der DOM-API übernehmen. Bei Bedarf kann der Code den Inhalt der Vorlage manipulieren. Fügen Sie nun diesen Inhalt zum DOM hinzu, um den Indikator anzuzeigen.

 const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode); 

Vorlagen sind eine gute Möglichkeit, HTML zu erstellen. Ich mag es, weil Sie damit HTML dort schreiben können, wo es Sinn macht, und mit TypeScript / JavaScript-Code weniger.

Kann ich Vorlagen aus anderen Dateien importieren? Ja, aber mit Hilfe anderer Bibliotheken. Jetzt haben wir sie jedoch absichtlich abgelehnt. Der HTML-Import wird seit Jahren diskutiert, aber wie Sie auf der Website " Kann ich verwenden" sehen können, unterstützen nicht alle modernen Browser diese Funktion.

Zeichenliste anzeigen

Lassen Sie uns nun darüber sprechen, wie Sie mit denselben drei Techniken eine Liste von Zeichen anzeigen können. Der Unterschied zum Rendern eines einzelnen <prgress> Elements und einer Liste von Zeichen besteht darin, dass wir jetzt:

• mehrere HTML-Elemente anzeigen;
  
• mehrere Klassen hinzufügen;
  
• füge eine bestimmte Folge von Kindern hinzu;
  
• Anzeige für jedes Zeichen eine Menge der gleichen Informationen;
  
• Text dynamisch in Elementen anzeigen.
  

Zeigen Sie Zeichen mit internem HTML an

Bei der Verwendung von innerHTML es sinnvoll, mit einem Array von Zeichen zu beginnen und es zu wiederholen. Auf diese Weise können Sie jeweils eine Zeile erstellen. Zeilen unterscheiden sich nur in Zeichennamen und Beschreibungen, die mit Hilfe von Vorlagenzeilen eingefügt werden können. Jedes Zeichen im Array erstellt ein li Tag, das einem String-Array zugeordnet ist. Schließlich wird das String-Array in reines HTML konvertiert, in ul und innerHTML zugewiesen.

 function createListWithInnerHTML(heroes: Hero[]) { const rows = heroes.map(hero => { return `<li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name">${hero.name}</div> <div class="description">${hero.description}</div> </div> </div> </div> </li>`; }); const html = `<ul>${rows.join('')}</ul>`; heroPlaceholder.innerHTML = html; 

Es funktioniert Und vielleicht ist das besser lesbar. Was ist mit Leistung? Ist es schwierig (oder sogar möglich?) Tippfehler beim Eingeben von Code zu erkennen? Um dich zu beurteilen. Aber lassen Sie uns keine Schlussfolgerungen ziehen, bis wir die anderen Techniken herausgefunden haben.

Zeichenzuordnung mit der DOM-API

 function createListWithDOMAPI(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero => { const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); }); heroPlaceholder.replaceWith(ul); } 

Zeichenanzeige mit Vorlagen

Die Liste der Zeichen kann mithilfe von Vorlagen angezeigt werden. Hierfür wird die gleiche Technik verwendet wie für die Anzeige des <prgress> -Elements. Erstellen Sie zunächst eine Vorlage auf der HTML-Seite. Dieser HTML- <prgress> etwas komplizierter als mit <prgress> . Das ist aber kein Problem. Es ist nur HTML innerhalb einer HTML-Seite, so dass wir Fehler und Formatierungen mit dem schönen VS-Code- Editor leicht beheben können.

 <template id="hero-template"> <li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name"></div> <div class="description"></div> </div> </div> </div> </li> </template> 

Jetzt können Sie Code schreiben, um eine Liste von Zeichen zu erstellen. Erstellen Sie zunächst ul , um die Zeilen mit li Zeichen zu li . Jetzt können Sie das Array durchsuchen und dieselbe document.importNode() -Methode verwenden, um für jedes Zeichen dieselbe Vorlage anzuwenden. Beachten Sie, dass das Muster zum Erstellen jeder Zeile wiederverwendet werden kann. Es wird eine Quellzeichnung, die die erforderliche Anzahl von Linien erstellt.

Die Liste der Zeichen muss Namen und Beschreibungen enthalten. Das heißt, es müssen bestimmte Werte in der Vorlage ersetzt werden. Zu diesem Zweck ist es ratsam, die Stellen zu identifizieren und zu referenzieren, an denen Sie diese Werte einfügen. In unserem Beispiel verwenden wir die querySelector('your-selector') Methode querySelector('your-selector') , um einen Link zu jedem Zeichen zu erhalten. querySelector('your-selector') geben wir einen Namen und eine Beschreibung ein.

 function createListWithTemplate(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) => { const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); }); heroPlaceholder.replaceWith(ul); } 

Ist diese Vorlage einfacher als andere Techniken? Ich finde es relativ einfach. Aus meiner Sicht basiert der Code auf einer Vorlage, die die Wiedergabe und Lesbarkeit vereinfacht und außerdem besser vor Fehlern schützt.

Zusammenfassung

Ich habe nicht erwähnt, wie beliebte Frameworks und Bibliotheken Informationen anzeigen. Vue, React, Angular und Svelte erleichtern die Aufgabe erheblich und erfordern weniger Code zum Schreiben. Sie haben auch andere Vorteile. In diesem Artikel haben wir nur relativ einfache Techniken zum Anzeigen von Informationen unter Verwendung von DOM und reinem HTML sowie TypeScript / JavaScript untersucht.

Zu was sind wir gekommen?

Ich hoffe, Sie können sich jetzt vorstellen, wie Sie Informationen ohne Bibliotheken anzeigen können. Gibt es noch andere Möglichkeiten? Natürlich. Kann ich Funktionen schreiben, die den Code vereinfachen und die wiederholte Verwendung ermöglichen? Natürlich. Aber eines Tages werden Sie mit einem solch großartigen Werkzeug wie Vue, React, Angular oder Svelte experimentieren wollen.

Diese Frameworks leisten viel Arbeit für uns. Sie können sich daran erinnern, wie Sie Informationen mit reinem DOM-Code mit JavaScript oder jQuery ausgeben. Oder wie man das mit Werkzeugen wie Lenker oder Schnurrbart macht. Oder Sie geben Informationen niemals ohne die Hilfe eines Frameworks an das DOM aus. Sie können sich vorstellen, welche Prozesse unter der Haube moderner Bibliotheken und Frameworks ablaufen, wenn sie Informationen für Sie auf dem Bildschirm anzeigen.

Es ist gut zu wissen, was Sie mit reinem HTML, TypeScript / JavaScript und CSS tun können, auch wenn Sie ein Framework verwenden, das Ihnen all das erspart.

Unabhängig von Ihrer Erfahrung hoffe ich, dass dieser kurze Ausflug in einige der Techniken zur Anzeige von Informationen für Sie nützlich war.