Code-Bibliothek — Capypad · Code Zeile für Zeile lesen

JavaScript · ExperteSnippet

Kontextuelles Escaping über Tagged Templates

Tagged Template Literals ermöglichen das Parsen von Template-Strings durch eine Funktion. Dies ist ein Experten-Pattern zur Implementierung von Domain Specific Languages (DSLs) oder, wie hier gezeigt, für automatisches Security-Escaping zur Vermeidung von XSS-Angriffen.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const value = String(values[i] || '');
    const escaped = value.replace(/[&<>"']/g, m => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[m]));
    return acc + str + escaped;
  }, '');
}
 
const userSupplied = '<img src=x onerror=alert(1)>';
const html = safeHTML`<div>${userSupplied}</div>`;

syntaxsecurity

JavaScript · ExperteSnippet

Strukturvalidierung mit Proxy-Traps

Das Proxy-Objekt ermöglicht es, einen Wrapper für ein anderes Objekt zu erstellen, um grundlegende Operationen wie Eigenschaftszuweisungen abzufangen. Durch die Verwendung des 'set'-Traps und der 'Reflect'-API kann eine robuste Laufzeit-Typprüfung implementiert werden.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

const schema = { name: 'string', age: 'number' };
const handler = {
  set(target, prop, value) {
    if (schema[prop] && typeof value !== schema[prop]) {
      throw new TypeError(`Invalid type for ${prop}`);
    }
    return Reflect.set(...arguments);
  }
};
 
const user = new Proxy({}, handler);
user.name = 'Alice'; // Works
user.age = 'none';   // Throws TypeError

patternsoop

JavaScript · ExperteSnippet

Threadsichere Synchronisation mit Atomics

Atomics bietet statische Methoden zur Durchführung atomarer Operationen auf SharedArrayBuffer-Daten. Dies ist entscheidend für multithreaded JavaScript (Web Worker), um Race Conditions zu verhindern und den Speicherzugriff zwischen Threads zu synchronisieren.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

const buffer = new SharedArrayBuffer(1024);
const i32 = new Int32Array(buffer);
 
// In Worker A
Atomics.store(i32, 0, 123);
Atomics.notify(i32, 0, 1);
 
// In Worker B
const result = Atomics.wait(i32, 0, 0);
if (result === 'ok') {
  console.log(Atomics.load(i32, 0));
}

asyncperformance

JavaScript · ExperteSnippet

Speichereffizientes Caching mit WeakRef

WeakRef ermöglicht es, eine schwache Referenz auf ein Objekt zu halten, was bedeutet, dass es die Garbage Collection des Objekts nicht verhindert. In Kombination mit FinalizationRegistry können Caches erstellt werden, die sich bei geringem Speicher automatisch bereinigen, ohne Objekte unendlich lange am Leben zu halten.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const cache = new Map();
const registry = new FinalizationRegistry(key => {
  const ref = cache.get(key);
  if (ref && !ref.deref()) cache.delete(key);
});
 
function getCachedData(key, factory) {
  const ref = cache.get(key);
  let data = ref?.deref();
  if (!data) {
    data = factory();
    cache.set(key, new WeakRef(data));
    registry.register(data, key);
  }
  return data;
}

performancebestpractices

JavaScript · ExperteSnippet

Funktionale Komposition via Pipe-Kombinatoren

Pipe ist ein funktionales Programmiermuster, das mehrere Funktionen zu einer einzigen Transformations-Pipeline zusammensetzt. Es verbessert die Lesbarkeit, indem es Daten von links nach rechts fließen lässt, wodurch tief verschachtelte Funktionsaufrufe vermieden und imperativer Boilerplate reduziert wird.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

const pipe = (...fns) => (initialValue) => 
  fns.reduce((acc, fn) => fn(acc), initialValue);
 
const normalize = s => s.trim().toLowerCase();
const slugify = s => s.replace(/\s+/g, '-');
const label = s => `id:${s}`;
 
const createSlug = pipe(normalize, slugify, label);
console.log(createSlug('  Expert JS Snippet  ')); // 'id:expert-js-snippet'

functionspatterns

JavaScript · ExperteSnippet

Backpressure-Behandlung in asynchronen Generatoren

Asynchrone Generatoren bieten eine natürliche Möglichkeit, Backpressure zu implementieren. Indem man innerhalb des Generators vor dem 'yield' auf ein Promise wartet, signalisiert man dem Produzenten, dass der Konsument noch nicht bereit für weitere Daten ist, was die Flusssteuerung in asynchronen Strömen effizient verwaltet.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

async function* streamProcessor(source) {
  for await (const chunk of source) {
    if (needsThrottling()) {
      await new Promise(r => setTimeout(r, 100)); // Simulate backpressure
    }
    yield transform(chunk);
  }
}
 
const consumer = async () => {
  for await (const data of streamProcessor(dataSource)) {
    console.log(data);
  }
};

asyncpatterns

JavaScript · ExperteSnippet

Low-Level Binär-Manipulation mit DataView

DataView bietet eine Low-Level-Schnittstelle zum Lesen und Schreiben mehrerer Zahlentypen in einem ArrayBuffer, unabhängig von der Endianness der Plattform. Dies ist entscheidend für die Implementierung von Binärprotokollen, Dateiparsern oder Hochleistungsnetzwerken, bei denen eine Byte-perfekte Ausrichtung erforderlich ist.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
 
// Write a 32-bit integer at byte 0 in Big-Endian
view.setUint32(0, 0x12345678, false);
 
// Read the first byte
const firstByte = view.getUint8(0);
console.log(firstByte.toString(16)); // '12'
 
// Read as Little-Endian to see the difference
const leValue = view.getUint32(0, true);
console.log(leValue.toString(16)); // '78563412'

performancedatatypes

JavaScript · ExperteSnippet

Explizites Ressourcenmanagement mit Symbol.dispose

Das 'using'-Schlüsselwort führt in Kombination mit Symbol.dispose ein deterministisches Ressourcenmanagement ein. Es stellt sicher, dass die Bereinigungslogik sofort ausgeführt wird, wenn die Variable den Scope verlässt, wodurch Speicherlecks oder offene Dateihandles ohne manuelle try-finally-Blöcke vermieden werden.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

class TempFile {
  constructor(path) {
    this.path = path;
    console.log(`File ${path} opened.`);
  }
  [Symbol.dispose]() {
    console.log(`File ${this.path} closed and deleted.`);
  }
}
 
{
  using file = new TempFile('test.txt');
  // Resource is bound to this block scope
}
// Automatically disposed here

syntaxbestpractices