Memoizer fungsi untuk setiap rangka kerja

memofy ? - Memoisasi Ringan untuk Fungsi JavaScript (1.3KB)

Mekanisme cache(memoizer) untuk fungsi yang dilaksanakan dengan parameter yang sama (Hanya 1.3 KB)

Projek ini menyediakan fungsi memoize untuk meningkatkan prestasi dalam projek JavaScript atau TypeScript dengan menyimpan cache hasil panggilan fungsi yang mahal. Dengan menghafal, panggilan berulang dengan hujah yang sama akan mengembalikan hasil cache, mempercepatkan pelaksanaan.

Modul ini berfungsi seperti cangkuk useMemo react tetapi TIDAK diperlukan bertindak balas. Anda boleh menggunakan mana-mana rangka kerja atau projek javascript tulen

Ciri-ciri

• Memoisasi Fungsi: Menyimpan hasil panggilan fungsi dengan hujah yang sama.
• Penjejakan Kebergantungan: Mengemas kini cache jika kebergantungan berubah.
• Fleksibiliti: Boleh digunakan dalam kedua-dua projek JavaScript dan TypeScript.
• Penyelesaian terbaik untuk operasi intensif CPU atau pengiraan kompleks
• Fungsi yang terputus sambungan dipadamkan daripada memori. Cache kepunyaan fungsi ini juga dipadamkan.
• Stor cache berasaskan WeakMap
• WeakMap Memutuskan sambungan kaedah yang tidak dapat berkomunikasi dengan pautan rujukan yang lemah dan mencetuskan pemungut sampah untuk menyepak masuk

Mengapa kita perlu menggunakan memofy?

Menggunakan Memofy anda boleh mengurangkan masa pelaksanaan fungsi anda sehingga 1500 kali. Keputusan berikut diperoleh dengan menguji fungsi berat. ??

Kes Ujian Masa Laksana Fungsi (ms)

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

Dengan Memofy (DICACHED) 0.083 ms

Tanpa 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

DAN sangat mudah

Pemasangan

npm install memofy

NPM

yarn add memofy

BENANG

Kes penggunaan

Tanpa parameter deps

Dalam proses berikut, apabila kaedah concatPhoneNumber dipanggil semula dengan parameter yang sama, fungsi itu tidak dilaksanakan lagi, ia mengambil hasil daripada cache.

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

Dengan parameter deps

Jika anda mahu kaedah dijalankan semula dengan parameter yang sama mengikut beberapa kebergantungan, anda boleh lulus parameter deps seperti berikut.

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

Dengan konteks

Jika konteks(ini, globalContex e.g) digunakan dalam fungsi yang anda mahu cache, anda boleh lulus parameter konteks.

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>;

Pengisytiharan untuk skrip taip

Hasil prestasi

Hasil prestasi pada fungsi kompleks yang membezakan nombor perdana. Ujian Prestasi

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

Keputusan liputan ujian

Ujian telah ditulis untuk semua kes dan semua jenis parameter. Ujian

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

Menyumbang

Ini adalah perisian sumber terbuka. Jika anda mahu, anda boleh menyokongnya dengan menjadi penyumbang. Repositori Github

Atas ialah kandungan terperinci Memoizer fungsi untuk setiap rangka kerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!