asynchrones JavaScript

[Orlok]

Hallo Gunnar

Vielleicht hilft dir die Lektüre dieses und dieses Beitrags von mir bei der Entscheidungsfindung.

Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends var. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall const. So also?

Im Prinzip ja.

.then(values => {
	
	const [availableLanguages, languageNames, localLanguageNames] = values;

Diese Zeile ist aber eigentlich überflüssig.

.then(([availableLanguages, languageNames, localLanguageNames]) => {

Du kannst das Array mit dem der Parameter values initialisiert wird auch direkt in der Parameterliste destrukturieren. Dabei müssen allerdings wie in dem Beispiel oben Klammern gesetzt werden, sonst gibt das einen Syntaxfehler.

			const clone = template.content.cloneNode(true);
			const liElement = clone.querySelector('li');
			const aElement = liElement.querySelector('a');

Hier könnte man darüber nachdenken, ob es wirklich alle drei const braucht.

			aElement.href = '?lang=' + lang;
			aElement.hreflang = lang;
			aElement.lang = lang;
			aElement.textContent = languageNames[lang] || lang;

Wenn mehreren Eigenschaften eines Objektes Werte zugewiesen werden sollen, dann mache ich das ganz gern mit Object.assign. Da ein Zuweisungsausdruck grundsätzlich zu dem zugewiesenen Wert aufgelöst wird, lässt es sich in solchen Fällen leider nicht vermeiden, das Objekt, welches das Ziel der Zuweisung ist, jedes mal aufs neue zu referenzieren. Das kann man sich mit assign sparen.

Object.assign(liElement.querySelector('a'), {
  href: '?lang=' + lang,
  hreflang: lang,
  lang: lang,
  textContent: languageNames[lang] || lang
});

Zurückgegeben wird von assign das Zielobjekt, welches als ersts Argument übergeben wird, aber da die Referenz hier nicht benötigt wird, kann man auf die Deklaration einer Konstante für das Element verzichten. Ich finde, dass schaut ein wenig eleganter aus. Aber das ist nur eine Idee. ;-)

{
  lang: lang
}

Das könnte man dann wenn man wollte auch noch abkürzen und einfach lang, schreiben. Dann wird der Parameter referenziert, sein Bezeichner als Eigenschaftsname verwendet und sein Wert zugewiesen.

Edit:

Ich habe gerade beim Überfliegen des Threads gesehen, dass dein Markup so aussieht:

<ul id="lang-menu">
	<template id="lang-menu-item">
		<li><a></a></li>
	</template>
	<script src="lang-menu.js" async=""></script>
</ul>

Das sieht nicht so aus, als würde sich da regelmäßig was ändern, also würde ich an dieser Stelle vermutlich auf die Methode querySelector() verzichten und die beiden Elemente statt dessen über die Eigenschaft firstElementChild referenzieren.

Viele Grüße,

Orlok