登录
首页 >  文章 >  前端

防止重新执行已使用相同参数处理过一次的大型 JavaScript 函数

来源:dev.to

时间:2024-08-28 21:54:54 392浏览 收藏

你在学习文章相关的知识吗?本文《防止重新执行已使用相同参数处理过一次的大型 JavaScript 函数》,主要介绍的内容就涉及到,如果你想提升自己的开发能力,就不要错过这篇文章,大家要知道编程理论基础和实战操作都是不可或缺的哦!

防止重新执行已使用相同参数处理过一次的大型 JavaScript 函数

记忆法

使用相同参数执行的函数的缓存机制(memoizer)(仅 1.14 kb)

该项目提供了 memoize 函数,通过缓存昂贵的函数调用结果来提高 javascript 或 typescript 项目的性能。通过记忆,使用相同参数重复调用将返回缓存的结果,从而加快执行速度。

这个模块的工作方式类似于 react 的 usememo hook,但不需要 react。您可以使用任何框架或纯javascript项目

npm 包
github

特征

  • 函数记忆:缓存具有相同参数的函数调用结果。
  • 依赖跟踪:如果依赖关系发生变化,则更新缓存。
  • 灵活性:可用于 javascript 和 typescript 项目。
  • cpu密集型运算或复杂计算的最佳解决方案
  • 断开连接的函数将从内存中删除。属于该函数的缓存也被删除。
  • 基于weakmap的缓存存储
  • weakmap 断开无法与弱引用链接通信的方法,并触发垃圾收集器启动

使用案例

没有 deps 参数

在下面的过程中,当使用相同的参数再次调用 concatphonenumber 方法时,该函数不会再次执行,而是从缓存中获取结果。

import memofy from "memofy";

const concatphonenumber = (extension, number) => {
  // heavy calculation
  // return result
};

const memoizedconcatphonenumber = memofy(concatphonenumber, []);

memoizedconcatphonenumber(90, 555); // runs concatphonenumber when first run
memoizedconcatphonenumber(90, 555); // get value from cache

memoizedconcatphonenumber(90, 552); // runs concatphonenumber because params is change

带 deps 参数

如果你想让方法根据某些依赖关系以相同的参数再次运行,你可以传递 deps 参数,如下所示。

import memofy from "memofy";

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

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

const memoizedConcatPhoneNumber = memofy(calculateTax, [product, taxRatio]);

calculatedPrice = calculateTax(); // Runs concatPhoneNumber when first run

product.price = 40;
let calculatedPrice = calculateTax(); // Runs concatPhoneNumber because product dep changed

taxRatio = 0.8;
calculatedPrice = calculateTax(); // Runs concatPhoneNumber because taxRatio changed

绩效结果

区分素数的复杂函数的性能结果。性能测试

案例 毫秒
首次执行时间(无缓存) > 52.08 毫秒
第二次执行时间(缓存) < 0.03 毫秒
以及后续执行(缓存) < 0.03 毫秒

测试覆盖率结果

针对所有情况和所有参数类型编写了测试。测试

文件 % stmts % 分支 % 功能 % 线路 未覆盖的线路#s
所有文件 100 100 100 100 0
lib 100 100 100 100 0
index.ts 100 100 100 100 0
库/商店 100 100 100 100 0
cachestore.ts 100 100 100 100 0
depsstore.ts 100 100 100 100 0

今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~

声明:本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>