跳转到内容
前端实用工具集
搜索
Ctrl
K
取消
GitHub
选择主题
深色
浅色
自动
业务工具
简单货币格式化
通过 Dinero 和 Intl 处理货币数据
文件大小格式化 (简单版)
文件格式化库 filesize
根据数组构建树
树组件查询
计算博客阅读时长
根据背景色自适应文本颜色
输入错误提示 —— 模糊集
阿拉伯数字与中文数字的相互转换
网页公式排版工具 KaTeX
颜色排序算法
交互式医学图像工具 Cornerstone
快速制作出响应式邮件的框架 Mjml
超长定时器 long-timeout
基于内存的全文搜索引擎 MiniSearch
机器人工具集合
功能扩展
js 手写生成 pdf
查找解析祖先文件工具 find-up
聊聊 Unicode 编码
打印
用户体验
自然语言日期解析器 Chrono
使用 escape 解决 HTML 空白折叠
组合键提升用户体验
提升交互体验的 web Observer
切换中文简繁字体
使用 gsap 操纵动画序列
获取汉字拼音首字母
禁止浏览器进行表单填充
手写一个同步服务端时间的小工具
使用凭证优化登录流程
开发工具
快速调试编辑器 RunJS
自动切换故障 CDN 工具
LocalCDN 插件提升网站加载速度
静态代码分析工具 Understand
漂亮的专业排版软件 TeXMacs
跨平台的音乐播放器 Listen1
开发者的边车辅助工具 DevSidecar
字符串化对象结构库 qs
使用 Lighthouse 审查网络应用
sourcemap 可视化工具
效率工具
搜索和更改代码结构的工具 comby
大文件版本控制工具 git lfs
计算项目代码行数工具 cloc
影刀 RPA
git 图形化工具 lazygit
辅助开发
开发助力 mermaid 绘制图表
文件类型检测
小数位计算的四舍五入
项目版本比对
url 构造
stub 函数
生成唯一 id
微任务延迟调度
根据对象路径安全获取对象值
根据复杂对象路径操作对象
不可变数据工具库
优秀的不可变状态库 immer
前端构建工具配置生成器
tsconfig.json 生成器
利用 XState(有限状态机) 编写易于变更的代码
使用 better-queue 管理复杂的任务
跳转页面时可靠的发送埋点信息
web 多线程开发工具 comlink
Service Worker 工具箱 workbox
前端开发中的依赖注入 awilix
前端存储工具库 storage-tools
小型 js 压缩工具
自动注入关系的依赖注入
通用微型状态管理器 nanostores
正则匹配工具
用编程的方式清晰的构建正则表达式
高度优化的 glob 匹配库 micromatch
基于数字范围生成高性能正则
基于字符串生成 DFA 正则表达式
实用工具
文件下载
JSON 的超集 serialize-javascript
JSON 超级序列化工具
数据扁平化工具 normalizr
微小的 bus 库 mitt
检测图像 (视频) 加载完成库
专业的深拷贝库
强大的业务缓存库 memoizee
请求限流
强大的异步库 async
启发式缓存库 proxy-memoizee
过去(未来)时间格式化
函数响应式开发库 RxJS
web 安全
安全三要素
使用 HTTPS
css 键盘记录器
xss 过滤器 DOMPurify
CSP 内容安全策略
防御 ReDoS 攻击
使用 HttpOnly 解决 XSS Cookie 劫持
浏览器原生 xss 过滤器
文件名替换非法字符串
前端 CORS 工具 XDomain
使用一行代码发现前端 js 库漏洞
URL 验证
有趣的安全补丁
性能优化
压缩传递对象的 JavaScript 工具库 u-node
使用 Bun 提升代码运行效率
高性能的 JavaScript 运行时 just-js
单例 Promise 缓存!
图片压缩服务 tiny-png
动态加载脚本与样式!
利用 gpu 加速数据运算
通过批处理避免布局抖动 fastDom
提高转化率的预请求库 instant.page
提高转化率的预渲染库 quicklink
跳过 v8 pre-Parse 优化代码性能库 optimize-js
通过重用减少垃圾回收
AVIF 图片格式
利用 'ts' 编译 WebAssembly
通过扁平字符串提升输出性能
网络性能监控库 Perfume
加快执行速度的编译缓存工具 v8-compile-cache
让 React 拥有更快的虚拟 DOM
复杂的主线程调度工具库
测试
服务端性能测试工具 JMeter
流量复制工具 GoReplay
使用 Pollyjs 进行 HTTP 请求测试
新的端到端测试框架 cypress
猴子测试工具 gremlins
调试
修改 window 上的变量
使用代理查看对象调用
查找调试 JS 全局变量
js 语言解析
New Function 创建异步函数
函数拷贝
取得范围数据
通向地狱的 ES1995
对比 switch (true) 和 if else 判断
奇怪的 parseInt(0.0000005)
使用宏扩展 JavaScript 语言
玩转 AbortController 控制器
ponyfills
esm 动态引入
面向未来的浏览器 API
浏览器文件操作
压缩 API Compression Streams
浏览器中的取色器 API EyeDropper
工程化工具
利用增量构建工具 Preset 打造自己的样板库
依赖库本地调试 yalc
构建工具统一插件工具 unplugin
高性能 Web 渲染引擎 kraken
脚本工具
使用 JS 编写脚本的工具 zx
通过灭霸脚本学 shell
使用 corn 实现定时任务
纠正控制台错误命令工具
实用数据结构
前缀树
并查集
哈希表
优先队列
跳表
参考 C++ STL 实现的的数据结构库 js-sdsl
开源游戏&框架
群侠传,启动!
网页端视觉小说引擎 WebGAL
GitHub
选择主题
深色
浅色
自动
前端开发中的依赖注入 awilix
依赖注入是一种异常强大的设计模式!
依赖注入优点
通过这种设计,类会从外部源请求依赖项而不是在内部创建它们。代码层面中这有什么好处呢?
随时替换依赖项
方便测试
解决循环依赖
我们先这样处理
使用框架 awilix
awilix
是一个支持函数和类的依赖注入框架。