asynchrones JavaScript
bearbeitet von OrlokHallo Gunnar
> > Vielleicht hilft dir die Lektüre [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503) und [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504) Beitrags von mir bei der Entscheidungsfindung.
>
> Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends `var`{: .laguage-js}. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall `const`{: .laguage-js}. So also?
Im Prinzip ja.
> ~~~JavaScript
> .then(values => {
>
> const [availableLanguages, languageNames, localLanguageNames] = values;
> ~~~
Diese Zeile ist aber eigentlich überflüssig.
~~~JavaScript
.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.
> ~~~JavaScript
> 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.
> ~~~JavaScript
> 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.
~~~JavaScript
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. ;-)
~~~JavaScript
{
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:
> ~~~HTML
> <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
asynchrones JavaScript
bearbeitet von OrlokHallo Gunnar
> > Vielleicht hilft dir die Lektüre [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503) und [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504) Beitrags von mir bei der Entscheidungsfindung.
>
> Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends `var`{: .laguage-js}. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall `const`{: .laguage-js}. So also?
Im Prinzip ja.
> ~~~JavaScript
> .then(values => {
>
> const [availableLanguages, languageNames, localLanguageNames] = values;
> ~~~
Diese Zeile ist aber eigentlich überflüssig.
~~~JavaScript
.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.
> ~~~JavaScript
> 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.
> ~~~JavaScript
> 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.
~~~JavaScript
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. ;-)
~~~JavaScript
{
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.
Viele Grüße,
Orlok
asynchrones JavaScript
bearbeitet von OrlokHallo Gunnar
> > Vielleicht hilft dir die Lektüre [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503) und [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504) Beitrags von mir bei der Entscheidungsfindung.
>
> Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends `var`{: .laguage-js}. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall `const`{: .laguage-js}. So also?
Im Prinzip ja.
> ~~~JavaScript
> .then(values => {
>
> const [availableLanguages, languageNames, localLanguageNames] = values;
> ~~~
Diese Zeile ist aber eigentlich überflüssig.
~~~JavaScript
.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.
> ~~~JavaScript
> 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.
> ~~~JavaScript
> 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.
~~~JavaScript
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, könnte man sich die Konstante für das Element auch gleich sparen.
Ich finde, dass schaut ein wenig eleganter aus. Aber das ist nur eine Idee. ;-)
~~~JavaScript
{
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.
Viele Grüße,
Orlok
asynchrones JavaScript
bearbeitet von OrlokHallo Gunnar
> > Vielleicht hilft dir die Lektüre [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503) und [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504) Beitrags von mir bei der Entscheidungsfindung.
>
> Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends `var`{: .laguage-js}. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall `const`{: .laguage-js}. So also?
Im Prinzip ja.
> ~~~JavaScript
> .then(values => {
>
> const [availableLanguages, languageNames, localLanguageNames] = values;
> ~~~
Diese Zeile ist aber eigentlich überflüssig.
~~~JavaScript
.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.
> ~~~JavaScript
> 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.
> ~~~JavaScript
> 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.
~~~JavaScript
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, könnte man sich die Konstante für das Element auch gleich sparen.
Ich finde, dass schaut ein wenig eleganter aus. Aber das ist nur eine Idee. ;-)
Viele Grüße,
Orlok
asynchrones JavaScript
bearbeitet von OrlokHallo Gunnar
> > Vielleicht hilft dir die Lektüre [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503) und [dieses](https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504) Beitrags von mir bei der Entscheidungsfindung.
>
> Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends `var`{: .laguage-js}. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall `const`{: .laguage-js}. So also?
Im Prinzip ja.
> ~~~JavaScript
> .then(values => {
>
> const [availableLanguages, languageNames, localLanguageNames] = values;
> ~~~
Diese Zeile ist aber eigentlich überflüssig.
~~~JavaScript
.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.
> ~~~JavaScript
> 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.
> ~~~JavaScript
> 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.
~~~JavaScript
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, könnte man sich die Konstante für das Element auch gleich sparen.
Ich finde, dass schaut ein wenig eleganter aus. Aber das ist nur eine Idee. ;-)
Viele Grüße,
Orlok