Funktionsmemoizer für jedes Framework

memofy ? - Leichte Memoisierung für JavaScript-Funktionen (1,3 KB)

Cache-Mechanismus (Memoizer) für Funktionen, die mit denselben Parametern ausgeführt werden (nur 1,3 KB)

Dieses Projekt bietet eine Memoize-Funktion zur Verbesserung der Leistung in JavaScript- oder TypeScript-Projekten durch Zwischenspeichern der Ergebnisse teurer Funktionsaufrufe. Durch das Auswendiglernen geben wiederholte Aufrufe mit denselben Argumenten das zwischengespeicherte Ergebnis zurück und beschleunigen so die Ausführung.

Dieses Modul funktioniert wie der useMemo-Hook von React, ist aber NICHT erforderlich. Sie können jedes Framework oder reine Javascript-Projekte verwenden

Merkmale

• Funktionsspeicherung: Zwischenspeichert Ergebnisse von Funktionsaufrufen mit denselben Argumenten.
• Abhängigkeitsverfolgung: Aktualisiert den Cache, wenn sich Abhängigkeiten ändern.
• Flexibilität: Verwendbar sowohl in JavaScript- als auch in TypeScript-Projekten.
• Die beste Lösung für CPU-intensive Vorgänge oder komplexe Berechnungen
• Die getrennten Funktionen werden aus dem Speicher gelöscht. Die zu dieser Funktion gehörenden Caches werden ebenfalls gelöscht.
• WeakMap-basierter Cache-Speicher
• WeakMap Trennt Methoden, die nicht mit schwachen Referenzlinks kommunizieren können, und löst den Garbage Collector aus

Warum sollten wir memofy verwenden?

Mit Memofy können Sie die Ausführungszeit Ihrer Funktionen um das bis zu 1500-fache reduzieren. Die folgenden Ergebnisse wurden durch Tests an einer schweren Funktion erzielt. ??

Testfall Funktionsausführungszeit (ms)

Test Case	Function Execute Time (ms)
With Memofy (CACHED)	0.083 ms
Without Memofy	57.571 ms

Mit Memofy (CACHED) 0,083 ms

Ohne Memofy

57,571 ms

import memofy from "memofy";

const dep1 = /** Variable to track change */

const heavyMethod = memofy((arg1, arg2, ...args) => {
 // calculate something then return
}, [dep1, dep2, ...deps]);

// heavyMethod looks at the deps and arguments every time it is called.
// If there is no change, it brings it from the cache. If there is a change, it runs the function again

UND sehr einfach

Installation

npm install memofy

NPM

yarn add memofy

GARN

Anwendungsfall

Ohne Deps-Parameter

Wenn im folgenden Prozess die concatPhoneNumber-Methode erneut mit denselben Parametern aufgerufen wird, wird die Funktion nicht erneut ausgeführt, sondern ruft das Ergebnis aus dem Cache ab.

import memofy from "memofy";

const concatPhoneNumber = (extension, number) => {
  // Heavy calculation
  // return result
};

const memoizedConcatPhoneNumber = memofy(concatPhoneNumber, []);

memoizedConcatPhoneNumber(90, 555); // Runs concatPhoneNumber once
memoizedConcatPhoneNumber(90, 555); // Don't run because fetched from cache (same parameter)
memoizedConcatPhoneNumber(90, 552); // Runs concatPhoneNumber because params is changed

Mit deps-Parameter

Wenn Sie möchten, dass die Methode gemäß einigen Abhängigkeiten erneut mit demselben Parameter ausgeführt wird, können Sie den Parameter deps wie folgt übergeben.

import memofy from "memofy";

const product = { title: "Test product", price: 10 };

const calculateTax = (taxRatio) => {
  // Calculate tax by product price
  // Heavy calculation
  return taxRatio * product.price;
};

const memoizedCalculateTax = memofy(calculateTax, [product]);

calculateTax(2); // Runs calculateTax when first run -> 20
calculateTax(2); // // Don't run because fetched from cache (same parameter and same deps) -> 20

product.price = 40;
calculateTax(3); // Runs calculateTax because product dep changed -> 120

import memofy from "memofy";

const products = [
  /**Let's say there are more than 100 products */
];

// It is costly to cycle through 100 products each time. Just keep the result in the cache when it runs once.
const getTotalPrice = (fixPrice) => {
  return products.reduce((acc, curr) => acc + curr.price, 0);
};

const _getTotalPrice = memofy(getTotalPrice, [products]);
getTotalPrice(0); // Runs getTotalPrice once
getTotalPrice(0); // Don't run because fetched from cache
products.push({
  /** a few products */
});
getTotalPrice(2); // Runs again getTotalPrice because products and parameter changed

Mit Kontext

Wenn context(this, globalContex z. B.) in der Funktion verwendet wird, die Sie zwischenspeichern möchten, können Sie den Kontextparameter übergeben.

import memofy from "memofy";

this.user.name = "Jack"; // For example inject name to context

const getName = (suffix) => {
  return `${suffix} ${this.user.name}`;
};
const memoizedGetName = memofy(getName, [], this);
memoizedGetName("Mr"); // Result is Mr Jack

this.user.name = "John";
memoizedGetName("Mr"); // Result is Mr John because context data changed

type Args = Array<any>;

type Deps = Readonly<Array<any>>;

type MemoizedFunction<A extends Args, ReturnType> = (...args: A) => ReturnType;

declare function memofy<A extends Args, ReturnType extends any>(
  _functionToMemoize: (...args: Array<unknown>) => ReturnType,
  _deps?: Deps,
  _context?: unknown
): MemoizedFunction<A, ReturnType>;

Erklärung für Typoskript

Leistungsergebnis

Leistungsergebnisse für eine komplexe Funktion, die Primzahlen unterscheidet. Leistungstest

Case	ms
First execute time (no caching)	> 52.08 ms
Second execute time (caching)	< 0.03 ms
and subsequent execution (caching)	< 0.03 ms

Testabdeckungsergebnis

Tests wurden für alle Fälle und alle Parametertypen geschrieben. Tests

File	% Stmts	% Branch	% Funcs	% Lines
All files	90.69	86.95	100	94.59
lib	88.88	92.3	100	87.5
index.ts	88.88	92.3	100	87.5
lib/store	92	80	100	100
DependencyCacheStore.ts.ts	90	75	100	100
FunctionCacheStore.ts	93.33	83.33	100	100

Mitwirken

Dies ist Open-Source-Software. Wenn Sie möchten, können Sie es unterstützen, indem Sie Mitwirkender werden.Github Repository

Das obige ist der detaillierte Inhalt vonFunktionsmemoizer für jedes Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!