携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

前段时间练手TypeScript，把业务中的JS工具全部改写了一遍，剔除一些涉及业务功能的方法。后来越写越感觉上瘾，越写想写的东西越多，大家都知道越多越不好，越轻量越受欢迎。于是，又又又重新折腾了一遍。

Fastool

一个短小而精悍的现代JavaScript使用工具库，它涉及了开发过程中常用到的基操，非常符合高阶前端的风格。

为了能够让Fastool得到更好的维护，我们特意为其加持了一些能力：

✅ 完整的TypeScript定义
✅ 适用于现代ES6规范
✅ 涵盖多数开发所需的方法
✅ 支持动态插件库，随时拓展
✅ 采用Vitepress部署文档
✅ 支持按需引入，支持多种规范(umd/esm/cjs等)
✅ 更多能力等你挖掘....

使用

如果你不想在项目中引入太多依赖，而又想使用某一个方法那么可以复制文档中的源码，在你的项目中引入

import

# pnpm 🔥
pnpm add fastool

# npm
npm install fastool

# yarn
yarn add fastool

CDN源

jsdelivr cdn.jsdelivr.net/npm/fastool

unpkg unpkg.com/fastool

文档地址

特意定制了nextUI的主题,是不是颜值在线？

文档介绍 | 仓库地址 | npm地址

我想参与

为了收集更多优秀实用函数，我们希望更多的人加入进来，你可以短短几分钟的时间就可以贡献你的代码

注释即文档

为了最大化降低维护成本，我们统一实用标准的注释作为文档

/**
 * @func isBrowser
 * @return {boolean}
 * @desc 检测代码是否运行在浏览器环境
 * @example if (isBrowser()) {...}
 */

完整例子

/**
 * @func smoothScroll
 * @param {number} top 滚动到的位置
 * @param {number} duration 滚动的时间
 * @returns {void}
 * @desc 📝 平滑滚动到指定位置
 * @example smoothScroll(0, 1000);
*/
export const smoothScroll = (to: number, duration: number = 300): void => {
  const start = document?.documentElement?.scrollTop ?? document?.body?.scrollTop;
  const change = to - start;
  const startDate = +new Date();
  const tick = (): void => {
    const now = +new Date();
    const val = Math.min(1, (now - startDate) / duration);
    window.scrollTo(0, start + change * val);
    if (val < 1) {
      window.requestAnimationFrame(tick);
    }
  }
  window.requestAnimationFrame(tick);
}

基于canvas的处理只写了一部分，欢迎大家补充

/**
 * @func getImageBase64Url
 * @param {HTMLImageElement} image
 * @returns {string}
 * @desc 获取图片base64Url
 * @example getImageBase64Url(image)
 */
export function getImageBase64Url(image: HTMLImageElement): string {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  ctx?.drawImage(image, 0, 0, image.width, image.height);
  const suffix = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
  return canvas.toDataURL(`image/${suffix || 'png'}`, 1);
}

维护者

这个项目需要感谢的参与者：

总结

恭喜你，忍住了枯燥，耐住了无聊，学完了本节课。闲着没事的朋友可以我，点个赞，评个论，收个藏，关个注。

手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。

《高阶前端指北》之短小而精悍的现代TS工具库