Skip to content

Memoize to cache function results for natif javascript and vuejs

License

Notifications You must be signed in to change notification settings

yoannchb-pro/memov

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Memov

Icon

Memoize to cache function results for natif javascript and vuejs.

Features

  • Async support
  • Create your own configuration
  • Debug you memo to see it working
  • Define te max cache size and cache call
  • Work with first arguments and don't care about other
  • Define a method to make arguments corresponding

🎉 Update

See CHANGELOG

đź’» Installation

  • To work with object insteadof array import "memov-obj" from dist directory
$ npm i memov

Try it in the browser

<script src="https://unpkg.com/memov@1.0.5/dist/memov.js" type="text/javascript"></script>

đź“š Usage

Simple example

const memov = require("memov");

/**
 * Create a memov configuration
 * Note: see below the differents options to configure one instance of memov
*/
const _m = new memov();

const addition = _m.useMemo(function(a,b){
    return a + b;
});

addition(5,5) //10
addition(5,5) //10 - An other time but calculated from the cache
addition(5,6) //11
addition(5,5) //10 - Still from the cache

Also

const _m = new memov();
const useMemo = _m.useMemo.bind(_m);

const addition = useMemo(function(a,b){
    return a + b;
});

Vue.js

<template>
    <input type="text" v-model="val1">
    <input type="text" v-model="val2">
    <button @click="additionHandler">Add</button>
    <p>Result: {{ result }}</p>
</template>
<script>
import memov from "memov";

const _m = new memov({ debug: true });

export default {
    name: "MemovTest",

    data(){
      return {
        val1: 0,
        val2: 0,
        result: 0
      }
    },

    methods: {
        addition: _m.useMemo((a, b) => {
            return a + b;
        }),

        additionHandler(){
          this.result = this.addition(this.val1, this.val2)
        }
    }
}
</script>

Clear cache

Here is how to clear all the cache or only for specifics arguments

const _m = new memov({ argumentsLength: 2 });

const addition = _m.useMemo(function(a,b){
    return a + b;
});

addition.clearAll(); //clear all the cache
addition.clear(8,8); //clear cache for specifics arguments

addition(8,8);
addition(8,9);
addition(9,9);
addition(8,8,7); //cache hit
addition(8,9,8,8);; //cache hit

addition.clear(8,8,10);

addition(8,8);
addition(8,9); //cache hit

addition.clearAll();

//no cache hit for all
addition(8,8);
addition(8,9);
addition(9,9);

Configuration

Note: you can combine all options

isEqual

This method allow you to define when arguments are equals to stored arguments in cache.

const _m = new memov({ 
    isEqual: (argumentsCache, args) => 
        argumentsCache[0]?.type === args[0]?.type 
})

const greeting = _m.useMemo(function(obj){
    if(obj.type === "morning") {
        return "Good Morning !";
    }
    return "Hey !";
})

greeting({type: "morning"})
greeting({type: "morning", date: "22/05/2022"}) //cache hit: Good Morning !

maxCacheSize

This option allow you to set the max size of the cache. For example if you set up it at 3 and call the function with 4 differents parameters the first one will not work anymore.

const _m = new memov({ 
    maxCacheSize: 2
})

const addition = _m.useMemo(function(a, b){
    return a + b;
});

addition(5,5);
addition(5,5); //cache hit

addition(5,6);
addition(5,6); //cache hit

addition(5,7);
addition(5,7); //cache hit

addition(5,5); //not working anymore, the function is evaluate an other time

maxCacheCall

This option allow you to set the max call you can do on a cache.

const _m = new memov({ 
    maxCacheCall: 2
})

const addition = _m.useMemo(function(a, b){
    return a + b;
});

addition(5,5);
addition(5,5); //cache hit
addition(5,5); //cache hit
addition(5,5); //not working anymore, the function is evaluate an other time

argumentsLength

This option allow you to only work with the "x" first arguments and don't care about the other.

const _m = new memov({ 
    argumentsLength: 2
})

const addition = _m.useMemo(function(a, b){
    return a + b;
});

addition(5,5);
addition(5,5); //cache hit
addition(5,5,6,...); //cache hit

addition(5,6,7,8);
addition(5,6); //cache hit
addition(5,6,9); //cache it

debug

This option allow you to test your memo and display other informations

const _m = new memov({ 
    debug: true
})

const addition = _m.useMemo(function(a, b){
    return a + b;
});

addition(5,5);
/*
{
    type: "function",
    count: 0,
    arguments: [5,5],
    response: 10
}
*/
addition(5,5); //cache hit
/*
{
    type: "cache",
    count: 1,
    arguments: [5,5],
    response: 10
}
*/

_m.debug = false; //disabling the debug mode

Async

Working with async have never that easy

const _m = new memov();

const addition = _m.useMemo(async function(a, b){
    return a + b;
});

await addition(5,5);
await addition(5,5); //cache hit: 10

In debug mode

const _m = new memov({ debug: true });

const addition = _m.useMemo(async function(a, b){
    return a + b;
});

await (addition(5,5).response);
await (addition(5,5).response); //cache hit: 10

Test

$ npm run test

Benchmark

Test about working with objects is better or with array ?

Benchmark

Releases

No releases published

Packages

No packages published