Frontend
Wie vermeidet man unnötige Neurenderings des Kartenlisten-Komponenten, wenn eine Drittanbieteranwendung die Daten im Speicher regelmäßig aktualisiert und einzelne Karten nicht memoisierbar sind?
import { useState, useRef, useEffect } from "react"; const useDebugRender = ({props}) => { const prevProp = useRef(props) useEffect(() => { }, []) } const ParentComponent = () => { const [random, setRandom] = useState(0); // Wird als Prop an die Kindkomponente übergeben const [text, setText] = useState(""); // Wird als Prop an die Kindkomponente übergeben const createRandom = () => setRandom(Math.floor(Math.random() * 100)); const onTextChange = (e) => setText(e.target.value); const [count, setCount] = useState(0); const incrementCount = () => setCount((prev) => prev + 1); // Diese Funktion wird als Prop an die Kindkomponente übergeben return ( <> <Count: {count} /> <input type="text" onChange={onTextChange} /> <button onClick={createRandom}>Zufall generieren</button> <div> <ChildComponent random={random} text={text} incrementCount={incrementCount} /> </div> </> ); }; export default ParentComponent;
Welche Designmuster kennen Sie und haben Sie in Ihrer Arbeit verwendet?
Wie beeinflussen die Attribute defer und async das Laden und die Ausführung von Skripten, und wie kann man sonst noch das Blockieren des HTML-Parsings durch Skripte vermeiden?
Wie funktionieren Generatoren in JavaScript im Vergleich zu normalen Funktionen?
Haben Sie schon einmal mit Blob gearbeitet? Wie erstellt man einen Link zum Herunterladen einer dynamisch generierten Datei?
Haben Sie Erfahrung mit ModernJS?
Kannst du den Unterschied zwischen den Operatoren switchMap und mergeMap erklären?
/** * Die Funktion `asyncAuth(callback)` akzeptiert einen Callback, in den * ein Fehler (als erstes Argument) und Daten * vom Backend (als zweites Argument) übergeben werden können. * asyncAuth((error, data) => {}); * * Sie müssen die Funktion `auth()` implementieren, * die `asyncAuth()` aufruft, aber ein Promise zurückgibt. * * @returns {Promise} */ export function auth() { // asyncAuth((error, data) => {}); } /** * Die Funktion `tryAuth()` verwendet `auth()` und, im Fehlerfall, * führt N zusätzliche Versuche durch. * Wenn alle Versuche fehlschlagen, wirft sie den letzten Fehler. * * @returns {Promise} */ export function tryAuth(n) { }
// Es wird eine Zeichenkette aus lateinischen Buchstaben, Leerzeichen und Satzzeichen gegeben. // Eine Zeichenkette heißt Pangramm, wenn sie jeden der 26 lateinischen Buchstaben mindestens einmal enthält. // Bestimmen Sie, ob die Zeichenkette ein Pangramm ist. const LETTERS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; function isPangram(text) { // dein Code hier } console.log(isPangram('A pangram or holoalphabetic sentence is a sentence using every letter of a given alphabet at least once.')); // -> false console.log(isPangram('Waltz, bad nymph, for quick jigs vex.')); // -> true
Überprüfung des Nuxt-Mixins 2 - Resize-Listener ```javascript export default { data() { return { width: 0 } }, mounted() { window.addEventListener('resize', this.onResize) this.onResize() }, methods: { onResize() { this.width = window.innerWidth } } } ```
Welche Probleme sehen Sie mit dem globalen Objekt window.handlers und Konflikten bei Ereignis-Handlern?
Welche Methoden gibt es, um mit dem Kontext (this) zu arbeiten? Wie lautet die Signatur des call-Methodenaufrufs? Worin unterscheidet sich call von apply?
Haben Sie Erfahrung mit der Verwendung von Set und Map? In welchen Fällen haben Sie sie gewählt?
Worin besteht der Unterschied zwischen den Tags section und article? Welche Anforderungen stellt die Spezifikation an diese Tags?
Schließaufgabe: Was gibt der Code mit var in einer Schleife aus und wie kann man das beheben?
Haben Sie im Büro oder im Hybridformat gearbeitet?
Warum wechseln Sie Ihren aktuellen Job?
Wie beeinflussen sich CORS und CSP gegenseitig?
const customMap = (array, transform) => { // etwas wie array.map(transform); }; const stringResults = customMap([1, 2, 3], item => item.toString()); const lengths = customMap(["hallo", "welt"], item => item.length);